xuexiaodong2009的专栏

如何在使用jqMobi开发app中使用jquery呢？由于jqMobi本身和jquery中的很多方法都是一样的，直接添加，肯定会冲突？  但由于jqMobi的插件很少，有时又不得不使用jquery，如何处理？   官网已有方法：添加jq.appframework.js，这个是把appframework.js变成了jquery的插件，自然就不会有冲突了。下载地址 需要注意添加顺序

设计APP，由于屏幕很小，在PC网页山可以放在一体的内容，在APP中就不能放在一起了。      例如如下，项目出勤人员很多，需要弹出一个panel，然后让用户选择，如何设计呢？项目出勤panel的内容： <div id="shenqingxiangmuchuqing" title="申请项目出勤" class="panel" data-load="loadshenqi

拨打电话，按照常规思维，由于涉及到

显示效果：    红色的部分就是Badge，可以用来显示数量或者是其他的信息。  使用其实很简单，  $.ui.updateBadge("#" + id, res.Msg, "tr");  第一个参数是需要显示的标签编号，第二个参数是需要显示的文字，第三个参数是需要显示的位置。bl - bottom lefttl - top leftbr - bottom ri

在使用Scrolling开发app的过程中，遇到了很多问题，demo给的例子是下拉永远有数据的情况，而我的数据是有限的，也就是下拉一定次数后，下拉实际上就没有新数据，也就是不需要再继续下拉了。当上拉刷新数据后，才可以继续下拉。本以为只需要添加一个判断就可以了，谁知道当下拉到没有数据后，再上拉刷新，然后下拉竟然下拉不了了！！具体代码参考http://blog.csdn.net/xuexiaodo

在使用jqMobi开发app基础：Scrolling的使用，向上向下拖动，动态添加数据一文中，通过使用

使用jqMobi开发app，panel之间的跳转方式。根据当前页面的不同展现方式，主要有三种跳转方式。    1当前页面是弹出的，关闭当前页面2当前页面不是弹出的，可以使用a标签3使用 $.ui.goBack()    1当前页面是弹出的，关闭当前页面    例如登录页面因为使用了modal="true"，因此是弹出的，再登陆成功后，只需要关闭弹出窗体就可以返回到以前的页面。

研究jqMobi的demo，发现这个例子，所有的东西全在一个页面中，于是便认为使用jqMobi开发app，所有的内容都在一个HTML dom？难道真的不能分开吗？      不能像传统的网页开发那样，按照功能分成不同的HTML dom吗？由于资料很少，只有官方的demo可以参考，于是自己在思索这个问题。想不到最终却在jqeury mobile开发中找打了答案！！    jqMobi中的pa

jqMobi有一个专门处理select的插件af.selectBox.js，感觉很简单很简单，官方文档只是简单demo,没有详细说明。   简单的列子：   OneTwoThree显示效果    由于是在浏览器中测试，有没有style="-webkit-appearance: listbox;"没发现有什么区别。  禁用需要加disabled例如：OneTw

官网上Scrolling写的很简单。但自己要使用，却得试验很多次。       例如要实现如下简单的功能：也就是动态加载数据，不管用户向上拖动还是向下拖动，都动态加载数据。   第一步自然是研究demo了。demo一开始就有很多内容。对应的脚本也很简单： var myScroller;

PC版的web程序两个两个页面之间的传值方式主要有,cookie,查询字符串,还可以通过服务端的session来交换数据.但app的传值方式呢?     由于app基本都是单页面的方式,查询字符串这种方式似乎行不通了,至少目前个人还没有见到这种例子.

PC端的web程序有很多种跳转方式，但使用jqMobi开发app页面之间如何跳转呢？　　　还可以使用传统的a标签吗？　　　分析jqMobi的demo，发现所有的页面都写在一个页面中，似乎也只能在这一个页面中跳转？　　　使用panel属性data-defer把页面分开后，如何跳转呢？　　　例如：一个列表页面list.html,单击某一条就跳转到详细信息页面。如何实现呢？

a标签，在AFUI中添加了几个很特殊的属性。          data-transition表示panel如何出现，有一定的动画效果。       例如：   data-transition="pop"   可以使用的参数有slide, up, down, flip, fade, pop,  none，默认为slide    data-persist-ajax="true

