zoukankan      html  css  js  c++  java
  • Jquery moblie

      1、在列表项和按钮上禁用文本截断      如果你的列表项或者按钮上是一个很长的文本,它将会被jQuery Mobile自动截断,要禁用这个截断设置,需要在CSS选择器上添加属性"white-space:normal"。

    例如,在按钮禁止截断:      .ui-btn-text{           white-space:normal;      }      在列表项上禁止截断:      .ui-li-desc{           white-space:norma;      }      应用自动截断,在元素上面设置"white-space:normal:nowrap"。

     

        2、在页面加载时随机显示背景      jQuery Mobile拥有一系列在页面加载时触发的初始化事件,下面是每次页面加载完成后随机显示一个背景。      CSS如下:      .my-page  { background: transparent url(../images/bg.jpg) 0 0 no-repeat; }      .my-page.bg1 { background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; }      .my-page.bg2 { background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; }      .my-page.bg3 { background: transparent url(../images/bg-3.jpg) 0 0 no-repeat; }      JavaScript如下:      $('.my-page').live("pagecreate", function() {           var randombg = Math.floor(Math.random()*4); // 0 to 3           $('.my-page').removeClass().addClass('bg' + randombg);      });    

      3、禁用按钮      $('#home-button').button("disable");      设置按钮可用      $('#home-button').button("enable");     

     4、禁止加载时弹出信息      每次加载一个不同的页面时都会触发弹出消息,确实很烦人,要禁用这种情况的发生,添加如下代码 $.mobile.pageLoading(true); 默认情况下是可见的 $.mobile.pageLoading();     

     5、自定义主题      jQuery Mobile框架有5款主题,主题A,主题B,主题C,主题D和主题E。但你也可以轻松为你的web app      创建一个主题。步骤如下:      (1)从jQuery Mobile CSS文件中复制任何一个主题粘贴到你自己的CSS文件中。      (2)给你的主题和CSS选择器合理命名。例如,你复制了主题C,而你想命名你的主题为主题Z,重命名.ui-btn-up-c为.ui-btn-up-z等等。      (3)、修改自定义主题的颜色和样式      (4)、应用你的自定义主题到任一元素上,仅需设置data-theme属性为z,例如: <div data-role="page" data-theme="z">  

        6、应用自定义字体      你当用jQuery Mobile构建一个web app时,想用一些特殊字体,你会发现用@font-face自定义字体是一个令人相当满意的方法。     

     7、创建一个没有文本只有图片的按钮      有时,你可能想用一个没有文本内容仍具有按钮特性的一个按钮。要在按钮上隐藏文本,设置data-iconpos="notext",例如: <a href="../index.html" data-icon="grid" claa="ui-btn-right" data-iconpos="notext">Home</a>    

      8、打开一个无需使用Ajax页面过渡的超链接      <a href="../index.html" data-icon="grid" class="ui-btn-right" rel="external">Home</a>    

      9、移除项目列表中的箭头      默认情况下,jQuery Mobile框架会为每一个列表项添加一个箭头,想要禁用箭头显示,需要在你想要移除列表项设置data-icon="false"。      <li data-icon="false"><a href="contact.html">Contact Us</a></li>    

      10、设置页面的背景颜色 怎样在不修改jQuery Mobile样式下设置一个页面背景颜色的?听起来很简单,其实需要花几分钟时间才能解决。通常情况下,你需要在body元素中设置背景颜色,但是用jQuery Mobil框架,你需要设置在ui-page类中。      .ui-page{           background:#eee;      }

  • 相关阅读:
    iOS 面试题搜集
    iOS 常用第三方类库、完整APP示例
    iOS 键盘遮挡输入 解决办法
    iOS UIColor RGB HEX
    iOS APP性能优化
    iOS Swift 数组 交换元素的两种方法
    iOS CoreData primitive accessor
    iOS Start developing ios apps (OC) pdf
    iOS 传值方式
    iOS IB_DESIGNABLE IBInspectable @IBDesignable @IBInspectable 加速UI开发
  • 原文地址:https://www.cnblogs.com/yanypan/p/2540541.html
Copyright © 2011-2022 走看看