jQuery Mobile是jQuery 在手机上和平板设备上的版本,jQuery Mobile不仅包含jQuery核心库,而且提供了一个完整统一的jQuery移动UI框架,支持全球主流的移动平台;jQuery Mobile将“写得更少、做得更多”这一理念提升到了新的层次华为手机错误代码大全 。下面这个实例演示了使用jQuery Mobile在Android手机上实现多个折叠块互斥展开。此实例在Android Studio开发环境中编写且运行在Android手机上。
01
实例功能
此实例主要通过设置div元素的data-role属性为collapsibleset,实现多个折叠块在一个集合中互斥展开,即同一时间只有一个折叠块可以展开华为手机错误代码大全 。当实例运行之后,如果一个新的折叠块被展开,其他的所有折叠块都会被折叠起来,效果分别如图1(a)和图1(b)所示。
■ 图1
02
展开全文
实现代码
<!DOCTYPE html>
< html>
< head>
< metacharset= "utf-8"/>
< linkrel= "stylesheet"href= ";
< src= ";
< src= ";
</ head>
< body>
< divdata-role= "page">
< divdata-role= "main"class= "ui-content">
< divdata-role= "collapsibleset">
< divdata-role= "collapsible">
< h1> Android炫酷应用300例.实战篇 </ h1>
< imgsrc= "imagemyimage1.jpg"/> </ div>
< divdata-role= "collapsible">
< h1> HTML5+CSS3炫酷实例集锦 </ h1>
< imgsrc= "imagemyimage2.jpg"/> </ div>
< divdata-role= "collapsible">
< h1> jQuery炫酷实例集锦 </ h1>
< imgsrc= "imagemyimage3.jpg"/> </ div>
< divdata-role= "collapsible">
< h1> Visual C#2005数据库开发经典案例 </ h1>
< imgsrc= "imagemyimage4.jpg"/> </ div>
< divdata-role= "collapsible">
< h1> Visual C++.Net新技术编程120例 </ h1>
< imgsrc= "imagemyimage5.jpg"/>
</ div>
< divdata-role= "collapsible">
< h1> Visual C#2005 编程技巧大全 </ h1>
< imgsrc= "imagemyimage6.jpg"/>
</ div>
< divdata-role= "collapsible">
< h1> Visual C#2008 最佳编程实例集粹 </ h1>
< imgsrc= "imagemyimage7.jpg"/>
</ div>
</ div>
</ div>
</ div>
</ body>
</ html>
03
代码说明
上面这段代码在MyCode\MySampleH21\app\src\main\assets\myPage.html文件中华为手机错误代码大全 。在这段代码中,data-role="collapsibleset"表示创建一个可折叠集合,即组合在一起的多个可折叠块,当新块被打开时,所有其他块关闭。
此实例的完整代码在MyCode\MySampleH21文件夹中华为手机错误代码大全 。
04
补充说明
在测试代码时,必须保持网络畅通华为手机错误代码大全 。
05
源代码下载
关注微信公众号,后台回复关键词 “Android App开发超实用代码030” 即可获得完整源代码华为手机错误代码大全 。
06
参考书籍
扫码优惠购书
《Android App开发超实用代码集锦——jQuery Mobile+OpenCV+O》
作者:罗帅、罗斌
定价:99元
问题描述+解决方案+真实源码+效果截图
介绍jQuery Mobile、OpenCV、OpenGL等在Android平台运行的应用
300个实例华为手机错误代码大全 ,提供完整源代码,边看边做边学