本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（39）——jqMobi插件json格式ActionSheet
在上一篇中我们学会了ActionSheet的使用，细心的朋友可能会发现其中创建列表的格式是HTML的，代码如下：
-
function showCustomHtmlSheet() {
-
$("#afui").actionsheet('BackShow Alert 3Show Alert 4');
-
}
这一篇我们来研究一下json格式的ActionSheet,其实很简单，和上一篇中的分析方法一样，我们先找到实例代码中的源代码如下：
-
<a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheeta>
-
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");
-
}
-
}]);
-
}
运行效果：
好吧，我们下面添加一个条目试试。修改代码如下：
-
>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>jqMobititle>
-
<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 Sheeta>
-
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'>Homediv>
-
<ul>
-
<li><a class="icon home mini" href="#main">Homea>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;
-
-
border:none;
-
text-shadow:none;
-
}
和上面的效果相同，我就不贴图了，那么如果我们想让上面菜单上面的文字为蓝色的怎么办？其实可以像上面一样在af.ui.css中该，但是我建议最好不要在这个配置文件中修改，我们可以在我们的index.html中添加如下代码：
效果如下：
阅读(495) | 评论(0) | 转发(0) |
