与Jquery Mobile的第一次亲密接触

Jquery Mobile闻名已久,今天终于有亲密接触的机会。

通过动手写的demo,对它有了一个基本的认识:

 

自带的UI组件用起来简洁,方便;对旧版本的浏览器或移动设备能做到很好的优雅降级,而不影响页面性能;

基于AJAX的数据处理给人很好的用户体验:快速,高效,交互友好;

页面切换效果么么哒;

data-*属性的运用也十分便捷,易用,且功能强大。

 

Demo:

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.theme.css">
 
    <style type="text/css">
    
    [data-role="footer"],[data-role="header"]{
        text-align: center;
    }
      
 
    </style>
    }
</head>
<body>
 
<div data-role="page">
<!--data-role="page" 告诉jquery mobile要把这个内容处理为一个完整的页面-->
 
<!--header-->
<div data-role="header" data-theme="b" data-position="fixed">
 
<!--返回按钮,data-theme="b" 增强显示效果-->
<a href="#" data-rel="back" data-icon="back" data-role="button" >Back</a>
<h1>Jquery Mobile</h1>
<!--添加按钮-->
<a href="#"  data-icon="plus" data-role="button" data-theme="b" class="ui-btn-right" >Back</a>
</div>
 
<!--content-->
 
<div data-role="content">
     
    <ul data-role="listview" data-inset="true" data-filter="true">
  
    <!--
     data-filter="true":为列表增加过滤器;
     data-role="listview"告诉jquery mobile把它处理为一个列表视图
    -->
 
    <li data-role="list-divider"><h3>web skills</h3></li>
 
    <li><a href="#">
    <img src="http://pic1.zhimg.com/bdc11fd74_l.jpg" alt="bdc11fd74_l">
    <!--只要添加图片,jquery mobile自身效果会帮你做其余的事情-->
    <h3>jquery</h3></a>
    </li>
 
    <li><a href="#"><img src="http://pic1.zhimg.com/bdc11fd74_l.jpg" alt="bdc11fd74_l">
    <h3>css</h3></a>
    </li>
 
    <li><a href="#"><img src="http://pic1.zhimg.com/bdc11fd74_l.jpg" alt="bdc11fd74_l">
    <h3>html</h3></a>
    </li>
 
    <li><a href="#"><img src="http://pic1.zhimg.com/bdc11fd74_l.jpg" alt="bdc11fd74_l">
    <h3>javascript</h3></a>
    </li>
 
 
     <li data-role="list-divider"><h3>coder</h3></li>
    <li>
    <a href="#"><img src="http://pic1.zhimg.com/bdc11fd74_l.jpg" alt="bdc11fd74_l">
    <h3>kevin zhang</h3></a>
    </li>
    </ul>
 
</div>
 
<!--构建HTML5表单-->
 
<div data-role="content">
    <form id="tartanator_form">
        <ul data-role="listview" id="tartanator_form_list" data-inset="true">
        <li data-role="list-divider">Tell us your color</li>
        <li data-role="fieldcontain">
        <!--
        data-role="fieldcontain":增强表单时要把这个元素包含的域及其标签组合起来,此处包含label
        -->
            <label for="userName">name</label>
            <input type="text" name="name" id="userName" placeholder="name"/>
        </li>
        <li data-role="fieldcontain">
        <label for="userInfo">userInfo</label>
        <textarea cols="40" rows="8" name="userInfo" id="userInfo" placehoder="userInfo"></textarea>
        </li>
 
        <li data-role="list-divider">Build your colors</li>
 
        <li data-role="fieldcontain">
        <label  class="select" for="userColor">userColor</label>
        <select name="userColor" id="userColor">
           <option> 选取一种颜色</option>
            <option value="red">red</option>
            <option value="green">green</option>
            <option value="blue">blue</option>
        </select>
        </li>
 
        <li data-role="fieldcontain">
        <label  class="select" for="userColor">colorSize</label>
        <input type="range" min="2" step="2" max="72" autocomplete="off" value="2">          
        </li>
 
 
        <li><button data-theme="b">submit</button></li>
        </ul>
  
    </form>
</div>
 
 
 
 
<!--footer-->
 
<div data-role="footer" data-position="fixed" data-theme="b">
<!--data-position="fixed" 让footer永远固定在页面最下方-->
<!--构造导航栏:data-role:navbar-->
 
<div data-role="navbar" >
 
<ul>
<li><a href="#" data-icon="info" class="ui-btn-active">nav a</a></li>
<li><a href="#" data-icon="star">nav b</a></li>
<li><a href="#" data-icon="grid">nav c</a></li>
</ul>
 
</div>
 
</div>
 
</div>
 
 
<!--js-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
</body>
</html>

  

 

posted @ 2015-04-19 19:33  Me-Kevin  阅读(294)  评论(0)    收藏  举报
编辑推荐:
· C# 代码如何影响 CPU 缓存速度?
· 智能桌面机器人:使用 .NET 为树莓派开发 Wifi 配网功能
· C# 模式匹配全解:原理、用法与易错点
· 记一次SSD性能瓶颈排查之路——寿命与性能之间的取舍
· 理解 .NET 结构体字段的内存布局
阅读排行:
· 【故障公告】6月9日 17:24~17:34 再次遭遇攻击(晚上遭遇更疯狂的攻击)
· 3 个超火的开源项目「GitHub 热点速览」
· C#-Visual Studio工具使用实践
· 时隔半年,拾笔分享:来自一个大龄程序员的迷茫自问
· [原创]《C#高级GDI+实战:从零开发一个流程图》第02章:画一个矩形,能拖动!
点击右上角即可分享
微信分享提示