使用jQuery Mobile开发Web App-目录

特色

写了很多篇了,怕大家找起来比较乱,整理个目录:

单选按钮为什么叫radio

单选按钮为什么叫radio呢?今天突然对这个问题有点纠结。于是google了一会,终于找到了原因。

维基百科的解释:

Etymology

Radio buttons were named after the physical buttons used on older car radios to select preset stations – when one of the buttons was pressed, other buttons would pop out, leaving the pressed button the only button in the “pushed in” position.

单选按钮使用radio来源于老式汽车收音机,这种收音机的特点是当你按下一个按钮后,其他按钮都会被弹起,也就是同时只会有一个按钮被按下。这个特点和单选按钮完全符合,而收音机在英文中是radio,所以,哈哈!

下面给大家看看老式汽车收音机长什么样:

其实对于国内网友来说,老式卡带式放音机也有这个特点,很多80后应该都用它来听过流行歌曲学过英语:

使用jQuery Mobile开发Web App-表单元素(下)

选择菜单

选择菜单基于标准的select标签,但对select的显示方式进行了优化,初始显示为一个按钮。点击按钮后,默认使用操作系统本身原生方式打开一个选择菜单,当你完成选择关闭菜单之后,选择按钮的文字会被更改为选中项的文字,效果如下:

继续阅读

使用jQuery Mobile开发Web App-表单元素(上)

表单基本要点

自动初始化表单元素

默认情况下,框架会自动将表单元素增强成拇指友好的输入组件。

阻止自动化初始表单

如果想要原生的表单元素效果,那就给表单元素增加一个属性:data-role=”none”,如:

<label for="foo">
<select name="foo" id="foo"  data-role="none">
	<option value="a" >A</option>
	<option value="b" >B</option>
	<option value="c" >C</option>
</select>

动态表单布局

框架中所有的表单元素都被设计为灵活宽度以便更好地展现在移动设备上。

如果屏幕宽度比较小(小于480px),label标签就被渲染成一个块状元素,位于每个表单元素的上方,这样以便节省水平空间。

在较宽的屏幕上,label和表单元素就会被放置在同一行,形成两列布局。

继续阅读

再忆《公主坟》-王子和公主的爱情

速读《公主坟》-农村80后的奋斗缩影,不是我写过的最好的读书笔记,不过读者却很多,反响也不错。我想这是因为《公主坟》撞到了80后的腰,打动了80后的心。很多读者应该和我一样,在读《公主坟》的过程,将书中的人物故事情节场景和自己这些年经历的一切有意无意的掺杂混合在一起,就好像重新回忆一场自己当主角的电影,内心升腾起一股难以名状五味杂陈的复杂情绪,夹杂着对过去的唏嘘对现在的迷茫和对对未来的恐慌。我的读书笔记正好是这情绪的出口,给那些同样经历的80后一些小小的温暖和安慰。

有多少个读者,就有多少了哈姆雷特。有多少个读者,就有多少个张五毛和单姗。从这个意义上说,《公主坟》是一部好作品,好到让我在周末闲暇静坐时脑海里会不时闪现属于张五毛也属于你我的那些场景,让人回味。而在《公主坟》的整个故事中,最让我记忆深刻回味良久的,是张五毛和单姗的爱情。这爱情始于公主坟,也终于公主坟。

“我曾在那里煞有介事地思考过人生大事,我生命中唯一的爱情之花,也是在那白骨皑皑的陵园里破土重生的。”

张五毛是个害羞的人,他在大学里就暗恋单姗但从未开口。这一面是因为农村孩子的内向懦弱,另一面则是一个基于经济学的明智选择,因为农村穷小子没有资本谈恋爱。在一个经济社会里你没有电影玫瑰和礼物,很多人就会认为你没有真心和浪漫。我的一个同学说过,两个农村大学生谈恋爱是抱团取暖,我非常认同。你能在最青春年少的时候用自己的魅力找到一个伴侣,用精神愉悦维护相互的关系,并且相互温暖相互鼓励,你就是一个幸运的人。

