与Jquery Mobile的第一次亲密接触

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

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

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

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

页面切换效果么么哒;

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

Demo：

<!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>

与Jquery Mobile的第一次亲密接触的更多相关文章

第四章跨平台图像显示库——SDL 第一节与SDL第一次亲密接触
http://blog.csdn.net/visioncat/article/details/1596576 GCC for Win32 开发环境介绍(5) 第四章跨平台图像显示库——SDL 第一节 ...
多线程第一次亲密接触 CreateThread与_beginthreadex本质区别
本文将带领你与多线程作第一次亲密接触,并深入分析CreateThread与_beginthreadex的本质区别,相信阅读本文后你能轻松的使用多线程并能流畅准确的回答CreateThread与_beg ...
【阿里云产品公测】与云引擎ACE第一次亲密接触
阿里云用户:林哥神话公测当然是第一次了.这个第一次亲密接触,但话又说回来对ACE我一直都不是那感兴趣的,但是看到阿里介绍还是那般神奇,再加上200无代金券来更加给力.最后就申请了这次公测. 平时一直 ...
Linux就是这个范儿之第一次亲密接触(3)
原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责 1.4 返璞归真的命令行有一种说法,现代计算机不是靠电力驱动,而是靠“鼠标”.多少应用程序的界面需 ...
我和Python的第一次亲密接触 - 零基础入门学习Python001
我和Python的第一次亲密接触让编程改变世界 Change the world by program 小甲鱼经常说,学习一门编程语言就是要深入其中,要把编程语言想象为你的女朋友你的情人,这样你学习 ...
第一次亲密接触MSF
第一次亲密接触MSF Metasploit Framework介绍 Metasploit是一款开源安全漏洞检测工具,附带数百个已知的软件漏洞,并保持频繁更新.被安全社区冠以“可以黑掉整个宇宙”之名的强 ...
[OS] 多线程--第一次亲密接触CreateThread与_beginthreadex本质区别
转自:http://blog.csdn.net/morewindows/article/details/7421759 本文将带领你与多线程作第一次亲密接触,并深入分析CreateThread与_be ...
Linux认知之旅【01 与Linux第一次亲密接触】！
一.搜索LINUX,了解它的前世今生! linux很厉害,应用在很多方面,我知道有超算.IOT.树莓派. 而且好多开发人员都在用这个系统.linux作为服务器使用,常年不用重启,不宕机,很少受病毒影响 ...
Linux就是这个范儿之第一次亲密接触(2)
原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责 1.2 不一样的图形操作几乎所有Linux的新用户都会认为Linux的图形界面是相当的绚丽又多彩. ...

随机推荐

HDU 5067-Harry And Dig Machine（DFS）
Harry And Dig Machine Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
使用Ksoap2调用Web Service加入SoapHeader
关于这个问题,如果使用百度都是前篇一律的代码,好不容易上了google才找到完整的方法,这里讲所有的代码都贴出来与大家分享. 首先是.NET写的后台代码 /// <summary> /// ...
VCS仿真查看coverage
VCS仿真查看coverage Design compiler & simulate #!/bin/csh -f setenv NOVAS_HOME /EDASynopsys/verdi3-I ...
解决操作过快导致ajax异常的办法
//控制点击过快ajax异常 var state = true; function test() { if (state) { state = false; var val = accMul((uCo ...
java 位运算权限管控(转载)
这里笔者介绍一种很常用,也比较专业的权限控制思路.这里用java语言描述,其实都差不多的.要换成其他的语言主,自己转一下就可以了.为了方便起见,我们这里定义a^b为:a的b次方.这里,我们为每一个操作 ...
一步一步教你使用Git
一步一步教你使用Git 互联网给我们带来方便的同时,也时常让我们感到困惑.随便搜搜就出一大堆结果,然而总是有大量的重复和错误.小妖发出的内容,都是自己实测过的,有问题请留言. 现在,你已经安装了Git ...
[c#]asp.net开发微信公众平台(5)微信图文消息
上篇已经成功响应了关注事件,也实现了文本消息的发送,这篇开始图文消息处理, 微信中最常用的消息类型就是图文消息了,因为它图文并茂,最能表达信息. 图文消息在微信中的接口定义如下: <xml> ...
UVA 10037 贪心算法
题目链接:http://acm.hust.edu.cn/vjudge/contest/122829#problem/A 题目大意:N个人夜里过河,总共只有一盏灯,每次最多过两个人,然后需要有人将灯送回 ...
spi ssp
SSP(Synchronous Serial Port 同步串行口)某些微处理器所含有的一个通信模块(或支持的通信模式),用来和外围串行部件或其他微处理器进行通信,这些外围部件可以是串行E2PROM. ...
我和小美的撸码日记(2)之第一个基于MVC+Jqgrid的列表页面
一.前言 “尼玛哥,上周你教我改了下OA系统UI,黄总看了很满意呀.” “不错不错,看来小美进步很大,可以提前结束试用期,到时候加工资别忘了请我吃饭呀!” “尼玛哥,你有女朋友了吗?” “ ...

与Jquery Mobile的第一次亲密接触

与Jquery Mobile的第一次亲密接触的更多相关文章

随机推荐

热门专题