小强的HTML5移动开发之路（39）——jqMobi插件json格式ActionSheet
在上一篇中我们学会了ActionSheet的使用，细心的朋友可能会发现其中创建列表的格式是HTML的，代码如下：
function showCustomHtmlSheet() {
$("#afui").actionsheet('<a >Back</a><a onclick="alert(\'hi\');" >Show Alert 3</a><a onclick="alert(\'goodbye\');">Show Alert 4</a>');
}
这一篇我们来研究一下json格式的ActionSheet,其实很简单，和上一篇中的分析方法一样，我们先找到实例代码中的源代码如下：
<a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheet</a>
function showCustomJsonSheet() {
$("#afui").actionsheet(
[{
text: 'back',
cssClasses: 'red',
handler: function () {
$.ui.goBack();
}
}, {
text: 'show alert 5',
cssClasses: 'blue',
handler: function () {
alert("hi");
}
}, {
text: 'show alert 6',
cssClasses: '',
handler: function () {
alert("goodbye");
}
}]);
}
运行效果：
好吧，我们下面添加一个条目试试。修改代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jqMobi</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>
<body>
<div id="afui">
<div id="content">
<div id="home" title="首页" class="panel" selected="true"
data-footer="custom_footer">
<a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheet</a>
</div>
<div id="about" title="关于我们" class="panel"
data-footer="custom_footer"> </div>
<header id="custom_header">
<h1>首页</h1>
</header>
<footer id="custom_footer">
<a href='#home' class='icon home'>首页</a>
<a href='#about' class='icon info'>关于我们</a>
</footer>
<nav>
<div class='title'>Home</div>
<ul>
<li><a class="icon home mini" href="#main">Home</a></li>
</ul>
</nav>
</div>
</div>
<script>
function showCustomJsonSheet() {
$("#afui").actionsheet(
[{
text: 'back',
cssClasses: 'red',
handler: function () {
$.ui.goBack();
}
}, {
text: 'show alert 5',
cssClasses: 'blue',
handler: function () {
alert("hi");
}
}, {
text: 'show alert 6',
cssClasses: '',
handler: function () {
alert("goodbye");
}
},{
text: '大碗干拌',
cssClasses: 'red',
handler: function () {
alert("哈哈");
}
}]);
}
</script>
</body>
</html>
运行一下，看看效果：
突然发现我们上面设置的背景没作用，这是什么原因呢？我们再来看看源代码，定位到元素如下：
<a href="javascript:;" class="red">大碗干拌</a>
看到上面的background:white;这就是原因，将这一项禁掉会发现有效果了，如下：
好吧，我们进到af.ui.css文件中修改如下：
#afui #af_actionsheet a{
border-radius:0;
-webkit-border-radius:0;
color:black;
/*background:white;*/
border:none;
text-shadow:none;
}
和上面的效果相同，我就不贴图了，那么如果我们想让上面菜单上面的文字为蓝色的怎么办？其实可以像上面一样在af.ui.css中该，但是我建议最好不要在这个配置文件中修改，我们可以在我们的index.html中添加如下代码：
<style>
#afui #af_actionsheet a{
color:blue;
}
</style>
效果如下：
小强的HTML5移动开发之路（39）——jqMobi插件json格式ActionSheet的更多相关文章
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- 小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
- 小强的HTML5移动开发之路（1）——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...
随机推荐
- 囧 appspot.com/
囧 appspot.com/ 我负责公司人事,最近车间招了一批外来打工妹,让她们填写个人资料表格,早上在看表格登记,发现其中一张政治面貌一栏赫然写着"瓜子脸",当时笑得眼泪直流,没 ...
- 103.tcp通信实现远程控制
客户端代码 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include < ...
- 【Educational Codeforces Round 33 A】Chess For Three
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题.知道哪个人是旁观者就好 [代码] /* 1.Shoud it use long long ? 2.Have you ever ...
- WCF REST （二）
今天主要写下 POST等其他方式 发送请求 以及 流方式 文件的上传与下载 一.Post 提交数据 先来想下 POST和Get 的不同 Get 方式 我们直接通过 url 来传递参数 先来 ...
- ITFriend网站内测公测感悟
4月份做出网站Demo,就开始让用户使用了. 最初的黄色版界面,被吐槽得比较厉害. 关于界面,每个人都有自己的看法,只是喜欢和不喜欢的人比例不一样. 后来,花3400元请了个设计师,设计了一套界面,整 ...
- AM335x(TQ335x)学习笔记——Nand&&网卡驱动移植
移植完毕声卡驱动之后本想再接再励,移植网卡驱动,但没想到的是TI维护的内核太健壮,移植网卡驱动跟之前移植按键驱动一样简单,Nand驱动也是如此,于是,本人将Nand和网卡放在同一篇文章中介绍.介绍之前 ...
- Win7下多线程中OpenFileDialog和SaveFileDialog失效的解决办法（转载）
在程序中,通常会使用独立线程来操作OpenFileDialog或者SaveFileDialog控件,但是在某些情况下(Win7系统下)调用 ShowDialog方法并不显示选择路径对话框.此时需要对启 ...
- 安装使用jupyter（原来的notebook）
1.安装pyzmq 使用pip install pyzmq,安装不成功. 使用easy_install.exe pyzmq.成功安装. 2.安装tornado pip tornado 安装完尚不成功. ...
- Android开发之SpannableString具体解释
在实际的应用开发过程中常常会遇到.在文本的不同部分显示一些不同的字体风格的信息如:文本的字体.大小.颜色.样式.以及超级链接等. 普通情况下,TextView中的文本都是一个样式.对于类似的情况.能够 ...
- 前端js实现打印（导出）excel表格
产品原型: 图片.png 功能需求:点击导出考勤表格按钮,会自动下载成Excel格式 图片.png 图片.png jsp页面代码: <div class="tools"> ...