轻松学会Jquery Moible到成型手机App

大家好，给大家带来Jquery Moible Web App的文章。

博主通过简单的一个完整小案例来讲述制作Web App中遇到的问题以及制作过程。

首先，去官网将Jquery Mobile所需要的引用文件下载好。这里是所需要引用的JS和CSS文件。

博主先讲明博主在制作过程中才开始想知道大概要做个什么，大家跟着我的思路走吧。

废话不多说，兴趣匆匆的打开VS2012新建了一个Asp.net Web项目。导入相关JS和CSS文件，接着

新建Html页面，引用他们。

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="Scripts/js/jquery-1.7.1.min.js"></script>
    <script src="Scripts/js/jquery.mobile-1.4.5.min.js"></script>
    <link href="Scripts/css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <title></title>
</head>
<body>
</body>
</html>

因为考虑到后期要使用Phonegap来打包，所以整个实现过程只考虑到在手机上的效果。

在 <head> 下面的设置相关参数。因为英文不好，很多参数不知道意思，故此贴上相关概念。

 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/> 
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

接下来，想象下原生APP几乎都是侧边栏，导航栏然后list数据显示,各种各样漂亮动画。有不同的页面，但是几乎都是

和服务器通过json或者xml交互数，或者使用本地数据来供页面展示。

完整的页面表单:

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="Scripts/js/jquery-1.7.1.min.js"></script>
    <script src="Scripts/js/jquery.mobile-1.4.5.min.js"></script>
    <link href="Scripts/css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <div data-role="page"><br/><br/>
        <div data-role="header">
            <a href="index.html" data-ajax="false">返回首页</a>
            <h1>登录页面</h1>
        </div>
        <!-- /header -->
        <div role="main" class="ui-content">
            <form id="form">
                <div id="notification"></div>
                <input name="userid" id="userid" value="" type="text" placeholder="请输入用户名">

                <input name="password" id="password" value="" autocomplete="off" type="password" placeholder="请输入密码">

                <button class="ui-shadow ui-btn ui-corner-all" type="button" id="denglu">登录</button>

                <div style="text-align: center;"><a href="Reg.html" style="line-height: 2">没有帐号，点击免费注册</a> </div>
            </form>
        </div>
        <!-- /content -->

        <div data-role="footer">
            <h4>@2015 gaoqing</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page -->
</body>

对应的界面展示：。

搞定界面之后，应该是实现功能的时候了。随后博主就在MSSQL数据库建立了一张用户表UserInfo，字段如下：

数据库建立好了，该做的就是html页面把数据post到服务器，服务器来处理了。而后博主建立了一个ASP.NET MVC4的项目。

通过使用EF数据库实体框架来处理数据。代码如下：

[HttpPost]
        public ActionResult Login()
        {
            Response.AddHeader("Access-Control-Allow-Origin", "*");
            string userid = Request["userid"];
            string password = Request["password"];
            if (!string.IsNullOrEmpty(userid) && !string.IsNullOrEmpty(password))
            {
                List<UserInfo> user = Db.UserInfo.Where(m => m.UserId == userid).ToList();
                if (user.Count > 0)
                {
                    string MD5 = getMd5Hash(password).ToString();
                    string lastMD5 = getMd5Hash(MD5 + password);
                    if (user[0].UserDes == lastMD5)
                    {
                        return Json("OK");
                    }
                    else
                    {
                        return Json("密码错误");
                    }

                }
                else
                {
                    return Json("帐号不存在");
                }
            }
            else
            {
                return Json("请输入账号密码");
            }
            return Json("OK");
        }

在这段代码中主要有2个重要的部分，一个Ajax异步请求跨域的问题，还一个用户密码加密。

解决跨域的问题有很多办法，读者们可以去网上搜索自己喜欢的方式。我这里就是通过 Response.AddHeader("Access-Control-Allow-Origin", "*"); 来接受

所有域的请求。博主这是为了方便就这么写了，如果要应用在实际开发中，最好是指定域名，把*替换成

你所能够接受指定域名。并且最好读取配置文件来配置他，可以保证灵活性。另一个加密方式，只要是学习

过编程的小伙伴都知道MD5加密。在我的知识领域中，MD5在我大脑里面是一个危险的信号。why？请看

MD5解密，这样的网站在我学习编程之前就有接触过。暴力破解MD5，所有防御性编程显得尤为重要。在以后的

