長い文書を書いてはいけません、通常は日記を書くので、これはひどく書かれた場合は気にしないで、少しさびています。
今日の痛み無料卵は、あなたが一日中何かについて書きたいし、将来はダウン(書き込まれた)更新されています。
時間が短すぎる、過去数ヶ月は、今日は合格のためのあまり、最新の時間1時00分と考えます。
ポイントを取得!
これは、jQueryのパッケージに基づいてプラグイン指定されたデータを、追加するためにクリックごと、メソッド名のbatchLoadingを呼び出し、シンプルなワンボタン操作に、常に最初に来て、ジジを冷却していないです。
方法は以下の通りです:
HTML
<div class="default-batch-box batch-box">
<ul class="default-list-box">
</ul>
<div class="default-batch-unlock">
<span></span>
</div>
</div>
JAVASCRIPT
<script>
var data = [1,2,3,4,'a','b','c','d',1,2,3,4,5,6,9,]
batchLoading({
node: ['.default-list-box','.default-batch-unlock'], // 第一个节点为添加数据class 第二个为点击事件class
data: data, // 总数据
default: 2, // 默认从第几条数据开始
everyTime: 4, // 每次添加多少条数据
method: function (data) { // 循环数据
var str = ''
var tiny = data
str = '<li>'
str = '<span>' tiny '</span>'
str = '<span>上海</span>'
str = '<span>机械业</span>'
str = '<span>加载器</span>'
str = '<span>去参团</span>'
str = '</li>'
return str
},
complate: function () {
alert('加载结束')
}
})
</script>
包装batchLoading.jsの方法
1 (function (g) {
2 var _plus = 1
3 function addBatchTemplate (data, start, stop, everyTimes, fallBack, complate) {
4 var str = ''
5 if ((stop-everyTimes) <= data.length) {
6 for (var i = start; i < stop; i ) {
7 if (data[i]){
8 var tiny = data[i]
9 str = fallBack(tiny)
10 }
11 }
12 }
13 else {
14 complate()
15 }
16 return str
17 }
18
19 function implementionAddBatchTemplate (option, start, stop, everyTimes, fallBack, complate) {
20 $(option.node[0]).append(addBatchTemplate(option.data, start, stop, everyTimes, fallBack, complate))
21 }
22
23 function excuteBatchLoadData (option, everyTimes, fallBack, complate) {
24 var start = _plus
25 implementionAddBatchTemplate(option, start * everyTimes, _plus * everyTimes, everyTimes, fallBack, complate)
26 }
27
28 function handleEventLoadData (option, everyTimes, fallBack, complate) {
29 $(option.node[1]).unbind('click').on('click', function (e) {
30 excuteBatchLoadData(option, everyTimes, fallBack, complate)
31 })
32 }
33
34 function batchLoading (params) {
35 implementionAddBatchTemplate(
36 {
37 data: params.data,
38 node: params.node
39 },
40 params.default,
41 params.everyTime,
42 params.everyTime,
43 params.method,
44 params.complate
45 )
46 handleEventLoadData(
47 {
48 data: params.data,
49 node: params.node
50 },
51 params.everyTime,
52 params.method,
53 params.complate
54 )
55 }
56
57 g.batchLoading = batchLoading
58 })(this ? window : global)
レンダリングは、現在complateメソッドを呼び出すためのクリックが終了した後、第二の先頭から各クリックプラス4つのデータは、デフォルトのデータを見られています。
デモDEMO(0から始まる)のデータをロードするためにクリック
gitのコードします。https://github.com/ZWLTZ/batchLoading/tree/master
より専門的なフロントエンドの知識、作る [2048] APE www.mk2048.comを