1.jQTouch
jQTouch与jQuery Moblie十分相似，也是一个jQuery插件，同样也支持HTML页面标签驱动，实现移动设备视图切换效果。不同的是它是专为WebKit内核的浏览器打造的，可以借助该浏览器的专有功能对页面进行渲染；此外，开发时所需的代码量更少。如果开发的项目中，目标用户群都使用WebKit内核的浏览器，可以考虑此框架。
2.Sencha Touch
Sencha Touch是一套基于ExtJS开发的插件库。也是针对于WebKit内核的浏览器打造的，不同的是它的开发语言不是基于HTML标签，而是类似于客户端的MVC风格编写的JS代码，相对来说，学习周期较长。
看代码：
_Layout.cshtml
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">@*网站页面的自适应，宽度为驱动设备的宽度*@
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
@Styles.Render("~/Content/mobileCss", "~/Content/css")@*<link href="~/Content/jquery.mobile-1.4.2.css" rel="stylesheet" />*@
@Scripts.Render("~/bundles/modernizr")@*<script src="~/Scripts/modernizr-2.6.2.js"></script>*@
@*modernizr就是为HTML5而生的——它是一个检测浏览器对HTML5和CSS3特性支持的JS库，通过检测你的浏览器对html5/css3的支持情况，返回特定的样式名称，从而可以针对不同的浏览器写出不同的样式。*@
</head>
<body>
@RenderBody()
@Scripts.Render("~/bundles/jquery")@*<script src="~/Scripts/jquery-1.8.2.js"></script>*@
<script>
//该事件在ready()之前执行,因为mobileinit事件是在加载后马上触发，所以你需要在Jquery Mobile加载之前绑定你的事件处理函数，
//必须放在jQuery和jQuery Moblie之间
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = true;
});
</script>
@Scripts.Render("~/bundles/jquerymobile")@*<script src="~/Scripts/jquery.mobile-1.4.2.js"></script>*@
@RenderSection("scripts", required: false)
</body>
</html>
Index.cshtml
<section data-role="page" id="foo">
<header data-role="header" data-theme="b" data-position="fixed" data-fullscreen="true">
@*data-position="fixed" 让头部和尾部固定在浏览器顶部
data-fullscreen="true" 不占位
*@
<h1>Page Title</h1>
</header>
<div role="main" class="ui-content">
<p>Page content goes here.</p>
<p><a href="#bar" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-delete ui-btn-inline" data-transition="slide">go to bar</a>@*跳转到id=”bar“页面*@
<a href="#bar" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-delete ui-btn-inline" data-transition="slide">go to bar</a>
<a href="#bar" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-inline ui-btn-icon-left" data-transition="slide" data-mini="true">go to bar</a>
</p>
@* ui-btn :按钮样式
ui-shadow:按钮加上阴影
ui-corner-all:按钮圆角
data-transition="slide": 跳转的页面效果
ui-btn-icon-notext 让按钮没有文字
ui-icon-delete 出现删除的图片
ui-btn-inline 行内不占一行
ui-btn-icon-left 让图标出现在文字的左边
*@
<div data-role="controlgroup" data-mini="true" data-type="horizontal">
<a href="#" class="ui-btn ui-corner-all">no icon</a>
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">left</a>
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">right</a>
</div>
@* data-role="controlgroup" 控件组
data-type="horizontal" 控件排列方式
*@
<a href="#leftpanel3" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-mini">Overlay panel</a>
<div data-role="collapsible">
<h4>Heading</h4>
<p>I‘m the collapsible content.By default I‘m closed,but you can click the header to open me.</p>
</div>
<ul data-role="listview" data-filter="true" data-filter-placeholder="请输入" data-inset="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>
<div>
</div>
</div>
<footer data-role="footer" data-theme="c" data-position="fixed">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" class="ui-btn-active" data-icon="home">One</a></li>
<li><a href="#" data-icon="gear">two</a></li>
<li><a href="#" data-icon="back">Three</a></li>
</ul>
</div>
@*
data-role="navbar" 导航
data-iconpos="left" 所有的导航图标都向左
*@
</footer>
<div data-role="panel" id="leftpanel3" data-position="left" data-display="overlay" data-theme="a">
<h3>Left Panel: Overlay</h3>
<p>This panel is positioned on the left with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
<a href="#demo-links" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a>
</div><!-- /leftpanel3 -->
</section>
<!-- Start of second page -->
<section data-role="page" id="bar">
<header data-role="header">
<h1>Bar</h1>
</header>
<!-- /header -->
<div role="main" class="ui-content">
<p>I‘m the second in the source order so I‘m hidden when the page loads. I‘m just shown if a link that references my id is beeing clicked.</p>
<p><a href="#foo" >Back to foo</a></p>@*跳转到id=”foo“页面*@
<p><a href="#" data-rel="back" >Back to foo</a></p>@*跳转到id=”foo“页面*@
</div>
<!-- /content -->
<footer data-role="footer">
<h4>Page Footer</h4>
</footer>
<!-- /footer -->
</section>
<!-- /page -->
jQuery Moblie 学习（一）
时间： 2024-11-15 00:40:32