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 = 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>

}