Ruby's Louvre

每天学习一点点算法

导航

mass Framework pagination插件v2

现实中的需求太复杂了,因此插件必须拥有很强的制定性,v2就是在这方面进行改进。现在分页栏大到布局,皮肤(10多套任你选),小到每个链接的标签类型,里面的内容都可以制定。

重构后的代码,在核心算法的那一部分呈现出强烈的对称性。在配置对象中,它巨细靡遗地罗列N多可制定的东西,但不用害怕有多复杂,因为内部的默认值会帮定你搞定一切。你甚至可以懒到只传个条目的总数就行了。

$.fn.pagintion(max, hash)

下面是其是详细文档,你也可以到我的github上,看其mass Framework的整体文档。那里更新是最快最勤的。

参数:

max
必需。Number。一共有多少个需要进行分页的物件(如贴子,图片什么)。
hash
可选。Object。配置对象。

返回值:

mass实例

hash中有如下可选参数:

键名
show_last:当分页过多时,是否显示最后一页。
show_first:当分页过多时,是否显示第一页。
show_next:当分页过多时,是否显示下一页链接。
show_prev:当分页过多时,是否显示上一页链接。
show_jump:是否显示跳转框。默认是false。
link_class:普通分页的类名,默认为link。
prev_class:上一页链接的类名,默认为prev_page。
next_class:下一页链接的类名,默认为next_page。
fill_class:包围省略号的标签的类名,默认为fill_page。
curr_class:当前页面链接的类名,默认为curr_page。
disabled_class:上一页与下一页不可点时的类名,默认为disabled。
prev_text:上一页链接的显示文本,默认为下一页>。
next_text:下一页链接的显示文本,默认为<上一页。
fill_text:当分页过多时,在第一页与显示页之间或者最后一页与显示页之间的用于表示省略的文本,默认是"..."
curr_page:当前页面,注意为了符合普通人的常识,强制最小值是1
per_pages:每页显示多少条目(贴子,图片什么的)。
show_pages:显示多少个页码,默认为10,建议取最中间的那个页码,比如是说11取6,可以确保视觉上的对称性。
curr_tag:当前页面的标签,默认为em。
fill_tag:包围省略号的标签,默认为code。
disabled_tag:当上一页与下一页不可点时,其标签类型,默认是span。
selector:绑定事件时,我们使用事件代理,这是其用于过滤的选择器,默认是"a,input"。
layout:分页栏各种元素的排序方式,默认是"prev,first,link,last,next,jump"。
jump_text:跳转框的样子,默认是"<kbd>跳转到第<input \/>页<\/kbd>"。
link_tmpl:各种页码(如上一页,下一页,当前页,普通页,省略号)的共同模板。
callback:当点击分页栏中的链接或跳转框时触发的回调,第一个参数是事件对象,第二参数是分页栏对象,第三个参数是页码, this指向当前点击的元素节点。

在回调函数中,我们可以调用分页栏对象的render方法重新渲染自身。

例子
                <div id="box"></div">
            
            $.require("ready,attr,more/pagination",function(){
                var html = "<select>";
                ("black_red,digg,badoo,yahoo,new_yahoo,Meneame,new_yahoo,flickr,sabros,green,"+
                    "black,gray,mis_algoritmos,f12_megas,Technorati,youtube,msdn,blue,ria9").replace( $.rword, function(value){
                    html += "<option>"+value+"<\/option>"
                });
                html += "<\/select>";
                $(html).appendTo("fieldset");
                $("#box").pagination(120,{
                    curr_page:1,
                    curr_class:"current",
                    per_tgfc:10,
                    show_tgfc:8,
                    curr_tag: "span",
                    callback: function(e, ui, i){
                        e.preventDefault();
                        ui.curr_page = i;
                        ui.render();
                        return false;
                    }
                }).addClass("new_yahoo")
                $("body").delegate("select","change",function(){
                    $("#box")[0].className = $(this).val();
                })

            })
            

由于浏览器对JS的解析不同,mass Framework在chrome暴露了某个全局变量导致与博客园引入的jQuery冲突,两改俱伤,因此在chrome中看不到效果。

另外,分页栏的样式好像也与博客园的某些样式表冲突,被覆盖了不少设置,悲催,本来更好看些的。

posted on 2012-02-23 09:01  司徒正美  阅读(3404)  评论(4编辑  收藏  举报