孟祥月的专栏

最近在公司做一个移动客户端，混合应用模式开发，使用的Jquerymobile，自己对jquerymobile不是很熟悉，利用空闲的时间从头开始学习jquerymobile。希望通过自己的努力，和记录能够使自己对于jquerymobile有一定的了解。花了几分钟写了一个jquerymobile的最简单的页面，学习每个技术都是先写hello XX，所以我这次第一次写的是hello jquerymo

在开发的过程中，经常会用到表单进行交互，所以是比较重要的。今天就开始一点有点介绍吧。对于我发表的文章，都是比较肤浅的，属于入门性的东西，如果你看着感觉在浪费时间，那么请不要拍砖，你去官网上看就可以了。在开发的过程中，我们经常会用到的就是登录，开始就先写一个页面介绍一下基础：Form Example 1 Form Demo

明天就开始上班了，回家的这些天家里没有网，另外在家也没有心思写博客，所以就没写，回来继续。在平时的开发中难免会用到单选和复选按钮，所以简单的介绍一下这两个，首先看一段代码：Form Example 3 Form Demo 性别： 男 女

简单介绍一下select menu，对于一个做网页开发的人来说，这个应该就是最简单的了，所以我也不多说了，为了保证我自己以后需要的时候方便查找，我还是简单的写一下，将来方便.代码如下：Form Example 6 Form Demo Trip Setup: Location Home Wo

今天介绍一下搜索框、滑动按钮(Slider)、开关(Flip toggle switch)，我写的东西都是比较简单的，所以还需要读者认真的去研究官方的API。首先给一个搜索框的代码：Form Example 8 Form Demo 姓名: 效果如下：搜

在开发的过程中，我们可能需要使用到模态的对话框，在jquerymobile中这个实现很简单，只需要给一个普通的链接添加data-rel="dialog"这样的属性就可以了。下面给出一个例子代码：Dialog Test Dialog Test A Dialog (dialog) The Dialog Thi

在jquerymobile中我们如果使用网格去布局页面，jqm中提供了比较简单的网格布局。只要使用简单的CSS类就可以了。下面看一个例子代码：Grid Test Grid Test 测试 巩固完善基本药物制度和基层运行新机制是“十二五”期间深化医药卫生体制改革的重点，是实现2020年人人享有基本医

可能我们在开发中遇到过这样的问题，我们只是看到一个题目或者简单的介绍，然后一点击会在下面展开对应的详细的内容。在jqm中实现这个效果很简单。下面给出一段例子代码：Collapsible Content - 2 Collapsible Test First Hello World...

data-role参数表：page        页面容器，其内部的mobile元素将会继承这个容器上所设置的属性 header     页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素footer       页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素content     页面内容容器，这是一个很宽容的容器，内部可以包含标

jquerymobile提供了很多的默认配置，jquerymobile会在执行到增强页面元素的时候马上执行它，远早于document.ready事件，这些默认的配置符合大部分情形，对于开发者来说也很容易去修改这些默认的配置。当Jquery Mobile开始执行时，他就会在document对象上触发mobileinit 事件，所以你可以绑定别的行为来覆盖默认配置。代码：$(document)

