jquery mobile 入门级实战1

第一步：使用CDN接入jquery mobile

	CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。.

使用 jQuery 内核, 你不需要在电脑上安装任何东西; 你仅仅需要在你的网页中加载以下层叠样式 (.css) 和 JavaScript 库 (.js) 就能够使用 jQuery Mobile:

jQuery Mobile CDN:

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

然后：今天我们来使用JQuery Mobile来开发一个web mobile app。

　　要实现的如下所示效果：

　　开始：

　　第一步：添加JS包等引用，直接去官网下载最新的JQuery Mobile 包，http://jquerymobile.com/；或者直接从CDN引用JQuery Mobile。

　　解压压缩包：拷贝 jquery.min.js、jquery.mobile-1.4.5.css、jquery.mobile-1.4.5.js 文件到项目中。

　　第二步：新建一个 html 页面。添加上面三个文件的引用。工程基本结构如下：

　　第三步：写出基本页面模板。

    <!-- Begin PageSingle -->

    <div data-role="page" id="pageSingle" >

        <div data-role="header" data-theme="b">

        <h1>单身管理</h1>

        <div data-role="navbar" >

            <ul>

                <li><a href="#" data-transition="fade"  data-theme="c" class="ui-btn-active ui-state-persist" >单身</a></li>

                <li><a href="#pageUnSingle" data-transition="fade"  data-theme="c" >非单身</a></li>

            </ul>

        </div>

        </div>

        <div data-role="content">

            <ul data-role="listview"  id="singleList" data-filter="true" data-filter-placeholder="请输入姓名或者年龄">

                <!-- 动态 显示单身列表 -->

            </ul>

        </div>

        <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">

        <div data-role="navbar">

            <ul>

                <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist" >单身管理</a></li>

                <li><a href="#pageSystem" data-transition="slide" data-icon="star" >系统消息</a></li>

                <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系统设置</a></li>

            </ul>

        </div>

        </div>

    </div>

    <!-- End PageSingle -->

    <!-- Begin PageUnSingle -->

    <div data-role="page" id="pageUnSingle">

        <div data-role="header"  data-theme="b" >

        <h1>单身管理</h1>

        <div data-role="navbar">

            <ul>

                <li><a href="#pageSingle" data-transition="fade" data-theme="c" >单身</a></li>

                <li><a href="#" data-transition="fade" class="ui-btn-active ui-state-persist"  data-theme="c" >非单身</a></li>

            </ul>

        </div>

        </div>

        <div data-role="content">

            <ul  id="unsingleList" data-role="listview" data-filter="true" data-filter-placeholder="请输入姓名或者年龄">

                <!-- 动态 显示非单身列表 -->

            </ul>

        </div>

        <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">

        <div data-role="navbar">

            <ul>

                <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist">单身管理</a></li>

                <li><a href="#pageSystem" data-transition="slide" data-icon="star">系统消息</a></li>

                <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系统设置</a></li>

            </ul>

        </div>

        </div>

    </div>

    <!--- End PageUnSingle-->

　　细节讲解：

　　1. navbar 的 li 选项卡点击时会高亮一下，如果想一直高亮着，给 li 添加样式 class="ui-btn-active ui-state-persist"，这个样式挺好用的。

　　2. footer 如果添加了 navbar ，请给这些 footer 们，添加相同 data-id="<id>" 属性。这样页面切换的时候，footer 部分就不会跟页面一起过渡了。

　　3. footer 想让它固定在底部，不随页面内容上下滚动，可以给它添加 data-position="fixed" 属性。这样 footer 就会一直固定在底部了。