张五毛是个幸运的人,在他混的穷山恶水一毛不值的时候,那个他暗恋同时也暗恋他的女孩来北京找他,这在大学毕业后更为可贵。两个身在异乡漂泊不定的年轻人,在冰冷的城市里相互依偎,靠爱情和鼓励取暖,靠双手和汗水打拼,只为这爱情有一个美好的结局。他对她呵护备至,她对他不嫌不弃,他为她每天买两条最爱的小鲫鱼,她为他炖排骨洗衣服,他太穷只能用胸膛给她御寒,她没工作只能摆地摊渡过难关…在残酷的现实面前,这爱情显得愈发脆弱和珍贵。

她是上帝赐给他的公主,只是没有水晶鞋;他是上帝赐给她的王子,只是没有自己的王国。

爱情里不只有甜蜜,还有陷阱、磨难、痛苦和伤害。纯洁的爱情之所以脆弱,就是因为信任往往不堪一击;贫穷的爱情之所以珍贵,就是因为金钱往往战无不利。同学会、生病、老家、房子、车子、职位…任何一个简单的词都能割裂爱情,爱情却只能割裂你的心。当经历过那么多艰辛和不易的张五毛和单姗,重新找回到久违的幸福的那一刻,我的心里一边流泪一边祈祷,让故事就在此刻停滞,让他们的幸福永远继续。

“很多年后的春天,我牵着小丫丫走上了那座荒凉的山头。依旧没有树木,但是整个山头郁郁葱葱,野花盛开。”

城市里牢笼比绿树多,尾气比空气多,买卖比爱情多,欲望比真心多。城市是繁华万象,同时也是一个巨大的坟墓,只要你不珍惜,它能埋葬任何东西。张五毛们和单姗们却要在这城市里为他们的爱情拼一个美好的前程,这是一个巨大的矛盾。在这里混迹这么多年,你应该明白,可怕的不是现实是无能,可恨的不是强权是陷害,可恶的不是小三是肉欲,可悲的不是穷困是迷茫。你应该珍惜机会、珍惜金钱、珍惜职位、珍惜人情、珍惜朋友,但你最应该的珍惜的,是你身边的公主和你们的王国。

不要等到你头发稀疏才对公主说“我爱你”,不要等到你富可敌国才给公主买水晶鞋,不要等到你能指挥千军万马才建立王国,迎娶公主。时间不等人,岁月不饶人。每天给你的公主说“我爱你”,每年给你的公主亲手做一双水晶鞋,抓住最幸福的时刻和公主约定终生,建立王国。

在开往未来的列车上,王子和公主在一起;在开满鲜花的坟墓里,王子和公主也在一起。

 

另:《公主坟》这个书名一语双关,三个字就概括了整个故事,但也注定了悲伤的结局。《公主坟》的封面设计不好,下面这张图更符合:

使用jQuery Mobile开发Web App-折叠面板

创建折叠面板

要创建一个折叠面板,首先创建一个容器,加入data-role=”collapsible”属性。然后在这个容器中,加入任意标题元素(h1-h6)。框架会自动将该标题转变成一个左边有加号图标的可点击的标题栏。

紧随标题栏之后,放置任何html内容。框架会自动用一个容器将其包裹,然后当标题栏点击时该部分内容隐藏或显示。代码如下:

<div data-role="collapsible">
  <h3>I'm a header</h3>
  <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div>

继续阅读

速读《公主坟》-农村80后的奋斗缩影

文学写作对于一个国家和民族重要吗?也许不重要。但是,一代人,如果没有了优雅而深沉的文字,也就没有了青春的记忆和庄严的背影。–张五毛

80后不是最痛苦的一代,也不是最懒的一代,更不是没有责任感的一代。人类的进化如此之慢,80后在很多方面与长辈们并无太大区别,只是在生活的桎梏下,少了一些情趣而已。–张五毛

