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. oracle触发器实例

    8.1 触发器类型 8.1.1 DML触发器 8.1.2 替代触发器 8.1.3 系统触发器 8.2 创建触发器 8.2.1 触发器触发次序 8.2.2 创建DML触发器 8.2.3 创建替代(INS ...

  2. openwrt上opkg更新报错&quot;opkg_download: Failed to download .............&quot;

    開始搞op的时候,看到op居然能够直接安装一些插件.激动坏了,由于这东西对嵌入式的小系统来说简直不敢想,可是op就支持了,就是这么任性. 好不easy编译了固件.依照网上的教程.telnet进去.首先 ...

  3. Java基础知识强化56：经典排序之快速排序（QuickSort）

    1. 快速排序的原理: 快速排序(Quicksort)是对冒泡排序的一种改进. 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其 ...

  4. rpm软件包类型

    rpm软件包 在linux世界里有两种流行的包管理方式,分别是redhat系的rpm和debian系的deb.其中rpm是RedHat Package Manager(RedHat软件包管理工具)的简 ...

  5. Python - SQLAlchemy之连表操作

    ORM的两种创建方式 数据库优先:指的是先创建数据库,包括表和字段的建立,然后根据数据库生成ORM的代码,它是先创建数据库,再创建相关程序代码 代码优先:就是先写代码,然后根据代码去生成数据库结构. ...

  6. Oracle 分区表中索引失效

    当对分区表进行 一些操作时,会造成索引失效. 当有truncate/drop/exchange 操作分区  时全局索引 会失效. exchange 的临时表没有索引,或者有索引,没有用includin ...

  7. C#多线程实践——线程同步

    下面的表格列展了.NET对协调或同步线程动作的可用的工具:                       简易阻止方法 构成 目的 Sleep 阻止给定的时间周期 Join 等待另一个线程完成      ...

  8. js动态加载html,加载后的页面元素某些事件失效的解决方案

    用 live 来绑定 例如: $("#items li .addToCartimg").live("click",function(){ $('.popDeta ...

  9. java下管道流 PipedOutputStream 与PipedInputStream

    package cn.stat.p2.demo; import java.io.IOException; import java.io.PipedInputStream; import java.io ...

  10. 初次窥见智能指针auto_ptr和shared_ptr

    #include <memory>//shared_ptr要用的头文件 using namespace std; class A //测试auto_ptr和shared_ptr的delet ...