Screw 轻量级的无限滚动 jQuery 插件 - 文章教程

Screw 轻量级的无限滚动 jQuery 插件

发布于 2019-12-12 字数 3235 浏览 1496 评论 0

Screw 是一个 jQuery 插件当用户滚动页面的时候加载内容,是一个无限滚动翻页的插件。可以通过异步加载节省您的带宽资源,优雅的加载方式提高网页的用户体验。

Screw 是一个开源免费的插件,意味着你可以自由的修改分发此插件,而不用担心授权问题。

使用方法

在 body 元素上面调用 screw 方法,或者其它的可利用的元素上面,并设置需要加载 的 HTML 代码。

<script src="https://libs.wenjiangs.com/jquery/2.1.3/jquery.js"></script> 
<script src="js/jquery.screw.js"></script>
<script>
jQuery(function(){
   $('#my-div').screw();
});
</script>

加载HTML代码

<p class="screw" rev="&lt;img src='my-image.jpg' /&gt;"></p>
Or:
<p class="screw screw-before" rev="&lt;img src='my-image.jpg' /&gt;"></p>
Or:
<p class="screw-image" rel="my-image.jpg">Loading ... </p>
Or:
<p class="screw" rel="screw-test.php?key1=value&amp;key2=value"></p>
Or (endless scrolling):
<p class="screw screw-before screw-repeat" rev="&lt;img src='my-image.jpg' /&gt;"></p>

加载页面框架

将数据加载属性添加到Screw对象。插入远程的标识或类名称对象你希望加载。

Loading by ID attribute -
<p class="screw screw-after"
rel="screw-test.php?key1=value&amp;key2=value"
data-load="#my-div"></p>

Loading by css class-name -
<p class="screw screw-after"
rel="screw-test.php?key1=value&amp;key2=value"
data-load=".my-class"></p>

可选参数

这个插件的可选参数只有一个那就是loadingHTML,一个字符串包含可选的HTML是在对象显示加载。

方法函数

screw

Applies Screw to this object. If you want to load your HTML from an external file use the rel attribute to hold the path to the (local) external file. This uses GET, so you can pass data using the query string. You can alternatively use the rev attribute to hold the HTML you want to load instead of using the rel attribute to load an external file.

screw-before

Inserts the HTML before the object with this class.

screw-after

Inserts the HTML after the object with this class.

screw-append

Appends the HTML to the object with this class.

screw-prepend

Prepends the HTML to the object with this class.

screw-repeat

Repeats screw each time the trigger point is reached. This is for effects like continuous scrolling pages where data is appended to the bottom of the page as the user scrolls.

screw-image

Use the rel attribute to hold a image URL. The image will be preloaded and loaded into the object with this class. You do not need to use any other classes with this class.

screw-remove

Objects with this class are hidden when they are scrolled beyond the top or right of the viewport.

screw-replace

Replaces the object with internal or external data. Use the “rel” attribute to hold the URL for the external data, OR use the “rev” attribute to hold the HTML you want to load. External data is loaded using ajax GET so you may pass variables using the query string.

相关链接

Github 地址:https://github.com/jasonlau/jQuery-Screw

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论