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的第一次亲密接触的更多相关文章

  1. 第四章 跨平台图像显示库——SDL 第一节 与SDL第一次亲密接触

    http://blog.csdn.net/visioncat/article/details/1596576 GCC for Win32 开发环境介绍(5) 第四章 跨平台图像显示库——SDL 第一节 ...

  2. 多线程第一次亲密接触 CreateThread与_beginthreadex本质区别

    本文将带领你与多线程作第一次亲密接触,并深入分析CreateThread与_beginthreadex的本质区别,相信阅读本文后你能轻松的使用多线程并能流畅准确的回答CreateThread与_beg ...

  3. 【阿里云产品公测】与云引擎ACE第一次亲密接触

    阿里云用户:林哥神话 公测当然是第一次了.这个第一次亲密接触,但话又说回来对ACE我一直都不是那感兴趣的,但是看到阿里介绍还是那般神奇,再加上200无代金券来更加给力.最后就申请了这次公测. 平时一直 ...

  4. Linux就是这个范儿之第一次亲密接触(3)

    原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责 1.4 返璞归真的命令行 有一种说法,现代计算机不是靠电力驱动,而是靠“鼠标”.多少应用程序的界面需 ...

  5. 我和Python的第一次亲密接触 - 零基础入门学习Python001

    我和Python的第一次亲密接触 让编程改变世界 Change the world by program 小甲鱼经常说,学习一门编程语言就是要深入其中,要把编程语言想象为你的女朋友你的情人,这样你学习 ...

  6. 第一次亲密接触MSF

    第一次亲密接触MSF Metasploit Framework介绍 Metasploit是一款开源安全漏洞检测工具,附带数百个已知的软件漏洞,并保持频繁更新.被安全社区冠以“可以黑掉整个宇宙”之名的强 ...

  7. [OS] 多线程--第一次亲密接触CreateThread与_beginthreadex本质区别

    转自:http://blog.csdn.net/morewindows/article/details/7421759 本文将带领你与多线程作第一次亲密接触,并深入分析CreateThread与_be ...

  8. Linux认知之旅【01 与Linux第一次亲密接触】！

    一.搜索LINUX,了解它的前世今生! linux很厉害,应用在很多方面,我知道有超算.IOT.树莓派. 而且好多开发人员都在用这个系统.linux作为服务器使用,常年不用重启,不宕机,很少受病毒影响 ...

  9. Linux就是这个范儿之第一次亲密接触(2)

    原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责 1.2 不一样的图形操作 几乎所有Linux的新用户都会认为Linux的图形界面是相当的绚丽又多彩. ...

随机推荐

  1. （3）选择元素——（15）总结（Summary）

    With the techniques that we have covered in this chapter, we should now be able to locate sets of el ...

  2. (各个公司面试原题)在线做了一套CC++综合測试题，也来測一下你的水平吧(二)

    刚才把最后的10道题又看了下.也发上来吧. 以下给出试题.和我对题目的一些理解 前10道题地址 (各个公司面试原题)在线做了一套CC++综合測试题.也来測一下你的水平吧(一) 11.设已经有A,B,C ...

  3. Tomcat全攻略

    内容: 一:简单介绍 二:安装及配置 三:应用 四:综述 參考资料 关于作者 相关内容: TCP/IP 介绍 TCP/IP 介绍 !== End Related dW Content Area --& ...

  4. 好看的Select下拉框是如何制造的

    现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它. CSS代 ...

  5. Android 基于Netty的消息推送方案之概念和工作原理(二)

    上一篇文章中我讲述了关于消息推送的方案以及一个基于Netty实现的一个简单的Hello World,为了更好的理解Hello World中的代码,今天我来讲解一下关于Netty中一些概念和工作原理的内 ...

  6. Linux操作系统分析__破解操作系统的奥秘

    学号:SA12226343  姓名:sunhongbo 一.操作系统工作的基础 存储程序计算机和堆栈(函数调用堆栈)机制以及中断机制是操作系统工作的基础. 现代计算机仍采用存储程序计算机的结构体系和工 ...

  7. （转） CS0234: 命名空间“System.Web.Mvc”中不存在类型或命名空间名称“Ajax”(是否缺少程序集引用?)

    从SVN上down下来的程序,编译报了一大堆的错,发现是缺少引用,但是明明引用了,后来打开引用,发现system.web.mvc这个引用打着叹号,如图, 后来重新引用了本机的system.web.mv ...

  8. HTML常见标签学习与笔记总结

    HTML其实就是把页面的数据封装并加上标签 表头<head> <title> 浏览器标题栏显示的内容 <base> 有href和target属性,href指定网页中 ...

  9. 关于vis标记

    原来写题目的时候对vis标记都是先memset在标记,今天看见一个只要每次对T值修改,然后看看等不等于T就可以了,真好!

  10. js动态给table添加行(tr)

    html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> < ...