开发中只要涉及用户的敏感信息应该缜密思考如何处理。我这里是通过MD5加密密码后，通过MD5的字符串拼接密码

再次通过MD5加密。或者也可以通过用户传过来的参数，遍历，Tostring之后拼接，截取等等手段来处理加密问题。

好了，回过头来，继续看我们的程序。下面贴出JS代码:

<script>

    function onSuccess(data, status) {
        alert('登录成功');
        window.location.href = "index.html";
    }
    function onError(data, status) {
        alert('登录失败');
        return false;
    }
    $("#denglu").click(function () {
        var userid = document.getElementById('userid');
        if (userid.value.length == 0) {
            alert("请输入用户名");
            userid.focus();
            return false;
        }

        var password = document.getElementById('password');
        if (password.value.length == 0) {
            alert("请输入登录密码");
            password.focus();
            return false;
        }

        var formData = $("#form").serialize();
        $.ajax({
            type: "post",
            dataType: "json",
            url: " http://qxw1193890241@qxw1193890241.my3w.com/Default1/Login",
            cache: false,
            data: formData,
            crossDomain: true,
            success: onSuccess,
            error: onError
        });
        return false;
    });

</script>

值得主义的地方是，在ajax请求的地方加上crossDomain参数并给值，url换成你那MVC程序调试的地址。那么，

如果完成之后调试自己的程序，html页面用F12看控制台输出，这html页面唯一存在的问题就是跨域容易出问题。

后台接受代码都是简简单单。接着同样做一个注册的页面，Html页面代码:

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="Scripts/js/jquery-1.7.1.min.js"></script>
    <script src="Scripts/js/jquery.mobile-1.4.5.min.js"></script>
    <link href="Scripts/css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <div data-role="page"><br/><br/>
        <div data-role="header">
            <a href="index.html" data-ajax="false">返回首页</a>
            <h1>注册页面</h1>
        </div>
        <!-- /header -->
        <div role="main" class="ui-content">
            <form id="form">
                <div id="notification"></div>
                <input name="userid" id="userid" value="" type="text" placeholder="请输入注册的用户名">
                <input name="passwordone" id="passwordone" autocomplete="off" type="password" placeholder="请输入注册的密码">
                <input name="passwordtwo" id="passwordtwo" autocomplete="off" type="password" placeholder="请再次输入注册的密码">
                <input name="usertel" id="usertel" value="" type="text" placeholder="请输入手机号">
                <input name="username" id="username" value="" type="text" placeholder="请输入注册的昵称">
                <label for="select-multiple-8" class="ui-hidden-accessible" id="labSex" name="labSex"></label>
                <select data-native-menu="false" name="select-multiple-8" id="select-multiple-8" data-mini="false">
                    <option value="">选择性别:</option>
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
                <input name="useremail" id="useremail" value="" autocomplete="off" type="email" placeholder="请输入注册的邮箱">


                <div class="ui-field-contain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <legend>注册条款:</legend>
                        <label for="checkbox-4">我已仔细阅读并接受</label>
                        <input name="checkbox-4" id="checkbox-4" type="checkbox">
                    </fieldset>
                </div>
                <button class="ui-shadow ui-btn ui-corner-all" type="button" id="zhuce">注册</button>
                <div style="text-align: center;"><a href="Home.html" style="line-height: 2">已有帐号，点击登录</a> </div>
            </form>
        </div>
        <!-- /content -->

        <div data-role="footer">
            <h4>@2015 gaoqing</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page -->
</body>


