MyException - 我的异常网
当前位置:我的异常网» 移动开发 » jQuery mobile 疑窦杂证记录

jQuery mobile 疑窦杂证记录

www.MyException.Cn  网友分享于:2013-02-20  浏览:80次
jQuery mobile 疑难杂证记录

1.autodivider listview的使用:

$("#mylistview").listview({
  autodividers: true,
  // the selector function is passed a <li> element from the listview;
  // it should return the appropriate divider text for that <li>
  // element as a string
  autodividersSelector: function ( li ) {
    var out = /* generate a string based on the content of li */;
    return out;
  }
});

 以上是官网上的代码,测试了1个小时,失败,当然也有忽略了官网上很重要的一句话(refresh那句)的原因。 

下面是测试成功时的程序逻辑:

  1. listview增添属性:data-autodividers="true"
  2. 绑定listview所在page的pageinit事件:
    $('#page-xxx).live('pageinit',function(event){
    //......
    }
    该事件非常类似于jQuery中的ready事件,在JQM中,pageinit表示页面加载完毕并且控件被JQM增强过了,也就是说在该事件中可以调用控件的相关插件方法。 
  3. 调用listview插件方法,设置自动分割规则:
    $('#autoDivList').listview({			
        autodividersSelector: function (li) {
            var txt = li.text();
            return txt.charAt(txt.length - 1);
        }
    }
    
     此处取列表项文本的最后一个字符做为自动分割规则(举例)
  4. 第3步只是设置分割规则,并未执行分割操作,关键的一步在这,要调用listview插件的refresh方法,官网也提到了,因为分割操作会往listview中添加一些divider,JQM的规矩是新加入DOM的元素要手动增强,在此直接调用listview插件的refresh方法重新增强下(刷新)。

 

 

 

 

 

 

 

 

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有