xuexiaodong2009的专栏

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS Grid System

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

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

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

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

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