关于jQuery Mobile Demo案例实现
关于jQuery Mobile Demo案例实现是本文要介绍的内容，主要是来了解jQuery Mobile Demo中的一个小案例，具体内容的实现来看详细代码。
AD：
关于jQuery Mobile Demo案例实现是本文要介绍的内容，主要是来了解jQuery Mobile Demo中的一个小案例，具体内容的实现来看详细代码。
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
2. <html> 
3. <head> 
4. <title>test.html</title> 
5. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
6. <meta http-equiv="description" content="this is my page"> 
7. <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
8. <link rel="stylesheet" href="bile-1.0a2.min.css" />   
9. <script type="text/javascript" src="src="js/jquery-1.4.3.min.js"></script> 
10. <script type="text/javascript" src="bile-1.0a2.min.js"></script 
11. </head> 
12. <body> 
13. <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="e"> 
14. <li data-role="list-divider">Transition Effects</li> 
15. <li><a href="effects.php?id=slide" data-transition="slide">Slide</a></li> 
16. <li><a href="effects.php?id=slideup" data-transition="slideup">Slide Up</a></li> 
17. <li><a href="effects.php?id=slidedown" data-transition="slidedown">Slide Down</a></li> 
18. <li><a href="effects.php?id=pop" data-transition="pop">Pop</a></li> 
19. <li><a href="effects.php?id=flip" data-transition="flip">Flip</a></li> 
20. <li><a href="effects.php?id=fade" data-transition="fade">Fade</a></li> 
21. </ul> 
22. <br /><br /> 
23. <ul data-role="listview" data-dividertheme="e"> 
24. <li data-role="list-divider">Seamless List (margin-less)</li> 
25. <li><a href="#foo" data-transition="slide">Internal Link 1</a></li> 
26. <li><a href="#bar" data-transition="slide">Internal Link 2</a></li> 
27. <li><a href="#" data-transition="slide">Example Item 3</a></li> 
28. </ul> 
29. </body> 
30. </html> 
其中，相关元素的含义如下：
data-role-指定的元素性质的包装，可设置为： 网页， 标题， 内容， 页脚。 另外两个设置中所使用的例子来说明列表元素和列表分隔，为此，该属性设置为： ListView中 列出的主要元素和 列表分隔 列表的护栏。 还有其他一些可用的设置，包括 可折叠的，它创建了一个可折叠的显示/隐藏块
 
data-position  -指定元素是否应 固定，在这种情况下，它会提供在顶部（标头）或底部（用于页脚）
data-inset -specifies whether element should be within content margins or outside of it (flush or with margin) – set to true or false
data-transition -指定的过渡到新的页面加载时使用，可设置为：slide, slideup, slidedown, pop, flip or fade
data-theme -指定的设计主题，使用容器内的元素，可设置为：a,b,c,d,e
data-dividerthem -指定选项的主题相同的分隔使用列表 数据的主题。
关于jQuery Mobile中如何来格式化文本
关于jQuery Mobile学习笔记是本文要介绍的内容，主要是来了解jQuery Mobile中如何来格式化文本，具体内容来看本文详解。为了使其尽可能的灵活，jQuery Mobile使更多的普通HTML内容更加独立。加入适当的缩进使内容的可读性更强。
有两种布局方法使其格式化变得更简单：布局表格和可折叠的内容块布局表格：组织内容以列的形式显示，有两列表格，和三列表格可折叠的内容：当点击内 容块的标题，则会将
其隐藏的详细内容展现出来，下面是一个可折叠内容的实例，单击标题将看到具体的内容，再点击标题则会将展现的内容隐藏。
1. <!DOCTYPE html> 
2. <html> 
3.   <head> 
4.   <title>Collapsible Content Demo</title> 
5.   <link rel="stylesheet" href="code.jquery/mobile/1.bile-1.0a1.min.css" /> 
6.   <script src="code.jquery/jquery-1.4.3.min.js"></script> 
7.   <script src="code.jquery/mobile/1.bile-1.0a1.min.js"></script> 
8. </head> 
9. <body> 
10. <div data-role="page" id="home"> 
11.   <div data-role="header"> 
12.     <h1>Home</h1jquery框架原理> 
13.   </div> 
14.   <div data-role="content"> 
15.     <div data-role="collapsible" data-state="collapsed"> 
16.       <h3>About this app</h3> 
17.       <p>This app rocks!</p> 
18.     </div> 
19.   </div> 
20. </div> 
21. </body> 
22. </html> 
触摸选择的表单元素
jQuery Mobile会自动替换标准的HTML表单元素，例如文本框，复选框，列表框。以这种自定义的样式工作在触摸设备上的表单元素，易用性更强。
例如，复选框将会变得很大，易于点选。点击下拉列表时，将会弹出一组大按钮列表选项，提供给用户选择。
该框架支持新的HTML5元素，例如search和range。另外你可以利用列表框并添加data-role=”slider”并添加两个option选项，创建不错的”打开/关闭”开关，
另外一个不错的特点是组合单选框和组合复选框，可以利用fieldset元素添加属性data-role=”controlgroup”来创建一组单选按钮或复选框，jQuery Mobile自动格式化他们的格式。
使它们看上去更fashion!
一般来说，开发者不需要关心表单的那些高级特性，开发者仅需要以正常的方式创建你的表单，jQuery Mobile框 架会帮你完成剩余的工作。另外有一件事情需要开发人员来完成，即使用div或fieldset 属性data-role=”fieldcontain”包装每一个label/field。这样jQuery Mobile会在label/field对之间添加一个水平分割条。这样的对齐方式可以使其更容易查。
下面是一个jQuery Mobile版的表单元素
1. <!DOCTYPE html> 
2. <html> 
3.   <head> 
4.   <title>jQuery Mobile Form Demo</title> 
5.   <link rel="stylesheet" href="code.jquery/mobile/1.bile-1.0a1.min.css" /> 
6.   <script src="code.jquery/jquery-1.4.3.min.js"></script> 
7.   <script src="code.jquery/mobile/1.bile-1.0a1.min.js"></script> 
8. </head> 
9. <body> 
10. <div data-role="page" id="home"> 
11.   <div data-role="header"> 
12.     <h1>Ice Cream Order Form</h1> 
13.   </div> 
14.   <div data-role="content"> 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。