jquery mobile 移动web(1)

轻量级框架jQuery Mobile 　　所需文件

	　　　　<link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mobile-1.1.2.css"/>
    	　　　　<script type="text/javascript" src="jquery.mobile-1.1.2/jquery-1.6.4.js"></script>     

jquery 应放在 mobile 上面。 　　　　<script type="text/javascript" src="jquery.mobile-1.1.2/jquery.mobile-1.1.2.js"></script> 　　dataset自定义属性，要求前缀必须带有“data-”字符，“data-”后面允许使用任何值，它允许开发人员将这类属性添加到HTML标签中， 　　充当元素的私有数据存储区域，不允许元素的原有功能，也不会影响布局。 jQuery Mobile 使用的自定义属性。 　　1.data-role 　　　　定义元素在页面中的功能角色，该属性允许定义不同的组件，元素及页面视图。 　　2.data-title 　　　　定义jQueru Mobile 视图页面的标题。 　　3.data-transition 　　　　定义视图切换的动画效果。 　　4.data-rel 　　　　定义具有浮动层效果的视图。 　　5.data-theme 　　　　指定元素或组件内的主体样式风格。 　　6.data-icon 　　　　在元素内增加一个icon 小图标。 　　7.data-iconpos 　　　　定义icon小图标的位置。 　　8.data-inline 　　　　指定按钮根据内容自适应其长度。 　　9.data-type 　　　　定义分组按钮按水平或垂直方向排列。 　　10.data-rel 　　　　定义具有特定功能的元素属性， 例如返回按钮 data-rel="back". 　　11.data-add-back-btn 　　　　指定视图页面自动在页眉左侧添加返回按钮。 　　12.data-back-btn-text 　　　　指定由试图页面自动创建的返回按钮的文本内容。 　　13.data-position 　　　　该属性的作用是实现在滑动屏幕时工具栏的显示或隐藏状态。 　　14.data-fullscreen 　　　　用于自定全屏视图页面。 　　15.data-native-menu 　　　　指定下拉选择功能采用平台内置的选择器。 　　16.data-placeholder 　　　　设置下拉选择功能的占位符。 　　17.data-inset 　　　　实现内嵌列表的功能。 　　18.data-split-icon 　　　　设置列表右侧的图标。 　　19.data-split-theme 　　　　设置列表右侧图片的主题样式风格。 　　20.data-filter 　　　　开启列表过滤搜索功能。 　　简单配置一个页面

  	　　<section data-role="page">
	    　　　　<header data-role="header">页头</header>
	    　　　　<article data-role="content">内容</article>
	    　　　　<footer data-role="footer">页脚</footer>
	　　  </section>

改变页面标题的视图 　　data-title="标题" 　　视觉切换动画。 data-transition="slide" slide 左右切换 slideup 从下到上 slidedown 从上到下 pop 以弹出的 fade 渐变褪色 flip 翻转飞出。

      　　<section data-role="page" id="firstView">
       　　　　<header data-role="header">第1个视图</header>
       　　　　<article data-role="content"><a href="#secondView" data-transition="flip">切换第2个视图</a></article>
       　　　　<footer data-role="footer">页脚</footer>
   　　</section>
   　　<section data-role="page" id="secondView">
       　　　　<header data-role="header">第2个视图</header>
       　　　　<article data-role="content"><a href="#firstView" data-transition="flip">切换第1个视图</a></article>
       　　　　<footer data-role="footer">页脚</footer>
   　　</section>

　　页面主题：data-theme = "a"