Jquery Mobile开发和试用

shmilyyu · 发表于 2011-8-26 09:33

时下，基于HTML5......
手机能跑JS吗？......
lirong1978......
可以结合PhoneG......
lz分享下源码......
兄弟能否把你的代码......
LZ分享下代码吧！c......
caojianwei......
共享下源码啊......
哦抱歉楼上的各位兄弟......

时下，基于HTML5及相关规范族的应用会被应用到各种设备中，从Google的Chrome到Apple的iOS，甚至于桌面系统的老大微软都基于这个框架开发应用。而要自己从头开发一个基于HTML的应用，又支持各种设备的触摸屏和多点技术，是非常困难的。因此 Jquery推出的界面套件Jquery Mobile就显得非常令人期待。

jquerymobile正在持续开发中，目前的版本是1.0 Alpha2 因为是Alpha系列版本，变化还很剧烈。但我已经做了个小小的软件了，效果很不错

接下来谈谈开发的体会：

1 熟悉HTML的话在技术上是没有门槛的。

2 Jquery Mobile是非侵入式框架。就是说基本的功能元素是纯的HTML。没有Jquery Mobile也不影响使用

3 要组织好应用功能，一个页面一项功能。并且设计好页面过渡，尽量不产生太复杂的页面过渡，以免踩雷

大小: 21.4 KB

大小: 17.7 KB

大小: 22.1 KB

大小: 22.2 KB

大小: 23.7 KB
查看图片附件

天上智喜 · 发表于 2011-8-26 09:33

手机能跑JS吗？

shmilyyu · 发表于 2011-8-26 09:33

lirong1978 写道
手机能跑JS吗？

在目前大多数手机是没法跑的，非智能机是免谈，即便是智能机也是特定的一些。

还好的是android和iphone全系列是可以跑这个的

大小: 84.3 KB
查看图片附件

木已 · 发表于 2011-8-26 09:33

可以结合PhoneGap使用

有烟没火 · 发表于 2011-8-26 09:33

lz分享下源码

ksdal · 发表于 2011-8-26 09:34

兄弟
能否把你的代码发给我一份谢谢！
我的邮箱115092615@qq.com
感谢了

gz-vps · 发表于 2011-8-26 09:34

LZ分享下代码吧！c.j.w_521@163.com

愚人 · 发表于 2011-8-26 09:34

caojianwei
楼上兄弟留个你的QQ我们交流下可以不？
我qq上面留了。
谢谢！

江波 · 发表于 2011-8-26 09:34

共享下源码啊

月上萧萧 · 发表于 2011-8-26 09:34

哦抱歉楼上的各位兄弟，最近没回这个帖子

代码当然是开源的了，全部源码在
http://farserver.googlecode.com/svn/trunk/applications/HappyMoney/

但是因为后台技术上是基于farserver开发的，即服务器端js  + ftl模板，

如果有兴趣了解farserver相关技术就和我联系
可以在 http://www.g-qu.net注册试用这个应用

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>聪明小管家</title>

<#if request.getAgent().isMozilla5()>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</#if>
</head>
<body>

<div data-role="page">

<div data-role="header" data-theme="c">
      <a href="../about.html" data-icon="star" data-transition="slideup">关于</a>
      <h1>聪明小管家</h1>
</div>
<div data-role="content">

      <div data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button">近3天:<font color="red">${model.threeday}</font></a>
            <a href="#" data-role="button">本月：<font color="red">${model.month}</font></a>
      </div>
      <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
         <li data-role="list-divider">操作列表</li>
         <li><a href="../service/outgoings.gs">支出</a></li>
         <li><a href="../service/categories.gs">分类及预算</a></li>
         <li><a href="../service/summaries.gs">统计信息 </a></li>
      </ul>
</div>

<div data-role="footer" data-theme="c">
      <h4>© 2010  G-QU.NET</h4>
</div>
</div>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>聪明小管家</title>

<#if request.getAgent().isMozilla5()>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</#if>
</head>
<body>

<div data-role="page">

<div data-role="header" data-theme="c">
<a href="../about.html" data-icon="star" data-transition="slideup">关于</a>
<h1>聪明小管家</h1>
</div>
<div data-role="content">

<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">近3天:<font color="red">${model.threeday}</font></a>
<a href="#" data-role="button">本月：<font color="red">${model.month}</font></a>
</div>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">操作列表</li>
<li><a href="../service/outgoings.gs">支出</a></li>
<li><a href="../service/categories.gs">分类及预算</a></li>
<li><a href="../service/summaries.gs">统计信息 </a></li>
</ul>
</div>

<div data-role="footer" data-theme="c">
<h4>© 2010  G-QU.NET</h4>
</div>
</div>

</body>
</html>

帐号		自动登录	找回密码
密码			成为会员