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 学习之page、button、theme、panel、listview、controlgroup、navbar等（一）的更多相关文章

  1. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.10.Button 和 Autocomplete控件

    Button ,可以使用 <button> <input> <a>. <input> 中的不同类型,submit , radio , checkbox ...

  2. JQuery基础学习总结

    JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...

  3. Jquery moblie中的分栏布局

    大家好,很高兴又与大家见面了,今天我要给大家展示的是自己对jquery  moblie中网格布局的理解.可能不是尽善尽美,希望大家多多体谅! 在jquery moblie中有两种布局,一种是表格布局( ...

  4. Jquery重新学习之七[Ajax运用总结A]

    Jquery中Ajax的运用是另外一个重点,平时项目经常会用它进行一些异步操作:其核心是通过XMLHttpRequest对象以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而 ...

  5. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  6. jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

    今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...

  7. Jquery插件学习

    前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...

  8. jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)

    FireQuery is a Firebug extension for jQuery development jQuery Lint: enables you to automatically in ...

  9. jQuery Mobile 学习

    jQuery Mobile 学习系列 http://blog.csdn.net/bao990423420/article/details/13995021

随机推荐

  1. iOS 简单音乐播放器 界面搭建

    如图搭建一个音乐播放器界面,具备以下几个简单功能: 1,界面协调,整洁. 2,点击播放,控制进度条. 3.三收藏歌曲,点击收藏,心形收藏标志颜色加深. 4,左右按钮,切换歌曲图片和标题. 5,点击中间 ...

  2. Android碎片（Fragment）简述

    碎片(Fragment)是一种可以嵌入活动当中的UI片段,它能让程序更加合理和充分地利用大屏幕的空间,因此碎片在平板上的应用非常广泛. 你可以将碎片理解成一个迷你型的活动,水平同样可能包含布局,同样都 ...

  3. Ubuntu 虚拟机空间不足增加空间笔记

    一开始给虚拟机加空间以为只是需要在虚拟机设置里面添加就行,后面发现还得重新在虚拟机内部增加. 链接: http://pan.baidu.com/s/1c2uVcCo 密码: xid8 这只是第一步,共 ...

  4. ZUI前段框架简介

    一.说明 基于Bootstrap定制 ZUI继承了Bootstrap 3中的大部分基础内容,但出于与Bootstrap不同的目的,一些组件都进行了定制和修改.这些变化包括: 移除了部分插件的限制,增加 ...

  5. CSS——display和float

    1.display 属性规定元素应该生成的框的类型. 值 描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素 ...

  6. CMake入门以及学习笔记

    使用cef3替代chromium内核开发产品过程中,第一次接触到系统构建,使用了最常见的CMake.CMake虽然在构建系统中用的比较多,但是使用到的程序员还是很少的.现在在国内能找到的相关资料和博客 ...

  7. Slave SQL: Error 'Incorrect string value ... Error_code: 1366

    背景: 主从环境一样,字符集是utf8. Slave复制报错,平时复制都正常也没有出现过问题,今天突然报错: :: :: :: :: Error_code: :: perror 1366 MySQL ...

  8. FFmpeg-20160413-snapshot-bin

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 F ...

  9. zsh 通信脚本

    server #!/bin/zsh #zsh TCP server script zmodload zsh/net/tcp #listening port ztcp -l #This is a fil ...

  10. codeforces 515A.Drazil and Date 解题报告

    题目链接:http://codeforces.com/problemset/problem/515/A 题目意思:问能否从 (0, 0) 出发,恰好走 s 步,到达该位置(a, b). 首先容易知道, ...