`
shuai1234
  • 浏览: 971852 次
  • 性别: Icon_minigender_1
  • 来自: 山西
社区版块
存档分类
最新评论

jqMobi插件json格式ActionSheet

 
阅读更多

在上一篇中我们学会了ActionSheet的使用，细心的朋友可能会发现其中创建列表的格式是HTML的，代码如下：

 

  1. function showCustomHtmlSheet() {  
  2.      $("#afui").actionsheet('<a  >Back</a><a  onclick="alert(\'hi\');" >Show Alert 3</a><a  onclick="alert(\'goodbye\');">Show Alert 4</a>');  
  3. }  

这一篇我们来研究一下json格式的ActionSheet,其实很简单，和上一篇中的分析方法一样，我们先找到实例代码中的源代码如下：

 

 

  1. <a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheet</a>  
  1. function showCustomJsonSheet() {  
  2.     $("#afui").actionsheet(  
  3.     [{  
  4.         text: 'back',  
  5.         cssClasses: 'red',  
  6.         handler: function () {  
  7.             $.ui.goBack();  
  8.         }  
  9.     }, {  
  10.         text: 'show alert 5',  
  11.         cssClasses: 'blue',  
  12.         handler: function () {  
  13.             alert("hi");  
  14.         }  
  15.     }, {  
  16.         text: 'show alert 6',  
  17.         cssClasses: '',  
  18.         handler: function () {  
  19.             alert("goodbye");  
  20.         }  
  21.     }]);  
  22. }  

运行效果：

 

好吧，我们下面添加一个条目试试。修改代码如下：

 

  1. <!DOCTYPE html>   
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>jqMobi</title>  
  6. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>  
  7. <link href="css/icons.css" rel="stylesheet" type="text/css"/>  
  8. <script src="appframework.js" type="text/javascript"></script>  
  9. <script src="ui/appframework.ui.js" type="text/javascript"></script>  
  10. </head>   
  11. <body>   
  12.     <div id="afui">  
  13.         <div id="content">  
  14.             <div id="home" title="首页" class="panel" selected="true"  
  15.                 data-footer="custom_footer">  
  16.                 <a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheet</a>  
  17.             </div>  
  18.             <div id="about" title="关于我们" class="panel"  
  19.                 data-footer="custom_footer">  
  20.                   
  21.             </div>  
  22.             <header id="custom_header">  
  23.                 <h1>首页</h1>  
  24.             </header>  
  25.             <footer id="custom_footer">  
  26.                 <a href='#home' class='icon home'>首页</a>  
  27.                 <a href='#about' class='icon info'>关于我们</a>  
  28.             </footer>  
  29.             <nav>  
  30.                 <div class='title'>Home</div>  
  31.                 <ul>  
  32.                     <li><a class="icon home mini" href="#main">Home</a></li>  
  33.                 </ul>  
  34.             </nav>  
  35.         </div>  
  36.     </div>  
  37.     <script>  
  38.         function showCustomJsonSheet() {  
  39.             $("#afui").actionsheet(  
  40.             [{  
  41.                 text: 'back',  
  42.                 cssClasses: 'red',  
  43.                 handler: function () {  
  44.                     $.ui.goBack();  
  45.                 }  
  46.             }, {  
  47.                 text: 'show alert 5',  
  48.                 cssClasses: 'blue',  
  49.                 handler: function () {  
  50.                     alert("hi");  
  51.                 }  
  52.             }, {  
  53.                 text: 'show alert 6',  
  54.                 cssClasses: '',  
  55.                 handler: function () {  
  56.                     alert("goodbye");  
  57.                 }  
  58.             },{  
  59.                 text: '大碗干拌',  
  60.                 cssClasses: 'red',  
  61.                 handler: function () {  
  62.                     alert("哈哈");  
  63.                 }  
  64.             }]);  
  65.         }               
  66.     </script>  
  67. </body>  
  68. </html>  

运行一下，看看效果：

 



突然发现我们上面设置的背景没作用，这是什么原因呢？我们再来看看源代码，定位到元素如下：

 

  1. <a href="javascript:;" class="red">大碗干拌</a>  

 

看到上面的background:white;这就是原因，将这一项禁掉会发现有效果了，如下：

好吧，我们进到af.ui.css文件中修改如下：

 

  1. #afui #af_actionsheet a{  
  2.     border-radius:0;  
  3.     -webkit-border-radius:0;  
  4.     color:black;  
  5.     /*background:white;*/  
  6.     border:none;  
  7.     text-shadow:none;  
  8. }  

和上面的效果相同，我就不贴图了，那么如果我们想让上面菜单上面的文字为蓝色的怎么办？其实可以像上面一样在af.ui.css中该，但是我建议最好不要在这个配置文件中修改，我们可以在我们的index.html中添加如下代码：

 

 

  1. <style>  
  2.     #afui #af_actionsheet a{  
  3.         color:blue;  
  4.     }  
  5. </style>  

效果如下：

 





分享到：
| Java生成缩略图之Thumbnailator
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jqmobi app-framework-2.1.0

    6. **插件生态系统**：随着社区的发展，App Framework 可能拥有丰富的第三方插件库，涵盖各种功能，如地图集成、推送通知、社交分享等，开发者可以根据需求选择合适的插件来扩展应用功能。 7. **本地存储**：为了在...

    jqMobi参考手册

    ### jqMobi参考手册：构建高效移动应用的全面指南 #### 概述 `jqMobi`是一款专为HTML5浏览器设计的JavaScript框架，旨在优化移动应用开发过程，提升用户体验。该框架由三大部分组成：`jqMobi`、`jqUi`与`jqPlugins...

    jqmobi移动开发

    ** jqMobi 移动开发框架详解 ** jqMobi 是一个专为移动应用开发设计的轻量级JavaScript框架，它旨在简化手机端和移动端应用的构建过程，提供高效的性能和友好的API接口。作为一款强大的工具，jqMobi 具备了与jQuery...

    appframework jqmobi demo

    《AppFramework与JqMobi实战：打造高效移动应用》 在移动应用开发领域，AppFramework和JqMobi是两个备受开发者喜爱的轻量级框架。它们为开发者提供了便捷的工具，使得创建功能丰富的、跨平台的移动应用变得更加简单...

    jqmobi1.02rc1

    尽管jqMobi的大小比完整的jQuery小得多，但仍然提供了许多相似的功能，使其成为移动环境的理想选择。 在跨平台移动开发方面，jqMobi 支持多种操作系统，包括iOS、Android、Blackberry以及Windows Phone等，让开发者...

    appframework-master 2.0

    jqMobi源码最初在2012年1月份推出，基于MIT/X11许可证，托管在GitHub上，开发者可参与并通过插件不断改进该框架。 2012年3月13日，jqMobi 1.0版本正式发布。现在最新的版本是jqMobi 2.0 jqMobi的特点 速度快 适用于...

    jqMobi学习笔记

    jqMobi是一款轻量级的JavaScript库，专为移动设备设计，旨在简化移动Web应用的开发。它在PhoneGap和Android等原生环境中的表现尤为出色，提供了与jQuery类似的功能，但体积更小，加载速度更快，更适合资源有限的移动...

    JqMobi+PhoneGap项目实战

    JqMobi框架由三个核心组件构成：查询（query）程序库、用户界面库jqUi以及针对WebKit浏览器交互和接口的插件支持。查询库提供了60多个API调用，包括Ajax调用和针对WebKit的系统选择器调用等。用户界面库jqUi则是一个...

    jqmobi icon图标大全

    ** jqMobi 图标库详解 ** jqMobi 是一个轻量级的JavaScript移动框架，专为手机和触摸设备设计，旨在提供高效、简洁的移动应用开发解决方案。它包括了一系列的功能，如事件处理、动画效果、Ajax加载以及触摸优化等。...

    webAPP开发教程

    3. **jqMobi 插件 快速入门(3)**：这部分教程可能是关于JqMobi插件的介绍和使用，插件可以扩展JqMobi的功能，比如添加图表、地图或交互式表单等。快速入门(3)可能意味着这是系列教程的第三部分，旨在让初学者快速...

    jqmobi+phonegap+手机触屏滑动效果js

    《jqmobi+phonegap+手机触屏滑动效果js：构建流畅的移动应用体验》 在移动开发领域，jqMobi和PhoneGap是两个重要的工具，它们为开发者提供了便捷的方式来构建跨平台的原生应用。结合触屏滑动效果，可以创造出与原生...

    mobiscroll时间控件支持jqmobi等

    日期控件同样具有高度可定制性，可以设置日期格式，选择年份范围，甚至配置是否显示周数。开发者还可以结合时间和日期控件，创建日期时间选择器，为用户提供更完整的输入体验。 在jqMobi的支持方面，Mobiscroll与这...

    intel appframework3.0测试版 jqmobi3.0测试版

    intel appframework3.0测试版 jqmobi3.0测试版 App Framework 3.0和前面的版本比较有很大的变动。当本项目于2011开启之后，一直聚焦于修正系统的bug（比如安卓平台上的 CSS3 变换）、提供一个可靠的 scrolling ...

    Jqmobi做的百度地图,支持三维地图 源码

    【Jqmobi与百度地图集成实现三维地图】 Jqmobi是一款轻量级的JavaScript移动Web框架，它专注于为移动设备提供高效、简洁的交互体验。本项目是将Jqmobi与百度地图API结合，实现了在移动端展示三维地图的功能。通过这...

    Jqmobi做的百度地图，支持三维地图 源码

    在移动应用开发领域，Jqmobi 是一个专为移动端打造的JavaScript框架，它提供了一套简单易用的API，使得开发者能够快速构建高效、流畅的移动Web应用。本项目是基于Jqmobi实现的百度地图功能，特别是实现了三维地图的...

    jqmobi微信

    使用jqmobi，模仿微信做工作管理系统

    快速参考手册

    该框架由三个核心部分组成：**jqMobi**（查询选择器库）、**jqUi**（用户界面/用户体验库）以及**jqPlugins**（插件集合）。这些组件共同构成了一个完整的解决方案，用于构建高性能的移动应用。 #### 二、组成部分...

    Learning Node.js mobi

    Learning Node.js 英文mobi 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有侵权，请联系上传者或csdn删除

    jqm开发的音乐播放器

    ** jqMobi 开发音乐播放器详解 ** jqMobi 是一个轻量级的 JavaScript 框架，专为移动设备优化，旨在提供快速、高效且易于使用的前端开发解决方案。本项目利用 jqMobi 实现了一个音乐播放器，旨在提供流畅的音乐播放...

    jqmobile3.0

    10. **与jQuery生态系统集成**：尽管jqMobi和jqMobile是独立于jQuery的，但它们仍能与jQuery库一起工作，利用jQuery的插件和工具。 "appframework-master"这个文件名可能是jqMobile 3.0的源码仓库，包含了构建和...

Magicbox
Global site tag (gtag.js) - Google Analytics