<script>

    function onSuccess(data, status) {
        window.location.href = "Dialog/DialogMessage.html";
    }
    function onError(data, status) {
        alert('注册失败，可能你注册的用户名存在');
    }
    $("#zhuce").click(function () {

        var userid = document.getElementById('userid');
        if (userid.value.length == 0) {
            alert("请输入用户名");
            userid.focus();
            return false;
        }
        var passwordone = document.getElementById('passwordone');
        if (passwordone.value.length == 0) {
            alert("请输入密码");
            passwordone.focus();
            return false;
        }
        var passwordtwo = document.getElementById('passwordtwo');
        if (passwordtwo.value.length == 0) {
            alert("请输入确认密码");
            passwordtwo.focus();
            return false;
        }
        if (passwordtwo.value != passwordone.value) {
            alert("确认密码与密码输入不一致");
            passwordtwo.select();
            return false;
        }

        var usertel = document.getElementById('usertel');
        if (usertel.value.length == 0) {
            alert("请输入手机号");
            usertel.focus();
            return false;
        }
        var username = document.getElementById('username');
        if (username.value.length == 0) {
            alert("请输入昵称");
            username.focus();
            return false;
        }
        var selectmultiple8 = document.getElementById('select-multiple-8');
        if (selectmultiple8.value.length == 0) {
            alert("请选择性别");
            selectmultiple8.focus();
            return false;
        }

        var useremail = document.getElementById('useremail');
        if (useremail.value.length == 0) {
            alert("请输入邮箱地址");
            useremail.focus();
            return false;
        }
        var filter = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        if (!filter.test(useremail.value)) {
            alert('您的电子邮件格式不正确');
            useremail.select();
            return false;
        }
        //checkbox-4
        var checkbox4 = document.getElementById('checkbox-4');
        if (!checkbox4.checked) {
            alert("请接受注册条款");
            return false;
        }




        var formData = $("#form").serialize();
        $.ajax({
            type: "post",
            dataType: "json",
            url: " http://qxw1193890241@qxw1193890241.my3w.com/Default1/Reg",
            cache: false,
            data: formData,
            crossDomain: true,
            success: onSuccess,
            error: onError
        });
        return false;
    });

</script>


</html>

MVC接收数据的处理代码如下:

 [HttpPost]
        public ActionResult Reg()
        {
            Response.AddHeader("Access-Control-Allow-Origin", "*");
            string strHostName = System.Net.Dns.GetHostName();
            string clientIPAddress = System.Net.Dns.GetHostAddresses(strHostName).GetValue(0).ToString();
            string userid = Request["userid"];
            string passwordOne = Request["passwordone"];
            string passwordTwo = Request["passwordtwo"];
            string sex = Request["select-multiple-8"];
            string username = Request["username"];
            string useremail = Request["useremail"];
            string usertel = Request["usertel"];
            if (passwordOne != passwordTwo)
            {
                return Json("两次输入密码不一致");
            }
            int flag = 0;
            int.TryParse(sex, out flag);
            if (!string.IsNullOrEmpty(userid) && !string.IsNullOrEmpty(passwordOne))
            {

                UserInfo user = new UserInfo();
                user.UserId = userid;
                user.UserIp = clientIPAddress;
                user.UserMail = useremail;
                user.UserName = username;
                user.UserTel = usertel;
                if (flag == 0)
                {
                    user.UserSex = "女";
                }
                else
                {
                    user.UserSex = "男";
                }
                string md5 = getMd5Hash(passwordOne).ToString();
                user.UserDes = getMd5Hash(md5 + passwordOne);
                Db.UserInfo.Add(user);
                if (Db.SaveChanges() > 0)
                {
                    return Json("OK");
                }
                else
                {
                    return Json("注册失败");
                }

            }
            else
            {
                return Json("注册失败");
            }

        }

代码搞定了，贴上效果图：做完这两个页面，其中比较特殊的就是Jquery Mobile自带的一些样式，博主是后端开发程序员，

对Css这东西尤其不感冒。所有关于这方面样式的问题，读者们可以去找找资料，我使用的是API中的一些例子。

至于怎么找，先去官网下载最新的Jquery Mobile包，里面有一个 jquery.mobile-1.4.5\demos 文件夹，自己在电脑

通过IIS部署就行。问题来了，全英文我怎么看，这里博主帮火狐浏览器打个广告吧。下载之后，火狐浏览器搜索下网页翻译2.0

这个插件，然后访问自己IIS部署Jquery Mobile的Demo。翻译之后的成果：

准备工作好了，接着往下说：做完注册这一块，注册成功应该在Web App的注册页面实现一个注册成功的交互信息。

在我所查看的文档中，有一段这样的代码：

<!--    一段弹层提示方案
                <div data-role="popup" id="popupBasic">
   <p>恭喜您注册成功！</p>
</div>
            $("#popupBasic").popup('open');-->

这是弹出层的html以及JS调用方式，但是他不够友好，弹出来只会你必须点一下才能消失，博主就在想如何做到让他过2s自动消失，

然后跳转到登录界面。后来发现使用这个弹出层的方式，在调试过程中发现这样式显得极为尴尬，特别丑，只能通过其他办法了。

