作为一个前端新手,之前还没有接触过手机端的项目。两周前项目经理告诉我要做手机端,让我用JQMobile。

之前在前端群里,偶尔听说过jqmobile很坑,自己又查了下其他框架,比如zepto、amazui,这两款是大家比较推荐的。

和经理提了一下,经理说就用jqmobile吧,看来他还是比较相信JQ的。不过我心里还是有很多担心,不过也没关系,就算是坑,

也得自己去跳跳才知道,况且也肯定会有收获的,不被坑,怎么知道哪里坑?

第一天我花时间看了一下API,第二天就让我开始写页面了。一直对于jqmobile的API不满意,感觉始终不全,我查文档得在三个地方查:

W3C.cc、官方API和下载框架自带的demo,感觉自带的demo要全面一点,不过这三个加起来始终还是不全。

jqmobile虽然大,但确实也比较全,几乎自己不用写样式。对于我现在这个时间急的项目,其实还挺合适。

因为它有很多结构定的比较死,比如:listview,当时我也真是头疼,需要往里面添加东西怎么都不合适,甚至让我觉得这果然是个坑。

冷静下来,还是得仔细看它的源码,最后利用css优先级,自己扩展代码,解决了这个问题。

如下:我把listview的两列结构,添加了一列变成3列了,并覆盖了它的图标替换成我想要的复选框。

这里本身是总结,就不做具体代码展示了,看下节点吧:

  <ul data-role="listview" >
<li data-role="list-divider" data-theme="b">listview</li>
<li class="ui-li-has-alt ui-li-has-thumb">
<a href="" class="ui-btn-3-1 ui-btn">
<img src="{$vo.img_url}"/>
<h2>{$vo.title}</h2>
</a>
<div class="ui-btn ui-btn-3-2">
<p></p>
<h4>count</h4>
<div data-role="none" class="selectNumber-gruy">
<span id="reduceNum" class="selectNumberBtn noSelect" data-role="none">-</span>
<input id="numInput" type="text" name="num[]" class="selectNumberInput" autocomplete="off" value="1" maxlength="8" title="数量选择" data-role="none" readonly="readonly">
<span href="javascript:void(0);" id="addNum" class="selectNumberBtn" data-role="none">+</span>
</div>
</div>
<span class="ui-btn ui-btn-3-3">
<input type="checkbox" autocomplete="off" name="id[]" />
</span>
</li>
  </ul>

自定义或扩展样式是难免的,不过一定要小心可能会带来的问题,而且一定要确保没有遗漏一些细节。解决了这个问题,突然就觉得jqmobile真的挺好了。虽然它那么大。

关于jqmobile的ajax提交机制,虽然绚丽一点,但实在有点影响我的js,直接全局禁了。禁用绑定要放在JQ之后,mobile.js之前。

  
  <script type="text/javascript" src="__STATIC__/jquery.min.js"></script>
  <script>
$(document).bind("mobileinit", function() {
// global ajax stop
$.mobile.ajaxEnabled=false;
});
</script>
<script type="text/javascript" src="__JS__/jquery.mobile-1.4.2.min.js"></script>

以上这两个问题估计是我刚接触时最头疼的问题。

jqmobile的弹窗popup和面板panel,是我挺喜欢的两个东西,总之它实实在在的加快了我开发的效率,不过现在才用它两周,项目还未收尾。还没考虑到最后的优化问题,

估计到时候要把自己折磨死。

说实话,除了JQ,我一般很少用框架,插件都是自己写,而且只要是公用的要封装的插件,我都用原生JS写。目的很简单,把基础打牢一点,虽然这样并不利于一些维护和别人辨识你的代码。

我知道大量用框架是迟早的事情,但是作为新手,我还是暂时尽量自己原生实现一些功能。有兴趣可以看看我的其它博客里发表的插件。

这次算是初次使用这类框架,有很多收获:

  1.看框架源代码,能学到很多思想,结构的把控。

  2.关于css,js命名等,本身自己英语不好,看了老外的命名,纠正了自己的一些命名错误。

  3.感受到了框架开发速度的快感,不过无论如何,还是先得有较好的基础,这样才真正的谈得上快感。

  4.使用框架后,发现自己更加容易懒于去写代码,这是需要注意的问题。

  5.不管一个框架好不好,至少我又了解了一个,以后又多一个可以用来对比的框架。

