`

10个你必须知道的jQueryMobile代码片段

 
阅读更多

原创文章,转载请注明: 转载自http://www.yiiyaa.net/

本文链接地址:http://www.yiiyaa.net/1426

0、jQuery Mobile生命周期函数必须在 jQuery Mobile脚本加载之前声明,否则会完全不起作用!

拿“mobileinit”来说,我一开始的时候这样写,坑爹的是jqm根本没有任何反应!

<script src="Jquery.js"></script>

<script src="Jquery-mobile.js"></script> 

<script type="text/javascript">

$(document).bind("mobileinit", function(){

 alert("jquery mobile");

}); 

</script> 

正确的写法:

<script src="Jquery.js"></script>

<script type="text/javascript">

$(document).bind("mobileinit", function(){

 alert("jquery mobile");

}); 

</script>

<script src="Jquery-mobile.js"></script>

 

 

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;
}

 
<!-- Begin anyShare -->
分享到:
评论

相关推荐

    jQuery Mobile开发常用技巧

    本文将深入探讨 jQuery Mobile 开发过程中的十大实用技巧与代码片段,帮助您更加高效地进行移动 Web 应用的开发。 #### 二、完整的基本页面结构 构建一个基本的 jQuery Mobile 页面通常需要以下结构: ```html &lt;!...

    jQuery mobile带图片的导航

    例如,你可能需要为每个导航项创建一个下拉菜单,这可以通过添加`data-enhance="false"`防止jQuery Mobile自动增强该元素,然后手动编写JavaScript代码或使用第三方库实现。 在实际项目中,`restaurant_picker2`...

    jquery mobile css3手机表单页面布局按钮样式

    文件名 "texiao8137_1560929569" 可能是指一个包含示例代码或资源的文件,可能包含了jQuery Mobile与CSS3结合使用的具体实例。为了更好地学习和实践,你可以下载这个文件并查看其中的内容,动手尝试创建和定制自己的...

    query mobile 代码助手

    jquery mobile代码助手包含了对JQuery Mobile中的所有组件属性的详细介绍。对于JQuery Mobile的初学者,可以通过生成代码片段进行练习,学习JQuery Mobile所有组件的属性和接口,对于JQuery Mobile开发人员,jQM代码...

    jquery-mobile移动开发源代码

    通过提供的"jquery-mobile移动开发源代码",你可以: 1. 分析页面结构,理解 jQuery Mobile 如何构建响应式布局。 2. 查看事件绑定和回调函数,了解如何在页面生命周期中插入自定义代码。 3. 实践组件使用,如按钮、...

    Jquery+Mobile源码实列演示

    这些代码片段可以帮助读者理解`jQuery Mobile`的用法,通过查看和修改源码,加深对库的理解和应用能力。 综上所述,`jQuery Mobile`是移动Web开发的强大工具,通过这个教程,开发者可以学习到如何利用其组件和API来...

    jQuery Mobile快速入门源码

    2. JavaScript 代码片段,可能包含自定义的事件监听器和函数,用于扩展或定制默认行为。 3. CSS 样式,可能包含对主题或组件样式的个性化调整。 通过学习和理解这些源码,你可以快速掌握如何使用 jQuery Mobile ...

    JQuery权威指南源代码

    《JQuery权威指南源代码》是一本深入解析jQuery库的参考书籍,其源代码提供了丰富的实例和示例,帮助读者更好地理解和应用jQuery。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...

    [jQuery移动开发].源代码

    《jQuery移动开发》源代码详解 在现代网页开发中,jQuery以其简洁的API和强大的功能深受开发者喜爱...通过深入研究和实践"jquery-mobile"源代码,你将能够熟练掌握这个强大的移动开发框架,提升你的移动应用开发技能。

    jQuery Mobile漏洞会有跨站脚本攻击风险

    据jQuery官方数据,全球有超过十五万个活跃网站依赖jQuery Mobile。 然而,谷歌的安全工程师Eduardo Vela在jQuery Mobile中发现了一个安全隐患,可能导致跨站脚本(XSS)攻击。这种攻击允许恶意用户在受害者的...

    [jQuery移动开发].(jQuery.Mobile).Jon.Reid.文字版

    《jQuery Mobile》是由jQuery团队开发的一款专为移动设备设计的前端框架,旨在简化移动Web应用的开发,提供统一的跨平台用户体验。Jon Reid所著的《jQuery Mobile》文本版,无疑是学习这一技术的重要资源。 jQuery ...

    JqueryMobile动态生成listView并实现刷新的两种方法

    例如,在文章提供的代码片段中,使用了jQuery的选择器和append方法向一个指定的ul元素中动态添加了新的列表项。 知识点二:实现listView刷新 在动态添加新的列表项后,为了让这些新添加的内容能够被JqueryMobile...

    jQuery Mobile页面跳转后未加载外部JS原因分析及解决

    因此,位于标签中的外部JS文件和不在标签内的JS代码片段在首次页面加载时不会执行,只有在手动刷新页面后它们才会被正确加载。 这个问题的核心在于理解jQuery Mobile的页面事件和页面生命周期。jQuery Mobile设计了...

    备忘:jquery的一些实例

    在这个备忘中,作者可能分享了一些实用的代码片段或教程,帮助开发者了解如何在实际项目中有效地利用jQuery。 描述中提到的“NULL 博文链接:https://heweiya.iteye.com/blog/399657”表明,虽然原始的描述信息缺失...

    jQuery Mobile动态刷新页面样式的实现方法

    在使用jQuery Mobile时,如果动态添加了新的DOM元素,比如一个`&lt;li&gt;`元素,那么你必须手动刷新这个新元素,以便jQuery Mobile能够应用它的样式和增强的特性。例如,当你动态地向一个`ul`元素中添加新的`li`元素时,...

    android Mobile

    HTML代码片段展示了如何配置和使用jQuery Mobile的组件和特性: 1. `&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;` 定义文档类型,确保浏览器以标准模式渲染页面。 2. `&lt;head&gt;` 标签内引入了...

    jquery 106个 经典实例

    压缩包中的`jQ学习第一季`、`jQ学习第二季`、`jQ学习第三季`可能包含了按章节分类的jQuery实例代码,每个实例都可能对应一种或多种功能的应用,是学习和实践的好材料。 通过学习和实践这106个jQuery经典实例,...

    jquery moblie 复选框取值

    在移动应用开发中,jQuery Mobile 是一...提供的`checkboxGetValue.html`文件很可能包含了一个示例,你可以打开查看并测试这些代码片段。而`readme.txt`可能是对这个示例的简短说明,建议一并阅读以获取更全面的理解。

    jqueryMobile 动态添加元素,展示刷新视图的实现方法

    jQuery Mobile是一个基于jQuery的框架,专为移动设备设计的网页开发工具包,它简化了跨平台的移动应用构建流程。在动态添加元素并展示刷新视图方面,jQuery Mobile 提供了一系列的方法来实现这一需求。本文将会详细...

Global site tag (gtag.js) - Google Analytics