【初识 JQMobile 小小总结】

作为一个前端新手,之前还没有接触过手机端的项目。两周前项目经理告诉我要做手机端,让我用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.不管一个框架好不好,至少我又了解了一个,以后又多一个可以用来对比的框架。

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

时间: 2024-10-19 19:37:36

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

第00次作业:初识python语言 and 我对python的期待

初识python 首次被python吸引是在第一次理论课上,老师用几行代码实现"延时打开网页"的时候,感觉很厉害的样子,之后,便想去了解它,掌握它,应用它. 第一次运行python语言程序,真的是有点手忙脚乱,运行不成功,然后出现了一串串看不懂的错误提示,不知道从何开始着手去解决,后来问了同学,原来是缺少了一对括号.慢慢地开始学着自己去理解老师给的代码,改写里面的数字,查看数字改变后的结果,每一次小小收获都会使内心迸发一种小欣喜,促使着我更加深入的去学习这门语言. 我对python的期

初识layer 快速入门

http://layer.layui.com/hello.html 如果,你初识layer,你对她不知所措,你甚至不知如何绑定事件… 那或许你应该用秒做单位,去认识她. 开始了解 第一步:部署 下载layer后,把它部署到你项目中的任何一个目录(当然,我们推荐放在前端相关目录里),你不能去挪动layer里面的文件结构,因为它们是不可拆散的组合.就像这样: 第二步:引入 亲爱的,你不必去管那些文件是干嘛的,你只需要认准一个文件:layer.js 没错,当你试图在页面呈现layer的时候,你应该这样

Python开发【Part 2】:初识Python

本节内容 Python简介 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc简介 数据类型初识 数据运算 表达式if ...else语句 表达式for 循环 break and continue 表达式while 循环 一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承. 最

初识Python,望君多多关照

在学习Python之前,我们接触过数据结构和网页制作.前者让我们学习如何把C语言运用的更加整齐规范,而后者让我们亲身学习如何运用所学,制作一个静态网页.通过这些课程的学习,让我对C语言产生了比较大的压力,以至于对编程.对这学期的Python课程都有一种如临大敌的感觉. 但是真的学习了这门课程,体会了编码过程中的一些固定运用方法和套路之后,也许过程中对这门课程隐隐约约产生了一点点朦胧的感觉,仿佛他也并没有想象中的那么困难,起码现在的学习让我认为,他可能没有C语言那么繁琐和麻烦.当然,以一个初学者的

初识数组排序!!!!

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初识数组排序</title> <!--调试成功--> <style type="text/css"> *{ padding:0; margin: 0; } li,ul{ list-style: none; } #p

初识操作系统和linux

初识操作系统和linux 1.计算机系统由硬件系统和软件系统两大部分组成:是一种能接收和存储信息,并按照存储在其内部的程序对海量数据进行自动.高速地处理,然后把处理结果输出的现代化智能电子设备. 2.世界上第一台计算机是1946年诞生在美国宾州大学. 3.冯·诺依曼体系结构:1946年数学家冯·诺依曼于提出计算机硬件系统由运算器.控制器.存储器.输入设备.输出设备.摩根定律:当价格不变时,集成电路上可容纳的元器件的数目,约每隔18-24个月便会增加一倍,性能也将提升一倍.现在计算机技术进本很难遵

JAVA 初识类加载机制 第13节

JAVA 初识类加载机制 第13节 从这章开始,我们就进入虚拟机类加载机制的学习了.那么什么是类加载呢?当我们写完一个Java类的时候,并不是直接就可以运行的,它还要编译成.class文件,再由虚拟机解释给当前的操作系统去执行.这些过程都是我们看不见的,我们能看见的也就是一个.class文件.既然虚拟机要解释这些.class文件给当前的操作系统听,那么他怎么获得这些.class文件呢?虚拟机获得这些.class文件的过程就是类加载了. 所以,总结来说就是:虚拟机将.class文件从磁盘或者其他地

初识React

原文地址:北云软件-初识React 专注于UI 在MVC分层设计模式中,react常被拿来实现视图层(V).React不依赖于技术栈的其他部分,因此可以方便的在现有项目中尝试用它来实现一个小特性. 虚拟DOM React从DOM中抽象出来,给出一种更简洁的编程模型,且性能表现更好.能够通过NodeJS实现服务端渲染,通过React Native开发原生app. 数据流React实现单向.响应式数据流,减少boilerplate且比传统数据绑定更容易理解. 简洁的组件React的组件都实现了一个r

泛型的几种类型以及初识webform

今天学习的可以分为两类吧,但是学习的都是比较抽象的,不太容易掌握吧.首先我们大部分时间学习了泛型,泛型的委托,泛型接口以及枚举器,迭代器,扩展方法:最后简单的认识了webform,实现了一个简单的功能. 一.泛型 定义:泛型(generic)可以软糖多个类型共享一组代码,泛型允许我们声明类型参数化.可以用不同的类型进行实例化,说白了,就是可以用类型占位符,创建具体类型致命的真实概念.C#中提供了五种泛型,类,结构,接口,委托和方法.下面举例说明可能更容易理解, class MyStack<T>