　　第四步：加载数据。Ajax的方式

    <script type="text/javascript">

        //AJAX服务调用地址

        var server_url = "http://192.101.109.71:80/TestWeb/";

        /** 页面第一次初始化的时候加载列表 **/

        $(document).on("pageinit", "#pageSingle", function () {

            loadSingleList();

        });

        $(document).on("pageinit", "#pageUnSingle", function () {

            loadUnSingleList();

        });

        /** 每次页面显示时，重新加载列表  **/

        $(document).on("pageshow", "#pageSingle", function () {

            loadSingleList();

        });

        $(document).on("pageshow", "#pageUnSingle", function () {

            loadUnSingleList();

        });

        //单身列表页面

        function loadSingleList() {

            $.post(server_url + "handler/AjaxHandler.ashx", { op: "getSingleStuInfo" }, function (data, textStatus) {

                $('#singleList li').remove();

                var json = eval(data);

                for (var i = 0; i < json.length; i++) {

                    $("#singleList").append('<li><a href="#"><h1>姓名：' + json[i].UserName + "</h1><p>年龄：" + json[i].Age + "</p></a></li>");

                }

                $("#singleList").listview('refresh');

            });

        }

        //非单身列表页面

        function loadUnSingleList() {

            $.post(server_url + "handler/AjaxHandler.ashx", { op: "getUnSingleStuInfo" }, function (data, textStatus) {

                $('#unsingleList li').remove();

                var json = eval(data);

                for (var i = 0; i < json.length; i++) {

                    $("#unsingleList").append('<li><a href="#"><h1>姓名：' + json[i].UserName + "</h1><p>年龄：" + json[i].Age + "</p></a></li>");

                }

                $("#unsingleList").listview('refresh');

            });

        }

    </script>

　　细节讲解：

　　1. 服务端提供的接口为 NET 的一般处理程序，大家可以随意，不一定用 NET 的，啥都可以，只要是接口就行。

　　2. pageinit 在页面初始化的时候（页面第一次打开的时候），请求加载服务端数据。pageshow 在每次页面显示的时候（每次页面切换的时候），请求加载服务端数据

　　3. 每次要载数据时，记得要先要列表清空一下 remove()，要不然列表内容会一直递增。大家可以去掉试试。

　　4. 列表加载完后，记得 listview('refresh') 刷新一下（只要是动态加载的数据，大家都要注意一下。动态加载的数据是没有JQ的样式的，JQ不会给它们渲染），这样 JQueryMobile 的列表样式才会重新渲染一下。大家可以不刷新试试。

第五步：点击选项卡，显示详细页面，并显示学生信息二维码 http://www.codesky.net/article/201308/182043.html 二维码 js 文件下载。

