README

工作中

pov.jquery.more

仅POV

依赖于PHP框架的方法

$(element).povRefresh(cb);

允许刷新一个元素的HTML代码。

data-pov-v-path 属性是必需的，它允许知道要加载哪个视图。 data-pov-v-uid 属性是可选的，它允许发送参数 uid，该参数将被PHP控制器 PovApi/getView 接收。

<div data-pov-v-path="path-de/ma-vue" data-pov-vv-uid="uid-optionnel">
    Mon machin
</div>

**注意** 如果要刷新的元素有一个文本字段并且该元素有焦点，则只有在焦点移除后才会刷新模板。这个用户体验规则可以防止用户在输入文本时失去焦点。

实用工具

没有直接针对框架的方法

$(element).removeClassPrefix('color-')

允许删除所有以 "color-" 开头的CSS类

$(element).isInViewport() 检查一个元素是否可见于屏幕

优化大型DOM界面的实用程序

if($(element).isInViewport()){
    $(element).addClass("affiche-moi")
}else{
    $(element).removeClass("affiche-moi")
}

具体例子

以下代码示例可以隐藏可见的DOM元素 .visible-in-viewport

HTML

<div class="visible-in-viewport">
    <div>Lot of stuff hard to display</div>
</div>

Less CSS

.visible-in-viewport:not(.in-viewport){
    min-height: 50px;
    min-width: 50px;
    *{
      display: none;
    }
}
.visible-in-viewport.in-viewport{
  //display par défaut si dans le viewport
}

JavaScript

/**
 * ajoute ou enlève la classe .in-viewport sur les éléments .visible-in-viewport
 */
function visibleInViewport(){
    $('.visible-in-viewport').each(function() {
        if ($(this).isInViewport()) {
            $(this).addClass("in-viewport")
        } else {
            $(this).removeClass("in-viewport")
        }
    });
}

//écouteurs DOM

//tous les éléments
$("*").on('scroll', function() {
    visibleInViewport();
});

//la fenêtre
$(window).on('resize scroll', function() {
    visibleInViewport();
});