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效果、页面跳转、页面跳转传递参数等(二)的更多相关文章
- jQuery Mobile 学习
jQuery Mobile 学习系列 http://blog.csdn.net/bao990423420/article/details/13995021
- JQuery实现隔行变色和突出显示当前行 效果
运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...
- jQuery Mobile学习日记之HelloWorld
这里是本人学习jQuery Mobile的过程,主要用于记录,过程中有不对的地方或不严谨的地方,欢予以指出纠正,非常感谢! 1.首先是下载安装以下文件: [Opera Mobile Emulator] ...
- Jquery Mobile 学习笔记(一)
1.模拟器,IOS:XCODE GENYMOTION ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role=page 代表一个页面 data-po ...
- Android+Jquery Mobile学习系列(9)-总结和代码分享
经过一个多月的边学习边练手,学会了Android基于Web开发的毛皮,其实开发过程中用Android原生API不是很多,更多的是HTML/Javascript/Css. 个人觉得基于WebView的J ...
- Android+Jquery Mobile学习系列(6)-个人信息设置
本节开始,进行代码的实战练习.我的这个App是管理保险客户信息的,数据采用Sqlite存储在本地手机上,第一次使用需要先登记自己的个人信息,这个功能非常简单,也无关紧要,我是拿这个练手,方便做后面复杂 ...
- Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础
本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...
- jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
- jQuery Mobile学习日记(二)
首先依HTML5方式加载,DOCTYPE表示格式为HTML5:主要适用于iPhone.Android等,viewport表示适用于移动终端的适中显示,initial-scale缩放比例在1.0~1.3 ...
随机推荐
- Javaweb Servlet出现Class xxx is not a servlet错误原因
- Hibernate 多对多关联映射, 中间表加查询条件
package com.coracle.yk.xpo.po.base; import java.util.Date; import java.util.HashSet; import java.uti ...
- c语言——gcc,make,vim
在linux环境下进行c语言编程,基础的工具就是gcc和make.关于这2个工具的内容有很多,现在要做的仅仅是起步. gcc的用法: -S Compile only; do not assemble ...
- IntelliJ IDEA 常用快捷键列表及技巧大全
IntelliJ Idea 常用快捷键列表 Alt+回车 导入包,自动修正Ctrl+N 查找类Ctrl+Shift+N 查找文件Ctrl+Alt+L 格式化代码Ctrl+Alt+O 优化导入的类和 ...
- LINQ查询字符串判断是否大写
#region Linq to 字符串char.IsUpper意思是判断是否大写 //string strDemo = "HelloWord!"; ...
- poj 1011
http://poj.org/problem?id=1011 这是一道POJ的搜索的题目,最开始确实难以理解,但做过一些搜索的题目后,也没那么难了. 大概题意就是,现在有N根木头,要拼成若干根木头,并 ...
- How to take partial screenshot with Selenium WebDriver in python
from selenium import webdriver from PIL import Image fox = webdriver.Firefox() fox.get('http://stack ...
- appium + python 环境搭建
所需:JDK.Android SDK.Appium服务程序.Appium客户端程序 1. 安装最新的JDK,并配置环境变量. JAVA_HOME=C:\Program Files (x86)\Java ...
- google API 点连线
这个是模拟的数据,用于测试,为了方便学习 弹出框信息都是固定的,以及操作都不是写的循环,实际开发用 setInterval 或者for 以减少冗余. <!DOCTYPE html> < ...
- Qt 对话框显示控制按钮
在对话框窗体构造函数加入 SystemDialog::SystemDialog(QWidget *parent) : QDialog(parent), ui(new Ui::SystemDialog) ...