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

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