html布局如下：

    <!-- Begin PageSingle -->

    <div data-role="page" id="pageSingle" >

        <div data-role="header" data-theme="b">

        <h1>单身管理</h1>

        <div data-role="navbar" >

            <ul>

                <li><a href="#" data-transition="fade"  data-theme="c" class="ui-btn-active ui-state-persist" >单身</a></li>

                <li><a href="#pageUnSingle" data-transition="fade"  data-theme="c" >非单身</a></li>

            </ul>

        </div>

        </div>

        <div data-role="content">

            <ul data-role="listview"  id="singleList" data-filter="true" data-filter-placeholder="请输入姓名或者年龄">

                <!-- 动态 显示单身列表 -->

            </ul>

        </div>

        <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">

        <div data-role="navbar">

            <ul>

                <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist" >单身管理</a></li>

                <li><a href="#pageSystem" data-transition="slide" data-icon="star" >系统消息</a></li>

                <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系统设置</a></li>

            </ul>

        </div>

        </div>

    </div>

    <!-- End PageSingle -->

    <!-- Begin PageUnSingle -->

    <div data-role="page" id="pageUnSingle">

        <div data-role="header"  data-theme="b" >

        <h1>单身管理</h1>

        <div data-role="navbar">

            <ul>

                <li><a href="#pageSingle" data-transition="fade" data-theme="c" >单身</a></li>

                <li><a href="#" data-transition="fade" class="ui-btn-active ui-state-persist"  data-theme="c" >非单身</a></li>

            </ul>

        </div>

        </div>

        <div data-role="content">

            <ul  id="unsingleList" data-role="listview" data-filter="true" data-filter-placeholder="请输入姓名或者年龄">

                <!-- 动态 显示非单身列表 -->

            </ul>

        </div>

        <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">

        <div data-role="navbar">

            <ul>

                <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist">单身管理</a></li>

                <li><a href="#pageSystem" data-transition="slide" data-icon="star">系统消息</a></li>

                <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系统设置</a></li>

            </ul>

        </div>

        </div>

    </div>

    <!--- End PageUnSingle-->

    <!-- Begin PageStuInfo -->

    <div data-role="page" id="pageStuInfo">

        <div data-role="header" data-theme="b">

            <a href="#" data-role="button" data-rel="back" data-icon="back">返回</a>

            <h1>学生信息</h1>

        </div>

        <div data-role="content">

            <div data-role="fieldcontainer">

                <label id="lbUserName"></label>

                <label id="lbAge"></label>

                <div id="code"></div>

            </div>

        </div>

       </div>

    <!-- End PageStuInfo -->

  JS 代码如下：

    <link rel="Stylesheet" href="src/jquery.mobile-1.4.5.css" />

    <script type="text/javascript" src="src/jquery.js"></script>

    <script type="text/javascript" src="src/jquery.qrcode.min.js"></script>

    <script type="text/javascript">

        //AJAX服务调用地址

        var server_url = "http://192.101.109.71:80/TestWeb/";

        /** 页面第一次初始化的时候加载列表 **/

        $(document).on("pageinit", "#pageSingle", function () {

            loadSingleList();

        });

        $(document).on("pageinit", "#pageUnSingle", function () {

            loadUnSingleList();

        });

        /** 每次页面显示时，重新加载列表  **/

        $(document).on("pageshow", "#pageSingle", function () {

            loadSingleList();

        });

        $(document).on("pageshow", "#pageUnSingle", function () {

            loadUnSingleList();

        });

        //单身列表页面

        function loadSingleList() {

            $.post(server_url + "handler/AjaxHandler.ashx", { op: "getSingleStuInfo" }, function (data, textStatus) {

                $('#singleList li').remove();

                var json = eval(data);

                for (var i = 0; i < json.length; i++) {

                    $("#singleList").append('<li><a href="#" onclick="viewStuInfo(' + json[i].StudentID +')"><h1>姓名：' + json[i].UserName + "</h1><p>年龄：" + json[i].Age + "</p></a></li>");

                }

                $("#singleList").listview('refresh');

            });

        }

        //非单身列表页面

        function loadUnSingleList() {

            $.post(server_url + "handler/AjaxHandler.ashx", { op: "getUnSingleStuInfo" }, function (data, textStatus) {

                $('#unsingleList li').remove();

                var json = eval(data);

                for (var i = 0; i < json.length; i++) {

                    $("#unsingleList").append('<li><a href="#" onclick="viewStuInfo(' + json[i].StudentID +')"><h1>姓名：' + json[i].UserName + "</h1><p>年龄：" + json[i].Age + "</p></a></li>");

                }

                $("#unsingleList").listview('refresh');

            });

        }

        /** 查看学生信息 **/

        function viewStuInfo(studentid){

            $.post(server_url + "handler/AjaxHandler.ashx", { op: "getStuInfo", studentid: studentid }, function (data, textStatus) {

                var json = eval('(' + data + ')');

                $("#lbUserName").html("姓名：" + json.UserName);

                $("#lbAge").html("年龄：" + json.Age);

                $("#code").html("");

                //生成二维码

                $("#code").qrcode({

                    render: "table", //table方式

                    width: 200, //宽度

                    height: 200, //高度

                    text: json.UserName //任意内容

                });

                $.mobile.changePage("#pageStuInfo", {

                    transition:"slide"

                });

            });

        }

    </script>

    <script type="text/javascript" src="src/jquery.mobile-1.4.5.js"></script>

　　细节讲解：

　　1. 页面添加返回按钮，两种方法：a 标签 + data-rel="back" data-icon="back" 或者 header 标签 + data-add-back-btn="true" data-back-btn-text="返回"。

　　2. 二维码，直接下载 jquery.qrcode.min.js 包，添加引用，然后使用 qrcode 方法，看看例子就会明白的，很简单。

　　结束语：好的，今天主要是介绍下使用 JQueyMobile 来开发一些基本的东西，挺简单的，下次会结合 phonegap cordova 来开发。谢谢。