在移动app开发中会经常使用到viewport指令，  ViewPort 标记用于指定用户是否可以缩放Web页面，如果可以，那么缩放到的最大和最小缩放比例是什么。ViewPort 标记的content值是由指令及其值组成的以逗号分隔的列表。  1 width和height指令分别指定视区的逻辑宽度和高度。可以使用一个以像素为单位的数字，也可以使用一个特殊的标记符号。 width指令使用de

注销其实可以使用一个基本的a标签。  例如我把登录和注销放在了底部导航条navbar中。 基本代码： 首页 登陆 注销 关于我们 js代码：function logoutFun()

登录页面的实现，有两种方式。   一种是直接在panel中填写代码：  例如：   用户名 密码

在开发app时，会经常用到HTML5 LocalStorage 本地存储相关的资料。例如记住用户名，原来是使用cookie，现在基本都改成了LocalStorage 。   使用LocalStorage 其实很简单，localStorage.setItem(key, value );设置值，localStorage.getItem(key)读取值。    可以使用的代码：LocalMobe

在app开发中会经常使用到开关按钮。显示效果如下：  在jqMobi中实现也很简单。    实现上边的效果代码： 记住密码<label for="forgetPwd" data-on="On" data-off="Off">

在使用jqMobi开发app基础：Grid布局 中介绍了Grid布局，col2在大的屏幕上会显示为两列，col3会显示为3列，但如果屏幕小就会显示为一列，这就是响应式布局，也就是根据屏幕大小，动态改变css样式的一种布局。这种布局的关键字是@media  在af.ui.css文件中搜索media找到如下css样式：#afui .col2,#afui .col3,#afui .col1-

CSS Grid System

jqMobi中的页面布局不多，目前主要有Styled Lists，和Grid System两种布局。    Styled Lists是列表时布局，每一行只显示一条数据。     基本结构式使用ul并设置类属性为list，每一行一个标签例如： 需要显示的内容 需要显示的内容 需要显示的内容 显示效果

Side Menu作为内容左侧的导航菜单，对于内容很多的app来说很有用，可以通过滑动出现Side Menu，向右滑动出现Side Menu，向左滑动隐藏Side Menu。    Side Menu作为AF UI的一部分，并没有包含在appframework.ui.min.js中，因此为了使用 Side Menu必须包含相关插件的js。除了基础的appframework.js，appfr

panel作为最重要的ＵＩ之一，属性data-defer介绍很简单，官方介绍data-defer="filename.html" - This will load content into the panel from a remote page/url. This is useful for separating out content into different file

完成了基本的页面布局，就可以使用panel添加内容了，添加的内容在标签div id="content"> 内部。    每一个panel其实就是一个div，但类属性是panel，每一个panel在智能设备上都显示为一个页面，有点像webform中的page，或者是winform中的form。都会展示为一个页面。也就是说如果在div id="content">的内部有很多panel，每次只能显示

定义footer的方式和定义header方式基本一样，有三种方式  1定义公共的footer        也就是所有panel默认的footer，需要在div id="afui">内部，也就是和同一级的位置添加一个div，并且ID必须是navbar 例如：    home Sketch

定义头部官方说有三种，这一种是公共的，两种自定义的。我经过测试，实际上还有第四种。      1定义公共的header，    也就是所有panel默认的header，需要在div id="afui">内部，也就是和同一级的位置加一个header 标签，并且id必须是header 例如： 协同办公平台header 返回

使用App Framework UI开发app页面，作为一名初学者犯了很多错误。因此把这些错误和注意事项记录下来，但因为是初学，理解可能有一定错误。    由于页面的基本代码结构如下： 首页   前后都很简单，只有中间部分又很短需要注意的，故再次只介绍中间部分的内容。  首先需要有一个di

app开发作为一种新的趋势，在app开发中有很多中框架，而appframework作为jquery mobel版的改进版，比jquery 更快，体积跟小，而且兼容各种设备，前端采用htm5。 使用appframework开发app，其实很简单。     定义简单的app     App Framework single page