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

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

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