当前位置:编程学习 > JAVA >>

修改jQuery mobile的Collapsible

 最近,公司需要使用jQuery mobile来构建一个移动应用,期间遇到了一个场景:需要一个可以折叠的控件,当点击这个控件header的右侧时,展开内容;左侧是不可点击的,只是一些说明性的文字或者图片。如下图所示:

 


当看到这样的需求时,给我的第一感觉就是用jQuery mobile中的Collapsible控件,但是在经过研究后,发现该控件本身无法实现部分点击使其展开。于是我就想是否可以使header右侧部分向右浮动于header之上,并改变header的点击事件,使其绑定到header左侧,从而达到目的。
既然有了方案,就开始动手吧。
1、首先很简单,通过CSS,控制header右侧部分的位置, 代码如下:
<h3>
    <div class="handler">
        Search Options
    </div>
    <div style="float: right; margin-top: -20px;">
        <div style="float: right; margin: 0; padding: 0;">
            columnN
        </div>
        ……
        <div style="float: right; margin: 0 5px 0 0; padding: 0;">
            Column3
        </div>
        <div style="float: right; margin: 0 5px 0 0; padding: 0;">
            Column2
        </div>
        <div style="float: right; margin: 0 5px 0 0; padding: 0;">
            column1
        </div>
    </div>
</h3>
注:中间部分的列,可以根据需要添加多次
 
2、将h3上的单击事件,移到handler上
1)在jQuery mobile源代码中查找header的单击事件,代码如下:
collapsibleHeading
.bind( "click", function( event ) {

    var type = collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ?
                            "expand" : "collapse";

    collapsible.trigger( type );

    event.preventDefault();
});
 
2)从源码中分析得知,只需要把click事件绑定到<div class=”handler”>上即可,改动后,代码如下:
var expandHandler = collapsibleHeading.find(o.handler).length > 0 ? collapsibleHeading.find(".handler, .ui-icon") : collapsibleHeading;
expandHandler.bind("click", function (event) {

    var type = collapsibleHeading.is(".ui-collapsible-heading-collapsed") ?
                            "expand" : "collapse";

    collapsible.trigger(type);

    event.preventDefault();
});
 
到目前为止,对Collapsible控件的修改基本已经完成。但是在使用一段时间后,发现如下一个问题:前端这个header的细节暴露过多,使用起来太麻烦。于是通过简单的封装和调整,前端的header简化为:
<h3>
    <div class="handler">
    Search Options
    </div>
    <div>column1</div><div>column2</div>
    <div>column3</div>……<div>columnN</div>
</h3>
调整后的js源码如下:
1、 在options对象中,增加一个成员:
$.widget("mobile.collapsible", $.mobile.widget, {
    options: {
    ……
    handler: ".handler"
}
2、 控制div样式的代码
var cols = collapsibleHeading.find("div").not(".handler").remove();           
for(var i = cols.length - 1; i >=0; i--){
    var style = "float: right; margin: 0 5px 0 0; padding: 0;";
    if(i== cols.length - 1){
        style = "float: right; margin: 0; padding: 0;";
    }
    collapsibleHeading.find(".ui-btn-text").append($(cols.get(i)).attr("style", style));
}
collapsibleHeading.find("div").not(".handler").wrapAll("<div style='float: right; margin-top: -20px;'></div>");
3、 事件代码:
var expandHandler = collapsibleHeading.find(o.handler).length > 0 ? collapsibleHeading.find(".handler, .ui-icon") : collapsibleHeading;
expandHandler.bind("click", function (event) {

    var type = collapsibleHeading.is(".ui-collapsible-heading-collapsed") ?
                            "expand" : "collapse";

    collapsible.trigger(type);

    event.preventDefault();
});
问题终于解决了,最终代码见附件
jQuery mobile for Collapsiblehttp://files.cnblogs.com/champoin/jquery.mobile-1.0.1.js
Do the right things!


摘自  Xavier Zhang
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,