博主就找到了另外一种方式。Dialog的这东西。在注册页面，已经有这个东西了。如下，

  function onSuccess(data, status) {
        window.location.href = "Dialog/DialogMessage.html";
    }

允许，博主在这里开个小玩笑，就是一个跳转页面而已。不过主要的内容在于页面的内容。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/Scripts/js/jquery-1.7.1.min.js"></script>
    <script src="/Scripts/js/jquery.mobile-1.4.5.min.js"></script>
    <link href="/Scripts/css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <title></title>
</head>
<body>
      <div data-role="dialog" id="alert-dialog">
                    <div data-role="header">
                        <h1>提示信息</h1>
                    </div>
                    <div data-role="content">
                        <p>恭喜您，已经注册成功！</p>
                        <p>请点击确认登录！</p>
                        <a href="/Home.html" class="ui-shadow ui-btn">确定</a>
    </div>
                </div>
</body>
</html>

效果如图：

代码显得极为简单，主要部分就是有一个Div里面有一个Data-role属性为dialog，读者们有么有发现，前面的页面很多

地方都有这个属性。下面简单介绍下这个属性：

data-role参数表：

page 页面容器，其内部的mobile元素将会继承这个容器上所设置的属性

header 页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素

footer 页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素

content 页面内容容器，这是一个很宽容的容器，内部可以包含标准的html元素和jQueryMobile元素

controlgroup 将几个元素设置成一组，一般是几个相同的元素类型

fieldcontain 区域包裹容器，用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔

navbar 功能导航容器，通俗的讲就是工具条

listview 列表展示容器，类似手机中联系人列表的展示方式

list-divider 列表展示容器的表头，用来展示一组列表的标题，内部不可包含链接

button 按钮，将链接和普通按钮的样式设置成为jQueryMobile的风格

none 阻止框架对元素进行渲染，使元素以html原生的状态显示，主要用于form元素。

Jquery Mobile不仅仅只有这个属性还有一些相关data-transition，data-icon，data-iconpos等属性。详细的参考

这位园友的介绍：

相关属性介绍。

引出了这个知识点，那么我们接着走。博主在想做一个什么样子的APP比较好呢，一直由于。想着，不管怎么样，都是

类似安卓里面的Listview和ios里面的UitableView一样，数据来源展示列表。那么，就这样博主决定，展示一个关于C#和

IOS的知识体系列表。但是想着，这么多数据，我怎么去整理，这么多目录，博主也不知道该怎么去分。突然卡住了，

去网上搜了下，只能顺势而为，发现了，脚本之家这个网站里面有一些数据。

这都是赤裸裸的资源啊。就这么决定了，博主准备趴下这些数据作为自己备用。

继续建立数据库的表，一个目录表，一个文章内容表，一个导航页面的列表数据的表。

三张表搞定，因为在抓去内容的过程中，博主图方便，就没有层级递归什么的关系。数据设计比较简陋。

好了继续说接下来的工作，爬内容，能干嘛，打开浏览器F12，锁定那些数据，发现如图：

全文仅有一个newslist的样式，所有第一想法是正则表达数先取出这一部分，但是在搜索过程中发现，一个HtmlAgilityPack的东西。太尼玛激动了。因为

这个不需要写正则表达式啊，平时也没很多心情去研究正则表达式。详细的这个dll类库，大家可以去百度了解了解。对提取html东西很好使。博主就用这个dll

设置xpath为div样式为newslist中所有的a标签，后续这个代码会发出来。然后博主如期获得这个a标签，紧接着，博主发现从第一页到尾页，他们的URL只有一个

数字在递增。此刻的心情，博主无法表达。很顺利的直接把数据存入了目录表。接着同样的分析，详细内容页面，也差不多。博主取出目录表中的所有CatalogHref字段，

遍历它，然后一系列提取操作，成功的将内容表存入数据库。

我也是泪奔啊，下面都已经写完了数据绑定，浏览器崩溃了，心中几千万只草泥马呼啸而过。博主抱怨下，只能恢复内容接着写了。

接下来，我们新建一个Index.html页面，并找到关于列表相关html。如下：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="Scripts/js/jquery-1.7.1.min.js"></script>
    <script src="Scripts/js/jquery.mobile-1.4.5.min.js"></script>
    <link href="Scripts/css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <title></title>
