`
shuai1234
  • 浏览: 977948 次
  • 性别: 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
评论
发表评论

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

相关推荐

    白色大气风格的旅游酒店企业网站模板.zip

    白色大气风格的旅游酒店企业网站模板.zip

    python实现用户注册

    python实现用户注册

    【图像压缩】基于matlab GUI Haar小波变换图像压缩（含PSNR）【含Matlab源码 9979期】.zip

    Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    (177354822)java小鸟游戏.zip

    内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。

    VB+access学生管理系统(论文+系统)(2024am).7z

    1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

    数学计算中的平方表与圆周率π的应用

    内容概要：文档名为《平方表，派表集合.docx》，主要内容是1至1000的平方值以及1至1000与π的乘积结果。每个数字从1开始，逐步增加至1000，对应地计算了平方值和乘以π后的值。所有计算均通过Python脚本完成，并在文档中列出了详细的计算结果。 适合人群：需要进行数学计算或程序验证的学生、教师和研究人员。 使用场景及目标：用于快速查找特定数字的平方值或其与π的乘积，适用于教学、科研及程序测试等场景。 阅读建议：可以直接查阅所需的具体数值，无需从头到尾逐行阅读。建议在使用时配合相应的计算工具，以验证和拓展数据的应用范围。

    VB+SQL光盘信息管理系统(源代码+系统+答辩PPT)(20244m).7z

    1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

    白色大气风格的健身私人教练模板下载.zip

    白色大气风格的健身私人教练模板下载.zip

    白色简洁风的商务网站模板下载.zip

    白色简洁风的商务网站模板下载.zip

    白色大气风格的前端设计案例展示模板.zip

    白色大气风格的前端设计案例展示模板.zip

    圣诞树项目中的硬件和MATLAB实现指南

    内容概要：本文介绍了两个有趣的圣诞树项目方向：一是使用Arduino或Raspberry Pi开发可编程的圣诞树灯光控制系统；二是基于MATLAB开发一个圣诞树模拟器。前者通过硬件连接、编写Arduino/Raspberry Pi程序、MATLAB控制程序来实现LED灯带的闪烁；后者则通过创建圣诞树图形、添加动画效果、用户交互功能来实现虚拟的圣诞树效果。 适合人群：具备基本电子工程和编程基础的爱好者和学生。 使用场景及目标：①通过硬件和MATLAB的结合，实现实际的圣诞树灯光控制系统；②通过MATLAB模拟器，实现一个有趣的圣诞树动画展示。 阅读建议：读者可以根据自己的兴趣选择合适的项目方向，并按照步骤进行动手实践，加深对硬件编程和MATLAB编程的理解。

    白色扁平风格的温室大棚公司企业网站源码下载.zip

    白色扁平风格的温室大棚公司企业网站源码下载.zip

    Navicat.zip

    Navicat.zip

    Scikit-learn库中主成分分析（PCA）技术的Python实现教程

    内容概要：本文详细介绍了主成分分析（PCA）技术的原理及其在Scikit-learn库中的Python实现。首先讲解了PCA的基本概念和作用，接着通过具体示例展示了如何使用Scikit-learn进行PCA降维。内容涵盖了数据准备、模型训练、数据降维、逆转换数据等步骤，并通过可视化和实际应用案例展示了PCA的效果。最后讨论了PCA的局限性和参数调整方法。 适合人群：数据科学家、机器学习工程师、数据分析从业者及科研人员。 使用场景及目标：适用于高维数据处理，特别是在需要降维以简化数据结构、提高模型性能的场景中。具体目标包括减少计算复杂度、提高数据可视化效果和改进模型训练速度。 其他说明：本文不仅提供了详细的代码示例，还讨论了PCA在手写数字识别和机器学习模型中的应用。通过比较原始数据和降维后数据的模型性能，读者可以更好地理解PCA的影响。

    (175846434)目标检测-将VOC格式的数据集一键转化为COCO和YOLO格式

    VOC格式的数据集转COCO格式数据集 VOC格式的数据集转YOLO格式数据集。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。

    数字信号处理课程设计.doc

    数字信号处理课程设计.doc

    白色扁平化风格的灯饰灯具销售企业网站模板.zip

    白色扁平化风格的灯饰灯具销售企业网站模板.zip

    华豫佰佳组合促销视图.sql

    华豫佰佳组合促销视图.sql

    白色大气风格的商务团队公司模板下载.zip

    白色大气风格的商务团队公司模板下载.zip

    白色大气风格的VPS销售网站模板.zip

    白色大气风格的VPS销售网站模板.zip

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