Jquery Model (一) 创建一个简单的 asp.net +mvc4 移动开发页面
Getting Started with jQuery Mobile
1.首先，创建一个简单的基本的模板
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 注解：meta viewport tag用于设置设备上屏幕上显示的宽度。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page"> 注解：data-role="page" data-role="header" data-role="content" 用来划定页面的界限，后两者放于page的内部，用于创建一个基本的页，这些data属性是整个jQuery Mobile使用HTML5的属性转化为加强和风格的部件的基本标记。
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
2.添加你的内容
在此可以使用任何标准的 html元素和样式来展示你的页面。
3.制作一个listview
<ul data-role="listview" data-inset="true" data-filter="true"> 注释： listviews有很多种样式，通过“data-inset="true"”制作一个类似插图模块的列表，并添加“data-filter="true"”时期列表可以被动态查询。
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
3.添加一个滑块（Add a slider）这里是新的HTML5输入类型范围滑块，没有data-role需要。务必包裹在一个表单元素，这些始终正确关联到每一个表单元素的标签。
<form>
<label for="slider-0">Input slider:</label>
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
</form>
4.制作一个button
<a href="#" data-role="button" data-icon="star">Star button</a>
data-icon：设置图标；
data-iconpos：设置button的位置
使用主题色板：
<a href="#" data-role="button" data-icon="star" data-theme="a">Button</a>
jQuery的移动有一个强大的，支持多达26套的工具栏，内容和按钮的颜色，称为“斯沃琪”的主题框架。只需添加此页面上的任何部件：数据主题的“e”属性页，标题，列表，滑块输入，或按钮，把它发黄。尝试默认主题，从不同的色板A~E字母混合和匹配色板。
浙公网安备 33010602011771号