好吧,今天就这么多了。有兴趣的朋友,可以私下交流哈。

【初识 JQMobile 小小总结】的更多相关文章

  1. 初识layer 快速入门

    http://layer.layui.com/hello.html 如果,你初识layer,你对她不知所措,你甚至不知如何绑定事件… 那或许你应该用秒做单位,去认识她. 开始了解 第一步:部署 下载l ...

  2. python开发第一篇:初识python

    一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为AB ...

  3. Android动画效果之初识Property Animation(属性动画)

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...

  4. 初识Hadoop

    第一部分:              初识Hadoop 一.             谁说大象不能跳舞 业务数据越来越多,用关系型数据库来存储和处理数据越来越感觉吃力,一个查询或者一个导出,要执行很长 ...

  5. python学习笔记(基础四:模块初识、pyc和PyCodeObject是什么)

    一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...

  6. 初识IOS,Label控件的应用。

    初识IOS,Label控件的应用. // // ViewController.m // Gua.test // // Created by 郭美男 on 16/5/31. // Copyright © ...

  7. UI篇(初识君面)

    我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...

  8. Python导出Excel为Lua/Json/Xml实例教程(一):初识Python

    Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...

  9. 初识SpringMvc

    初识SpringMvc springMvc简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 s ...

随机推荐

  1. STL的string和wstring

    STL有字符串处理类——stirng和wstring,但是用的时候会觉得不是很方便,因为它不能像TCHAR一样根据定义的宏在char类型字符串和wchar_t进行转换,总不能因为程序要Unicode就 ...

  2. NoteExpress 自定义参考文献输出样式

    最近在写硕士论文,样式中没有符合要求的,于是就自己来编辑下样式文件,下文是网上搜集的关于自定义参考文献的一篇教程,可以参考. 一.分隔符|和连接符*的使用 (1)连接符 * 主要作用是“建立依赖关系” ...

  3. 转:Media Player Classic - HC 源代码分析

    VC2010 编译 Media Player Classic - Home Cinema (mpc-hc) Media Player Classic - Home Cinema (mpc-hc)播放器 ...

  4. Adafruit的树莓派教程第五课:使用控制电缆

    Adafruit的树莓派教程第五课:使用控制电缆 时间 2014-05-09 01:11:20 极客范 原文 http://www.geekfan.net/9095/ 主题 Raspberry PiM ...

  5. mysql5.5 uuid做主键与int做主键的性能实测

    数据库:mysql5.5 表类型:InnoDB 数据量:100W条 第一种情况: 主键采用uuid 32位. 运行查询语句1:SELECT COUNT(id) FROM test_varchar; 运 ...

  6. Java关键字--static

    在Java中,将关键字static分为三部分进行讨论,分别为Java静态变量.Java静态方法.Java静态类 Java Static Variables Java instance variable ...

  7. 【Vegas原创】Mysql绿色版安装方法

    所谓的绿色版,就是没有installer的MySQL,完全需要靠人工来操作,好处是,重装系统后,只要再做一次本次配置,即可使用. 具体操作方法: 1,设置系统环境变量, 在Path中添加 D:\mys ...

  8. 云服务器 ECS Linux 系统盘数据转移方法

    转自:https://help.aliyun.com/knowledge_detail/41400.html 问题描述 购买云服务器 ECS Linux 服务器时,未购买数据盘,使用一段时间后,随着业 ...

  9. Oracle 11g EM安全证书问题无法访问的解决办法

    OS: Windows Server 2012 Oracle: 11g R2 上一篇 Oracle 11g EM删除重建的方法 通过命令的方式重建了EM,启动也成功 emctl status dbco ...

  10. 入手Cubieboard2之制作最小Linux系统

    前言 昨天终于入手了一块Cubieboard2板子,今年4月入职从事的就是与之相关的工作,因此趁现在有时间就好好熟悉一下. 一.主机环境 1.PC主机WIN 7旗舰版 1.虚拟机VM7.0 2.ubu ...