JQM 的一些笔记

1、本地测试，页面不能跳转，即href=”…”无效
<a href=”…” data-ajax="false"

2、data-position="fixed"定位在手机浏览器里边浏览跑动的问题

搜索了一下解决方案：

方案一： $.mobile.fixedtoolbar.prototype.options.tapToggle=false; 本人测试没通过，网友有人说有效，但是我不知道什么原因没通过；

    Use these settings after jQuery js file and before jQuery mobile js file:
      <script>     
       $(document).on("mobileinit",function(){
       　　$.mobile.fixedtoolbar.prototype.options.tapToggle =false;
  　　　　 $.mobile.fixedtoolbar.prototype.options.hideDuringFocus ="";});
</script>

方案二： data-position="fixed" 结合 data-tap-toggle="false"使用; 本人测试没通过，同上

方案三： data-position="fixed" 结合 data-fullscreen="true" 本人测试通过，可以固定头部底部，但是，页面高度会减少，内容不能完整的显示，会隐藏一部分内容，隐藏的高度大概是头部底部的高度。所以这个不适于WEB页面解决。

方案四： iScroll实现。测试通过，但跟JQmobile兼容性不佳

可以查看这个网址：http://www.dotblogs.com.tw/pou/archive/2010/11/15/19449.aspx

3、移除项目列表中的箭头

　　默认情况下，jQuery Mobile框架会为每一个列表项添加一个箭头，想要禁用箭头显示，需要在想要移除列表项设置data-icon="false"。

<li data-icon="false"><a href="contact.html">Contact Us</a></li>

4、禁止截断过长的列表和按钮内容

在jQuery mobile中，如果列表或者按钮中文字的内容过长，jQuery Mobile会自动截断其超过长度的内容，但如果不希望这样的话，可以在CSS样式中增加如下设置即可，比如下面的是针对按钮的CSS样式设置：

.ui-btn-text {

white-space: normal;

}

下面的是针对列表的CSS样式设置

.ui-li-desc {

white-space: normal;

}

如果要恢复对文字的截断,则继续设置CSS为white-space: nowrap;

5、实现页面加载时的随机页面背景过渡效果

jQuery Mobile中,当需要实现页面加载时,可以有很多的页面加载事件可供使用。比如下面的CSS和JavaScript代码，可以实现页面加载时的随机页面背景过渡效果。

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到3之间的随机数

　 $('.my-page').removeClass().addClass('bg' + randombg);

});

6、禁用button

在有的情况下，可能会需要禁止按钮的加载事件，这个时候可以继续通过如下的设置实现：

$('#home-button').button("disable");

如果要恢复可用，则设置为：

$('#home-button').button("enable");

7、去掉页面加载时的提示信息

如果在加载页面时，不需要显示页面加载信息时，可以通过设置一个属性来取消显示加载提示信息，如下：　

$.mobile.pageLoading(true);

如果要继续保持显示页面加载信息，则为：

　$.mobile.pageLoading();

8、创建自定义主题

jQuery Mobile本身提供了A-E五种不同的主题，但可以自定义主题，步骤如下：

从jQuery Mobile的任意一个定义主题的CSS文件中，复制其内容到自己定义的CSS文件中。

给要自定义的CSS主题一个恰当的名称并且重新命名CSS文件，注意命名必须是(a-z)英文字母，比如你是从jQuery Mobile的主题c的样式文件中复制的，则可以将主题命名为Z,则复制过来的内容中，比如要将.ui-btn-up-c改为.ui-btn-up-z,.ui-body-c改为.ui-body-z，如此类推。

改变新建立的自定义主题的颜色和CSS文件。

最后，需要在页面中，应用新定义的主题样式，如下：

9、创建一个没有文本只有图片的按钮

有时，可能想用一个没有文本内容仍具有按钮特性的一个按钮。如果要在按钮上隐藏文本，设置data-iconpos="notext"，例如：

10、打开一个无需使用Ajax页面过渡的超链接

如果不需要使用Ajax打开一个页面的链接，可以设置链接的rel属性，如下：

11、设置页面的背景颜色

怎样在不修改jQuery Mobile样式下设置一个页面背景颜色的？听起来很简单，其实需要花几分钟时间才能解决。通常情况下，需要在body元素中设置背景颜色，但是用jQuery Mobile框架，需要设置在ui-page类中。

.ui-page{

background:#eee;

}

12、搜索

给搜索加一个默认的值，显示在搜索框上，在INPUT 上加一个 placeholder="要显示的内容"

posted @ 2013-07-15 14:12 wjq09 阅读(836) 评论(0) 编辑收藏举报

刷新页面返回顶部

水落无痕

JQM 的一些笔记

公告