</head>
    <body>
        
        <div data-role="page" data-dom-cache="true"><br/><br/>
            <div data-role="header">
                <h1>首页</h1>
            </div>
            <!-- /header -->
            <div role="main" class="ui-content">
                <form id="form">
                    <div data-role="navbar" data-iconpos="top">
                        <ul>
                        
                            <li><a href="IosIndex.html"  data-icon="grid" data-ajax="false">IOS</a></li>
                            <li><a href="News.html" data-icon="info" data-ajax="false">方块导航</a></li>
                            <li><a href="About.html" data-icon="home" data-ajax="false" >关于本站</a></li>
                        </ul>
                    </div>
                    <br/>
                    <ul data-role="listview" id="contentId">
                           <li><a href="NetList.html">C#</a></li>
                            <li><a href="IosList.html">IOS</a></li>
                            <li><a href="About.html">关于我</a></li>
                    </ul>

                </form>
            </div>
            <!-- /content -->

            <div data-role="footer">
                <h4>@2015 gaoqing</h4>
            </div>
            <!-- /footer -->
        </div>
        <!-- /page -->
    </body>

效果图：。

博主为了实现功能，只能无情的将ul下所有的li标签注释了。接下来博主要做的就是通过Ajax请求拿到数据

通过解析数据拼接html。接着，我们先把MVC中取出数据的代码给写好：

[HttpPost]
        public JsonResult Default()
        {
            Response.AddHeader("Access-Control-Allow-Origin", "*");
            List<SubjectInfo> subList = Db.SubjectInfo.ToList();
            return Json(subList);
        }

后台数据准备好了，紧接者就是前台js代码了。

 <script>
        $(document).bind("pageinit", function () {

            $.ajax({
                type: "post",
                dataType: "json",
                url: " http://qxw1193890241@qxw1193890241.my3w.com/Default1/Default",
                cache: false,
                crossDomain: true,
                success: onSuccess,
                error: onError
            });
        });
     
        function onSuccess(data, status) {
            var arr = eval(data);
            var aarr = document.getElementsByTagName('li');
            if (aarr.length>3) {
                return false;
            } else {
                createDom(arr);
            }
        }
        function onError(data, status) {
            alert(data);
        }

        function createDom(arr) {
            var contentId = document.getElementById("contentId");
            for (var i = 0; i < arr.length; i++) {
                var li = document.createElement("li");
                var a = document.createElement("a");
                li.setAttribute('class', 'ui-first-child');
                a.setAttribute('href', arr[i].SubjectPage);
                a.setAttribute('class', 'ui-btn ui-btn-icon-right ui-icon-carat-r');
                a.setAttribute('data-ajax', 'false');
                a.innerText = arr[i].SubjectName;
                li.appendChild(a);
                contentId.appendChild(li);
            }
        }


    </script>

博主想在页面加载的时候就请求数据并加载列表。所有在这里博主引出Jquery Moible中的页面事件，Pageinit页面初始化，

相关的其他事件大家可以去W3C的Jquery Mobile资料看看。在这段js中，还有一个比较重点的问题在随后写出。接着走，博主

成功的取到了数据，通过js的eval方法解析数据，然后通过js动态创建dom来拼接html。动态创建的代码就是createDom这个js

方法。仔细观察，有一句代码 a.setAttribute('data-ajax', 'false'); ，关于a标签的问题，就是这个重点了。假若不设置这个属性

在后面通过a标签跳转的方法会报跨域的错误。是因为，Jquery Mobile本身就是所有页面js共享的。所有设置这个a标签属性才会执行相应的

js代码，不然就会出现问题，或者给a标签加上target="_top"的属性，他的作用是清空文档信息，打开时忽略所有框架。这个知识点讲解完了。

紧接者，博主拖出一个后期开发中的问题，仔细观察在异步请求成功的时候，OnSuccess方法中的， if (aarr.length>3) ，主要是因为

下一个页面在返回的时候pageinit方法又会执行一次，所有就会出现两个list列表，只要加个条件判断即可控制。

接下来，从导航页面应该跳转到目录页面，所有继续新建一个NewList.html的文件。同样的头尾模版，不同的是这里要添加一个加载下一页的功能。

