Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar"> <header data-role="header"> <h1>Bar</h1> </header> <!-- /header --> <div role="main" class=…
jQuery Mobile 学习系列 http://blog.csdn.net/bao990423420/article/details/13995021…
运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背景变色 $(document).ready(function(){ var odd_color="#ddd";//奇数行 颜色 var even_color="#fff";//偶数行 颜色 var hover_color="#d5f4fe"; //鼠…
这里是本人学习jQuery Mobile的过程,主要用于记录,过程中有不对的地方或不严谨的地方,欢予以指出纠正,非常感谢! 1.首先是下载安装以下文件: [Opera Mobile Emulator] http://www.opera.com/zh-cn/developer/mobile-emulator.在PC机上模拟移动设备,但素后来发现Myeclipse2014貌似有带模拟器. [Myeclipse2014] http://pan.baidu.com/s/1gd4PE3D 密码:lv3v…
1.模拟器,IOS:XCODE GENYMOTION  ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role=page 代表一个页面 data-position=fixed 代表固定工具栏 data-transition=slide 跳转动画效果 data-rel=dialog 弹窗口 button:A <button>  B <input type="button" />  C <a class=&qu…
经过一个多月的边学习边练手,学会了Android基于Web开发的毛皮,其实开发过程中用Android原生API不是很多,更多的是HTML/Javascript/Css. 个人觉得基于WebView的Jquery Mobile开发有以下优点: 1.对于刚从Java Web转型过来的同学非常适合,只要懂得HTML开发就可以上手做事. 2.jquerymobile优秀的地方是将页面元素渲染得非常漂亮,极大减少开发对UI的依赖. 3.SQLite非常轻量,也提供了丰富的调用接口,通过程序和版本控制数据库…
本节开始,进行代码的实战练习.我的这个App是管理保险客户信息的,数据采用Sqlite存储在本地手机上,第一次使用需要先登记自己的个人信息,这个功能非常简单,也无关紧要,我是拿这个练手,方便做后面复杂的功能. 效果图 废话不多说,先看看个人信息的效果. 主页右上角一个[设置]按钮,点击按钮会弹出对话框,目前只有一个[我的信息]用于查看个人信息. 点击弹出框上的[我的信息],这时会进行个人信息详细列表,点击[返回]按钮会回到主页,而点击[修改]按钮会跳转到个人信息修改页面. 下图是从[我的信息]页…
本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5大家早就不陌生了,HTML最新版本,提供了很多富客户端功能支持,但是在台式系统因为受到某些浏览器限制发展缓慢,而移动设备因为没有旧包袱,所有厂家都在向HTML5靠齐,因此移动设备(特别是最新的设备)的浏览器对HTML5支持度非常高.所以大多数智能移动设备上都能跑HTML5应用. 关于HTML5,并不…
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) 2.需要使用数据属性,数据属性是HTML5引入的,以data-开头 比如data-role可以用于定义页眉,页脚,内容,页面等 data-role="page" 是在浏览器中显示的页面. data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者…
首先依HTML5方式加载,DOCTYPE表示格式为HTML5:主要适用于iPhone.Android等,viewport表示适用于移动终端的适中显示,initial-scale缩放比例在1.0~1.3之间比较合适,需要载入的文件有三个:jquery.js jquery.mobile.js jquery.mobile.css <!DOCTYPE html> <html> <head> <title>Page Title</title> <me…
<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>index.html</title><!--初始化显示,可视窗宽度与设备宽度一致:不允许缩放--> <meta name="viewport" content="width=device-width,init…
最近学习移动开发,接触到了phonegap,然后又需要开始学习jquery mobile.掌握两者是开发轻应用的前提 在学习jquery mobile中,遇到了许多问题让初学者很是头疼,无意间找到这个博客http://www.wglong.com/main/index,很是受用. 感谢的同时也在自己的博客留点学习心得. 1 页面闪屏让体验很不爽 //解决闪屏问题$.mobile.transitionFallbacks.slide = "none"; 2 有些时候操作很迟缓 //解决按钮…
其实这个App基本功能早已做完,并且交给老婆试用去了.但由于最近项目要保证稳定,所以持续加班,没有时间写最后一点内容,本节也就简单截图做个说明,不详细叙述实现方式.我会把代码上传到最后一章中,有兴趣的同学可以参考一下. 主页第三个功能[投保人提醒]就是提醒入口 进入该页面时会像后台发送请求,通过SQL和代码运算获取即将到期的保单信息 并提供打电话和发短信功能(没有留电话号码则不显示这两个链接) 通过右上角[设置]可以设置短信发送模板 当用户点击发短信时会弹出提示框询问使用哪条短信模板,如下图所示…
[保险人管理]是这个APP最重要的功能,用于保存保险客户的数据,给后面的功能提供数据支撑. 简单说说[保险人管理]功能:主要就是增.删.改.查四个功能,在新增和修改的时候不仅可以保存保险人的姓名.身份证等基本信息,还可以保存保险人购买的保险信息(保险名称.保险公司.保险期限等).(上传图片文件功能还没实现,这个正在想办法) 数据库设计 所有数据库初始化语句还是在DBHelper的onUpgrade中完成. 主表是insurer_info(保险人基本信息).从表insurances(保险人保单信息…
前两章分别对开发环境和Jquery Mobile基础知识进行了介绍,本章介绍创建一个Android项目,并使用WebView控件显示HTML数据. 首先创建一个Android Application项目,这个在第一节已经讲过,不再赘述. 然后以图的形式介绍下Android项目几个关键文件的功能. 首先是AndroidManifest.xml文件,这个文件算是最重要的XML配置文件了, 比如该项目的名称,该项目要开通哪些权限,该项目用到了哪些核心Activity类型,哪个是默认启动项. 我的And…
最近在研究学习基于Android的移动应用开发,准备给家里人做一个应用程序用用.向公司手机移动团队咨询了下,觉得使用Android的WebView上手最快,因为WebView等于是一个内置浏览器,可以基于html页面开发,不用去学习Android自带的七七八八的控件.然后加上Jquery mobile的样式渲染和事件等,就能非常方便的做动态应用了. 从现在起,往后一段时间,我打算写一个实战系列,介绍开发这款手机应用学习到的技术知识以及遇到的问题.希望这个系列能对后面的新人有所帮助,也希望老手们对…
本次主讲人是王思伦啦啦啦~ 框架特性 jQuery Mobile 以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框架可以让你为所有流行的移动平台设计一个高度定制和品牌化的 Web 应用程序,而不必为每个移动设备编写独特的应用程序或操作系统. jQuery Mobile 目前支持的移动平台有苹果公司的 iOS(iPhone,ipad,iPod Touch),Android,BlackBerry OS 6.0,惠普…
关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场和参数传递的时候遇到各种奇怪的问题,最后几乎打算删掉html,改用Android原生layout来做程序了. 不得不说,Jquery mobile给我们这种做Java Web项目的人带来了很多新鲜的玩意儿,虽然多多少少有些不适应,但是我们得被动接受,久而久之就习惯. 前面一对废话结束,下面正式开始本…
<!doctype html> <html lang="zh-hans"> <head> <meta charset="UTF-8"> <title>jQuery Mobile教程-基础篇-页面基本结构</title> <!-- 设置meta viewport start --> <meta name="viewport" content="wid…
关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场和参数传递的时候遇到各种奇怪的问题,最后几乎打算删掉html,改用Android原生layout来做程序了. 不得不说,Jquery mobile给我们这种做Java Web项目的人带来了很多新鲜的玩意儿,虽然多多少少有些不适应,但是我们得被动接受,久而久之就习惯. 前面一堆废话结束,下面正式开始本…
jquery 的 ajax 是非常方便的一个函数,记录一下 $.ajax 生成的 http 报文 一.使用 data 传递参数: $.ajax({ url : "webrs/test/addBook", type : "POST", data:{ id : "xx", name : "中", price : "xx" }, contentType: "text/plain; charset=utf…
先看一下有向右箭头的截图吧 这个listview第二个项目,就有向右的箭头,如果单纯显示具体数据,没有扩展显示的内容,那么这个向右的箭头就是多余的,在这种情况下,最好是去掉这个向右箭头,程序中已经在第一项中实现了,实现方法就是在显示具体内容出,不要加超级链接,如果加入超级链接,就会出现向右箭头!图中listview处的全部源码: <ul data-role="listview" data-inset="true"> <!--不想显示向右箭头就不要加…
SQLite是轻量级的.嵌入式的.关系型数据库,目前已经在iPhone.Android等手机系统中使用,SQLite可移植性好,很容易使用,很小,高效而且可靠. 因为Android已经集成了SQLite,所以开发人员无需引入任何JAR包,而且Android也针对SQLite封装了专属的API,调用起来非常快捷方便. 我也是第一次接触SQLite,感受到它的一些不同之处,作为一门简易实用的数据库,它的学习周期其实蛮短的.对于懂关系型数据库的人来说,使用SQLite应该是得心应手的. Android…
开发环境是老生常谈的问题了,网上有很多关于Android环境安装的文章,我这里也就简单说明一下,不做过多分析. 想了解详细的安装说明,可以参见[百度经验] Java环境安装直接跳过,说一下Android安装,网上很多安装方法似乎都过时了,到目前(2014年3月)为止,Android官网最新的安装文件包含了Android的SDK和Eclipse开发工具,所以是非常方便的. SDK 直接到Android官网下载最新的Android SDK,我下载的是32位Windows文件,最终文件名格式为"adt…
head里边加入这个会让客户端元素很大...宽度都是device-width,不过比较大! <meta name="viewport" content="width=device-width;initial-scale=1;user-scalable=no;minimum-scale=1.0;maximum-scale=1.0" /> solution:把后边的设置去掉 <meta name="viewport" content…
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="…
最近一直在学习使用PhoneGap+JQuery Mobile的开发框架开发Android应用,抛开这个框架的运行效率不说,暂且将使用中遇到的问题进行一下整理. 1.JS文件引用顺序 也许在进行web开发是对这个问题并不是特别注意,但是JQuery mobile对这个特别敏感,如果顺序不对,会造成页面无法渲染,官方建议引入顺序为先引用JQuery的最新版本,然后在引用自己的JS文件,其次才是 JQuery Mobile的JS文件,最后是使用到JQuery Mobile特性的JS文件. 2.本地存…
在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更好一些. 如果需要在页面加载时显示加载器,页面加载完成之后关闭加载器,请参考另一篇文章:jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较 先看两个方法,显示和关闭,方法来自于参考:http://blog.csdn.net/z…
在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更好一些. 先看两个方法,显示和关闭,方法来自于参考:http://blog.csdn.net/zht666/article/details/8563025 <script> //显示加载器 function showLoader() { //显示加载器.for jQuery Mobile 1.2.…
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计. jQuery Mobile是一个新的项目用来添补在移动设备应…