在这个拼命挣钱、微博横行、玄幻穿越的时代,已经没有太多人能静心来读一首诗、一篇美文或者一篇务虚的小说了。我也不例外,很久没读过文史类的书籍了。看《公主坟》完全是个意外,无聊时用手机上网,瞟了一眼、两眼之后,我被顺畅的行文拉进去了,一口气看到在线版连载结束,立马在当当下单,又花了3个小时看完后半部分。

坦白说,《公主坟》不经典,不伟大,不深刻,不惊艳,但吸引我的就是它的真实、平直和粗糙。任何农村的80后,都能在其中看到自己的身影,看到自己曾经梦想的绚烂五彩的而如今越来越现实平淡的不长不短的成人生活。农村80后大多头顶着家人的殷切致死的期望长大,眼看着父母的艰辛劳作和捉襟见肘,肩负着光宗耀祖打赢翻身仗的重担,心里装满了对美好的向往和无往不利的幼稚。任何一个能走出大山走出高原走出河沟的80后,身上都带着土地的粗糙和气味,身后都有一段忍饥挨饿埋头苦读考上大学的光辉历程,他们都是父母、朋友、乡村、县城的骄傲。这骄傲在进入大学步入社会后可能都不值一提,但城市80后可能永远无法理解农村在农村80后心中的位置和情结。

书中详细描述了一对农村80后情侣大学毕业后的奋斗过程,这是该书的精华,平直流畅,语不惊人,真实刺人。农村80后有集体城市强迫症,这是从小教育和现实逼迫的结果。从记事起就会被告知好好读书做个城里人,当官发财,永不要做面朝黄土背朝天的农民。这种力量之大,大到在外遍体鳞伤也不后退,混到风餐露宿也不回头,偶尔有回去的也是去城镇做公务员,绝不会再回到土地。大学生、出息、大官、面子、工作…,这些脆弱的词语就是隔在农村和城市之间一道又一道坚固的墙。

城市里有霓虹闪烁、有灯红酒绿、有高楼大厦、城市里有世界企业、有民营公司、有满街商铺、但和农村80后没有一毛钱关系,你有的只是一双手、一个大脑和两条腿;城市里还有关系网、权利网、生意网,你有的最多也就一张渔网。站在这片拥挤不堪、妖孽丛生的水泥森里里,你似乎只有一条路,一条赤膊上阵、拼尽全力、不知所终的血路。

在书中,农村80后能看到自己的过去、现在和将来,一切像是安排好的一场考试,一样的考场,一样的题目,不同的只是这考题不仅仅光靠你的努力学习就能完成。无论如何,最终的成功与否还是看数字,排名次,没人关心你累不累,爽不爽。我们看似天天在努力奋斗,买房买车买关系,其实还是和小学一样天天应付考试罢了。

成千上万的80后过着近乎一模一样的生活,而此刻的你就能看到自己将来的生活模样,这不仅仅是一件没创意的事情,更是一个可悲的事情。农村80后和父辈的最大不同是他们生活在一个能为自己的精彩生命当家做主的时代,但他们不敢轻举妄动。

农村80后无法逃避自己的命运,但我觉得我们可以选择自己的态度,保持自己的最后一点点淳朴,坚守自己的最后一点点本性,创造一点点属于自己的不同人生。珍惜那些回忆中的自己,珍爱陪你啃馒头的女孩,珍视老家里的父母亲朋。除此之外,给自己一点点时间和空间,做一点点自己的私事,让自己的生命中有那么一点点多彩的点缀,虽然渺小,却能暖心,让《公主坟》有无数个一点点不同的结局。

祝所有80后好运!

《公主坟》会作为80后的备忘录,永远留在我的书架,谢谢张五毛。

使用jQuery Mobile开发Web App-多列布局网格

由于移动设备屏幕宽度较小,所以一般不建议使用多列布局。但有时你可能需要并排放置一些元素(如按钮之类的)。

jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局方法。共提供了五种布局方式,分别是:ui-gird-solo:单列布局,ui-gird-a:双列布局,ui-gird-b:三列布局,ui-gird-c:四列布局,ui-gird-d:五列布局。布局网格总宽度100%,完全不可见(无边框无背景),没有任何内边距或外边距,不会对网格中的内容产生任何干扰。
grid

继续阅读

2011-11-16工作日志

日志

11-14至11-16

工作内容:优化渠道系统的首页和登录页。在前端整体框架不变的情况下修改,费时费力啊。原有系统应该是由多人合作开发的,且没有前端开发规范,调试起来非常繁琐。

感想:注释和规范真的很重要,养成好习惯啊!

另:整理并消化了的知识、素材和idea才是财富,乱七八槽的堆起来只会给自己造成压力。勤整理,多思索,该整理一下自己的素材和笔记了。

jQuery Mobile更新至RC3,大幅优化性能

jQuery Mobile的一大弊病就是性能不佳,在iphone上使用尚算凑合,在配置一般的android手机上使用,那感觉就像老牛拉慢车。如果页面写的稍微复杂点,控件多一点,你就可以看到页面渲染、页面切换、css动画的慢放动作,让人伤心啊。

jQuery Mobile的开发团队一直知道这个问题,因为所有人都在抱怨。今天升级的1.0 RC3版,最主要的改进就是性能优化。

jQuery Mobile的性能优化主要包括触摸事件的响应速度、页面切换的流畅度、页面渲染速度等。1.0版本将集中优化页面渲染速度,1.1版本将优化触摸事件的响应速度和页面切换流畅度。jQuery Mobile开发团队花费数周时间对页面加载和渲染做了优化,效果比较明显,和RC2版本相比,页面渲染时间平均缩减30%-50%。

下面是两个测试实例,一个是 form gallery页面,该页面有很多表单控件,页面渲染的对比效果如下:

第二个测试使用了一个超长列表页,列表项达400个,页面渲染的对比效果如下:

jQuery Mobile疑问解答贴

整理“使用jQuery Mobile开发Web App”有段时间了,每天时间有限,更新的比较慢。看到很多朋友都是带着问题从搜索引擎直接找过来的,希望能在这里找到答案。由于我更新的比较慢,加之讲的都是基本用法,可能无法给你满意的答案或方法,所以在此专门开一个疑问解答贴。

如果你有任何与jQuery Mobile、Web App开发相关的问题,请在本文的评论中提问,或者给我发送电子邮件wyqbailey@gmail.com。

注意:我会及时更新已解答问题列表,请先仔细查看已解答问题列表,避免重复提问。

已解答问题列表

  1. lin3.wang:我想请问一下,如何实现jQuery Mobile多级树状菜单列表,如多级机构树?
    答:jQuery Mobile在开发路线图中规划了常见的tree组件,但截止目前的版本中尚未开发。你可以在http://jquerymobile.com/designs/看到效果图

    目前你可以使用折叠面板(collapsible)组件来达到相似的效果,多级机构树可以使用嵌套折叠面板,具体看这里http://www.wybai.net/?p=398

  2. uojo:你好,请问下 jquery-mobile 与 iscroll 中的 冲突问题应该如何解决? 描述:如果两者并存的话,运行的会缓慢,而且在切换到新的页面后,iscroll 又不起作用了,需要刷新下。自己认为两者在事件上有冲突。 有没有什么办法融合两者的?
    答:你好,在我使用过程中,没法发现两者之间有什么大的冲突,运行速度也不缓慢,可以很好的融合。
    关于页面切换之后不起作用,应该是因为页面切换(page组件切换)之后dom发生了改变,新界面中没有初始化iscroll对象(你之前初始化过的iscroll对象及其所在的page组件已经隐藏起来了)。所以你需要重新初始化。
    如果iscroll区域的dom频繁变化,可以在初始化时将options中的checkDOMChanges设为true,这样当dom变化时就不需要你手动刷新。
    如果没有解释清楚,还还有疑问,欢迎继续留言。