首页 > 代码库 > jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)

jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)

Index.cshtml

<!-- 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><a href="/Home/Index1" data-ajax="false">go to index1</a></p>        @*  data-ajax="false"加上这个跳转到别的页面就不会是ajax跳转了,就会触发别的页面的js事件*@                   <p><a href="/Home/Index1?id=1&name=aaa"data-ajax="false">go to index1,传递参数</a></p>    </div>    <!-- /content -->    <footer data-role="footer">        <h4>Page Footer</h4>    </footer>    <!-- /footer --></section><!-- /page -->@section scripts{    <script type="text/javascript">        alert("回来了");        $(function () {            $.get("/Home/Index", function () {            }).error(function () {                alert("服务器内部错误");            });        });    </script>}

Index1.cshtml

<!-- 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">        <a href ="#" data-rel="back" class="ui-btn" >返回</a>        @* 该返回会执行返回页面的js事件*@    @*两行四列        ui-grid-a:两列        ui-grid-b:三列        ui-grid-c:四列        *@        <div class="ui-grid-c">            <div class="ui-block-a">                <ul class="ui-bar ui-bar-a">                    <li>Block A</li>                    <li>Block A</li>                </ul>            </div>            <div class="ui-block-b">                <ul class="ui-bar ui-bar-a">                    <li>Block B</li>                    <li>Block B</li>                </ul>            </div>            <div class="ui-block-c">                <ul class="ui-bar ui-bar-a">                    <li>Block C</li>                    <li>Block C</li>                </ul>            </div>            <div class="ui-block-d">                <ul class="ui-bar ui-bar-a">                    <li>Block D</li>                    <li>Block D</li>                </ul>            </div>            <div class="ui-block-a">                <div class="ui-bar ui-bar-a">Block A</div>            </div>            <div class="ui-block-b">                <div class="ui-bar ui-bar-a">Block B</div>            </div>            <div class="ui-block-c">                <div class="ui-bar ui-bar-a">Block C</div>            </div>            <div class="ui-block-d">                <div class="ui-bar ui-bar-a">Block D</div>            </div>        </div>    </div>    <!-- /content -->    <footer data-role="footer">        <h4>Page Footer</h4>    </footer>    <!-- /footer -->    </section><!-- /page -->@section scripts{    <script type="text/javascript">        $(document).ajaxStart(function() {            $.mobile.loading("show", {                text: "加载中...", //加载器中显示的文字                textVisible: true, //是否显示文字                theme: "a", //加载器主题样式a-e                textonly: false, //是否只显示文字                html: "" //要显示的html内容,如图片            });        });        $(document).ajaxStop(function() {            $.mobile.loading("hide");        });        //必须防止ready()外面,绑定一次        $(document).one("pageshow", function () {            var data = getUrlParam(window.location.search);            alert(data["id"] + "---" + data["name"]);        });        $(function() {            $.get("/Home/Index", function() {            }).error(function() {                alert("服务器内部错误");            });                           });            function getUrlParam(string) {            /// <summary>            /// 获得get的参数            /// var data = http://www.mamicode.com/getUrlParam(window.location.search);            /// alert(data["pid"]);            /// </summary>            /// <param name="string"></param>            /// <returns type=""></returns>            var obj = {};            if (string.indexOf("?")!=-1) {                var string = string.substr(string.indexOf("?") + 1);                var strs = string.split("&");                for (var i = 0; i < strs.length; i++) {                    var tempArr = strs[i].split("=");                    obj[tempArr[0]] = unescape(tempArr[1]);                }            }            return obj;        }    </script>}