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