这里面涉及到的知识点有分页。这个页面显示的是所有问题标题的目录，页面代码如何：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="Scripts/js/jquery-1.7.1.min.js"></script>
    <script src="Scripts/js/jquery.mobile-1.4.5.min.js"></script>
    <link href="Scripts/css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <div data-role="page"><br/><br/>
        <div data-role="header">
            <!--    <a data-rel="back">返回的图片</a> -->
            <a href="index.html" data-ajax="false">返回首页</a>
            <!--  <a href="Default.html" target="_top">返回首页</a>-->
            <h1>C#知识体系</h1>
        </div>
        <!-- /header -->
        <div role="main" class="ui-content">
            <form id="form">
                <input style="display: none;" id="idSub" name="idSub" value="1" />
                <input style="display: none;" id="pageIndex" name="pageIndex" value="0" />
                <ul data-role="listview" id="listview">
                </ul>
                <br />
                <input type="button" value="点击加载下一页" id="more" />
            </form>

        </div>
        <!-- /content -->

        <div data-role="footer">
            <h4>@2015 gaoqing</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page -->
</body>

<script>

    $(function () {
        $("#more").live("click", function () {
            var pageIndex = document.getElementById("pageIndex").value;
            pageIndex++;
            document.getElementById("pageIndex").value = pageIndex;
            var formData = $("#form").serialize();
            $.ajax({
                type: "post",
                dataType: "json",
                data: formData,
                url: " http://qxw1193890241@qxw1193890241.my3w.com/Default1/Catalog",
                cache: false,
                crossDomain: true,
                success: onSuccess,
                error: onError
            });
        });
    });


    $(document).bind("pageinit", function () {

        var formData = $("#form").serialize();
        $.ajax({
            type: "post",
            dataType: "json",
            data: formData,
            url: " http://qxw1193890241@qxw1193890241.my3w.com/Default1/Catalog",
            cache: false,
            crossDomain: true,
            success: onSuccess,
            error: onError
        });
    });
    function onSuccess(data, status) {
        var arr = eval(data);
        createDom(arr);
        if (arr.length < 5) {
            alert('已经到尾了');

        }

    }
    function onError(data, status) {
        alert(data);
    }

    function createDom(arr) {
        for (var i = 0; i < arr.length; i++) {
            var str = '<li class="ui-first-child"><a href="Content.html?CatalogId=' + arr[i].CatalogId + '" data-transition="flip" class="ui-btn ui-btn-icon-right ui-icon-carat-r" target="_top">' + arr[i].CatalogName + '</a></li>';
            $("#listview").append(str).find("li:last").hide();
            $('ul').listview('refresh');
            $("#listview").find("li:last").slideDown(300);
        }
    }

    $(document).bind("mobileinit", function () {
        $.mobile.page.prototype.options.addBackBtn = true;
    });
</script>

</html>

仔细观察这些代码与前面几个页面的代码不同之处。在createDom里面呈现了刷新列表的语句，尤其值得关注的是，博主

给页面绑定了一个mobileinit的事件，里面的代码内容是呈现设置返回按钮的属性。这个属性表示，页面的数据在返回的时候

无需在次获取。分页的原理相信小伙伴们都大致了解，如有不懂得可以百度下分页。博主这里就不细致讲解了。贴上后台获取

目录数据的代码：

   [HttpPost]
        public JsonResult Catalog()
        {
            Response.AddHeader("Access-Control-Allow-Origin", "*");
            int id = 0;
            string ids = Request["idSub"];
            int pageIndex = 0;
            string index = Request["pageIndex"];
            if (int.TryParse(ids, out id) && int.TryParse(index, out pageIndex))
            {

                int pageSize = 5;
                List<CatalogInfo> catList = Db.CatalogInfo.Where(o => o.CatalogId > 0 && o.SubjectId == id)
                .OrderByDescending(o => o.CatalogId)
                .Skip(pageIndex * pageSize)
                .Take(pageSize).ToList();
                return Json(catList);
            }
            else
            {
                return Json("error");
            }
        }

在里面用了linq 分页的方式实现，其下过如下：

点击之后的效果：

紧接着，该做一个详细的内容页面，后续的页面已经没什么知识点了，通过目录所属的ID找到具体

的文章内容，显示出来。效果如图:

