js 列表 基于jquery

最近刚学了 html5 每次都要去写列表界面 做了个简单的封装

(function(window) {

function ListView() {
}
var option;
var table;
var load;
var layout_item = "<ul id='item'style='width:100%;background:#FFFFFF'></ul>";
var loadmore = "<li class='list-item'><span class='loadmore'><img src='./image/pull.png' width='20'>点击加载更多</span></li>";


var handler = {
// 滚动事件  暂未使用
pageScroll : function() {
// 滚动条滚动高度
var scrolltop = $(this).scrollTop();


// 浏览器高度
var clientH = $(window).height();
// 获取文档的高度
var doch = (option.listview == undefined ? $("#list-view")
: option.listview).height();
var timer = setTimeout(function() {
if (doch - clientH - scrolltop < 10) {
if (!!pageno) {
option.loadmore();
}
}
}, 0.1E3)


}
};
     
        //适配器
setAdapter = function(op) {
option = op;
item = $(layout_item);
load = $(loadmore);
if (!option.data) {
return;

}

               //定义简单的列表头部

if (option.header_view) {
item.append(option.header_view);
}
$.each(option.data, function(n, value) {
var view = getChild(n, value);
item.append(view);

});

//是否需要按钮 加载更多 加载状态 没写

if (option.loadmore) {
load.find('.loadmore').bind("click", function() {


option.loadmore()
});
item.append(load);

}

     

         /**
* 添加到想要的div 下面 class 写成list-view 至于其他的名字 需要自己传过来
* 

*/

(option.listview == undefined ? $(".list-view") : option.listview)

.append(item);


}
var getChild = function(n, value) {
var view = $('#item').find('#' + n);
if (view.length > 0) {
return $('#' + n);
} else {
var view = option.getView(n, value);
return view;


}
};
ListView.prototype = {
constructor : this.ListView,
setAdapter : this.setAdapter,
}
window.ListView = new ListView();

})(window)

使用方法  

var option = {
header_view : 头部列表标题,
data : array, 数据
listview : 需要添加的 对象,默认是class='list-view' ,

loadmore:function(){

加载更多 的点击事件

}
getView : function(n, item) {
var v = $(layout_buttom);
v.attr('id', n)
$$(v, '.time').html(item.time); 
$$(v, '.time_length').html(item.time_length); /
$$(v, '.action').html(item.action).css('color', '#f96f00') 
return v


}
} // 被选择的对象,选择的对象
var $$ = function(v, s) {
return v.find(s);
}
ListView.setAdapter(option);