jquery mobile 入门级实战1的更多相关文章

【原创】小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载五（给按钮加图标）
在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: <divdata-role="foote ...
小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）
作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...
jquery Mobile应用第2课《构建跨平台APP：jQuery Mobile移动应用实战》连载二（简单的QWER键盘）
在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...
jqueryMobile应用第一课《构建跨平台APP：jQuery Mobile移动应用实战》连载一（Hello World）
有人说每个程序员都曾经有过改变世界的梦想,笔者认为,这与程序员年轻时编写的第一个程序有着莫大的关系.简简单单的一句“hello world”让年轻的心开始相信梦想,用一种低调的壮志凌云向世界展示自己的 ...
白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》串行4（场景变化）
作为一个真正的利用价格值应用,首先,你应该至少有两页,通过切换页面来实现很多其他互动.比如手机人人网,首先,打开后进入登录页面,将有登录后,新的东西.然后拉左侧面板.你可以看到相册.私人信息.像其他应 ...
【课程分享】ASP.NET MVC5&微信公众平台整合开发实战(响应式布局、JQuery Mobile,Windows Azure、微信核心开发)
对这个课程有兴趣的,能够联系我QQ2748165793 基础知识储备 ASP.NET MVC 5基础(6讲) 第一讲-初识ASP.NET MVC并搭建整合开发环境第二讲-深入MVC开发模式第三讲- ...
白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连续7-电话问卷调查
[例7-3 文本编辑框创建一个简单的调查问卷] 01 <!DOCTYPEhtml> 02 <html> 03 <head> 04 ...
【初探移动前端开发05】jQuery Mobile (整合版)
前言为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...
【初探移动前端开发05】jQuery Mobile (下)
前言继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...

随机推荐

加载为应用程序池‘DefaultAppPool'提供服务的进程失败，应用程序池被禁用【解决方法】
iis应用程序池不能启动2008年03月13日星期四 15:29iis应用程序池不能启动.WINDOWS2003 ENT SERVER(64位)环境下(测试过32位系统一样操作无此问题),当打开“应 ...
ios 异步多线程获取数据
简介 iOS有三种多线程编程的技术,分别是: (一)NSThread (二)Cocoa NSOperation (三)GCD(全称:Grand Central Dispatch) 这三种编程方式 ...
C++文件
参考: C++文件读写详解(ofstream,ifstream,fstream):http://blog.csdn.net/kingstar158/article/details/6859379 fs ...
ThinkPHP框架一
1.1 框架的概念框架其实就是可重用代码的集合,框架的代码是框架架构的代码,不是业务逻辑代码,框架代码保护类.方法.函数等等,框架代码按照一定的规则组合起来就形成了框架. 1.2 不使用框架开发的时 ...
PHP ReflectionClass
<?php /** * @desc test reflectionclass * @author songweiqing * @create_time 2015-01-7 * */ class ...
shell脚本分类
shell脚本分为三类:登录脚本.交互式脚本.非交互式脚本一. 登录脚本类似于windows下的计算机设置中的登录脚本和账户设置下的登录脚本的合集(我是这么理解的哈). 其配置文件的关键词为pref ...
Django学习(五) 定义视图以及页面模板
请求解析一般都是通过请求的request获取一定参数,然后根据参数做一定业务逻辑判断,这其中可能包括查询数据库,然后将需要返回的数据封装成一个HttpResponse返回. 代码如下: 这是一个简单的 ...
Java注释模板设置详解
设置注释模板的入口: Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元 ...
jdbc 通过rs.getString()获取数据库中的时间字段问题
例如在mysql中的一张表中存在一个字段opr_time为datetime类型, 在JDBC 中通过rs.getString("opr_time");来获取使会在日期后面添加&qu ...
WinForm 鼠标进入移开窗体事件，因子控件导致的误触发
/// <summary> /// 重写OnControlAdded方法,为每个子控件添加MouseLeave事件 /// </summary> /// <param n ...

jquery mobile 入门级实战1

jQuery Mobile CDN:

jquery mobile 入门级实战1的更多相关文章

随机推荐

热门专题