贴上html页面代码：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="Scripts/js/jquery-1.7.1.min.js"></script>
    <script src="Scripts/js/jquery.mobile-1.4.5.min.js"></script>
    <link href="Scripts/css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <div data-role="page"><br/><br/>
        <div data-role="header">
            <a data-rel="back" data-ajax="false">返回目录</a>
            <!--<a href="Default.html" data-ajax="false">返回目录</a>-->
            <h1>
                <label id="title"></label>
            </h1>
        </div>
        <!-- /header -->
        <div role="main" class="ui-content">
            <form id="form">
                <input style="display: none;" id="catalogId" name="catalogId" />
                <h3>
                    <label id="neirong"></label>
                </h3>
                <a class="ui-shadow ui-btn ui-corner-all" type="button" id="tiwen" target="_top">我要提问</a>
            </form>
        </div>
        <!-- /content -->

        <div data-role="footer">
            <h4>@2015 gaoqing</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page -->
</body>

<script>
    $(document).bind("pageinit", function () {
        var Request = new Object();
        Request = GetRequest();
        var catalogId;
        catalogId = Request['CatalogId'];
        var inp = document.getElementById('catalogId');
        inp.value = catalogId;
        var formData = $("#form").serialize();
        $.ajax({
            type: "post",
            dataType: "json",
            data: formData,
            url: " http://qxw1193890241@qxw1193890241.my3w.com/Default1/Article",
            cache: false,
            crossDomain: true,
            success: onSuccess,
            error: onError
        });
    });
    function onSuccess(data, status) {
        var arr = eval(data);
        var aarr = document.getElementsByTagName('article');
        if (aarr.length > 0) {
            return false;
        } else {
            createDom(arr);
        }
    }
    function onError(data, status) {
        alert(data);
    }

    function createDom(arr) {
        var title = document.getElementById("title");//content
        title.innerText = arr[0].ArticleTitle;
        var neirong = document.getElementById("neirong");//content
        neirong.innerHTML = arr[0].ArticleContent;
        var contentId = document.getElementById("form");//content
        var ul = document.createElement("article");
        contentId.appendChild(ul);
        var tiwen = document.getElementById("tiwen");
        tiwen.setAttribute('href', 'Tiwen.html?CatalogId=' + arr[0].CatalogId);
    }
    $(document).bind("mobileinit", function () {
        $.mobile.page.prototype.options.addBackBtn = true;
    });

    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串 
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
</script>

</html>

后台代码如下：

        [HttpPost]
        public JsonResult Article()
        {
            Response.AddHeader("Access-Control-Allow-Origin", "*");
            int id = 0;
            string ids = Request["catalogId"];
            if (int.TryParse(ids, out id))
            {
                List<ArticleInfo> artList = Db.ArticleInfo.Where(s => s.CatalogId == id).ToList();
                return Json(artList);
            }
            else
            {
                return Json("error");
            }

博主目前的思绪就到这里停止了，已经不知道该如何前行了。

然后偶然发现这上面几个页面仅仅一个小模块而已。

回过头我们继续看Index页面，里面有一个Ios的导航部分。这里博主要给这个ios部分给上关于它的色彩。

效果如下图：

是不是感觉眼前一亮啊，博主瞬间感觉心情开放了，虽然博主对界面审美要求不高，但是看到这个界面真心舒服了很多。

继续贴上代码来讲知识：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>iOS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="Scripts/js/jquery-1.7.1.min.js"></script>
    <script src="Scripts/js/jquery.mobile-1.2.0.min.js"></script>
  <link href="Scripts/css/jquery.mobile-1.2.0.min.css" rel="stylesheet" />
   <link href="Scripts/css/styles.css" rel="stylesheet" />
</head>
<body>
    <div data-role="page" id="footerTabs" data-theme="b"><br/><br/>
        <!--<div data-role="header" data-position="fixed">
                <h1>Footer Tabs</h1>
                <a href="#" data-rel="back">Back</a>
            </div>-->
            <div data-role="header" data-position="inline">
            <a href="#" data-rel="back" data-theme="b">Back</a>
            <h1>Blue Bar</h1>
            <a href="#" data-theme="a">Button</a>
        </div>
        <div data-role="content">
   你可以切换tab试试看
        </div>

        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="GuoDu0.html" id="tabA" data-icon="custom"  class="ui-btn-active">One</a></li>
                    <li><a href="GuoDu1.html" id="tabB" data-icon="custom">Two</a></li>
                    <li><a href="GuoDu2.html" id="tabC" data-icon="custom">Three</a></li>
                </ul>
            </div>
            <!-- /navbar -->
        </div>
        <!-- /footer -->

    </div>

</body>
</html>
  <script>
   
      $(document).on("mobileinit", function () {
          $.mobile.defaultPageTransition = "slide";
      });
    </script>