jquerymobile为我们提供了一些编程中会使用到的方法，比如页面切换、url的处理等等。我看了一下jquerymobile的各个版本的api提供的方法也不是完全相同，我只是介绍几个常用的，具体的还请参看jquerymobile的api。页面切换：jQuery.mobile.changePage( to [, options ] )通过程序跳转一个页面到另一个页面参数to(

在开发的时候如果list过长的话，在其中查找特定的一项是比较麻烦的，jquerymobile为我们直接提供了搜索的功能。我们就可以直接使用其功能查找我们想要的结果。为了实现这个功能我们只需要在ul中添加data-filter="true"，这样jquerymobile就会自动添加一个过滤的搜索框，并且实现搜索功能了。下面给出一个例子代码：List Divider Example

这个插件的名字elevatezoom，网址为http://www.elevateweb.co.uk/image-zoom，在github上的项目首页为https://github.com/elevateweb/elevatezoom，建议去github下载，这个网速比较快。实现这个效果你需要准备两张图片，一张小的，一张大用于鼠标经过时候显示。然后我们只要为img标签添加data-zoom-im

在开发的过程中我们会用到list显示一个列表，或者其他的东西。在普通的html中我们可以使用如下代码： Raymond Camden Scott Stroz Todd Sharp Dave Ferguson这样能创建一个默认的列表，然后我们使用CSS修改为自己想要的样式。在jquerymobile中我们达到同样的样式只需要为其添加data-role="content"。修改后

在jquerymobile中我们可以将多个页面写到同一个html中，只要我们按照jquerymobile的要求加上对应的属性，jquerymobile会为我们将他们转变成几个分开的页面，每次显示的时候默认只会显示第一个。下面先看代码然后再解释：data-role="page" header this is home

使用jquerymobile的时候有时候我们会在同一个页面中写多个页面，但是在切换的时候，在浏览器显示的title总是同一个。我们需要不同的页面显示不同的title，这时候我们可以在data-role后面添加data-title属性，设置自己需要的title内容。下面一个例子代码： Multi Page Example (2) Welcome Welcom

今天想了一下，写东西就要用最简单的语言，讲清楚你想表达的就可以了，最后我认为在代码中添加注释，最后配以简单说明就可以了。扯了两句，下面写今天的内容。在jquerymobile页面中，一般都会有一个header，在header一般我们会添加一两个按钮，这时候我们就可以在header中添加两个a标签，jquerymobile会自动将其的外观增强为按钮，下面看一段代码：Header Exa

使用jquerymobile的时候，我们新进入一个页面可能需要添加一个返回按钮，用户返回到上一个页面，我们可以使用上一篇文章中的方法，在Header中添加返回上一个页面的链接，但是这样有一点不好，如果这个页面有多个入口（即可以从多个页面跳入本页面），那么我们这个返回就得做判断了。在这种情况下我们可以使用jquerymobile的data-add-back-btn属性，并将其值设为true。这样jq

在开发的过程中我们开发的页面可能会非常的长，我们在页面的两端放置了header和footer。这样的页面当我们滚动的时候，header和footer会随着滚动而滚到屏幕外，这时候我们如果想操做header和footer必须再滚动回去。jquerymobile为我们考虑了这种情况，在这种情况下我们可以点击屏幕，然后消失的header和footer就会出现，再次点击的时候就又会消失。如果我们正在文章的

在项目中，我们一般使用list显示一个列表，如果这个列表还有子项的时候，有时候我们需要在上面加上子项的数目，这时候我们就可以使用jquerymobile提供的CSS类中的ui-li-count类实现这样的效果。一段例子代码如下：Count Bubble Example My Header Cookies Eaten A 9 B 4

很久没有写博客了，最近一段时间懒了，嘿嘿。今天介绍一下inset list和list diveder。在上篇文章中介绍了list，但是那个list是最基本，并不是太美观。我们可以使用jquerymobile的data-inset属性让其变得美观一下。代码如下：Inset List Example My Header 1 2 3

在开发的过程中，我们经常会遇到在页面的底部有一排按钮，我们可以根据这些按钮切换页面，或者执行一些动作。在jquerymobile中我们可以在footer和header上添加这样的导航。下面看一个例子代码：data-role="page" Home Home Credits Contact Th

有时候我们需要在list中的每一项上添加上缩略图，这时候我们就可以直接插入一个img标签，jquerymobile会为我们自动渲染成带缩略图的。下面看一个例子代码：Thumbnail Example My Header Raymond Camden Scott Stroz Todd Sharp Dave Ferguso

在开发的过程中我们需要在列表上做一些操做，这时候我们就可以在列表的结尾，添加一些可操作的按钮。jquerymobile为我们提供方便的方式实现这样的功能，只要我们在ul中添加data-split-icon属性就可以了。这个属性的可选值在 jquerymobile常用data属性这篇文章中列出了一部分。下面给一个例子代码：List Divider Example

jquerymobile提供了许多事件，具体的请看api，下面我找的一篇文章，基本介绍了常用的一些事件。jQuery Mobile提供了一些依赖于本地事件的自定义事件以用来创建一些有用的hooks方便开发. 要注意这些事件使用了各种已存在的触摸， 鼠标和窗口事件，你可以通过使用live() 或者 bind()将他们绑定到其他的jQuery事件上.触摸事件tap在快速完整的一次触