jquerymobile(jquery mobile 用于app页面还是移动端的web页面)

jquery mobile 用于app页面还是移动端的web页面

  适用于移动端的web页面。
  jQuery Mobile适用于移动端开发页面的优势:
  jQuery Mobile是目前最流行的一个移动开发的框架,文档丰富,社区活跃,有很多的UI控件供我们使用,并且提供对多页面的支持(通过Ajax方式读取内容,并提供页面切换的过渡动画)。我认为jQuery Mobile的最强大之处就在于其UI方面的支持,但这一部分恰恰不是我所需要的,它对UI的限制比较多。Sencha Touch是ExtJs的移动版,对于不熟悉ExtJs的人来说有一定的学习成本。

jquery和jQueryMobile的区别jquerymobile

jquery是一个javascript的类库,封装了一些方法,可以减少编写js代码的工作量。

jqueryMoblie是在jquery的基础上,构建的一系列适合移动设备展现的,主要面向UI的一个框架

可以说jquerymobile是在jquery基础上对移动设备支持的扩展。

jquery mobile 好用吗

好用
1. 上手迅速并支持快速迭代:在一个星期多一点的时间里,通过阅读JQuery Mobile文档以及O’Reilly出版的JQuery Mobile书籍,我完成了一个可以工作的app初步版本。在此之前我没有HTML5 / JQuery Mobile开发经验。与Android和iOS相比,使用JQuery Mobile和HTML5构建你的UI和逻辑会比在原生系统下构建快得多。
译注:原生系统:原装的操作系统,例如Android原生系统是Google发布未经修改的系统。在本文中,原生应用指直接用系统提供的API开发的程序,与JQuery Mobile开发的程序相对应。
我发现Apple的Builder接口的学习曲线十分陡峭,同样学习令人费解的Android布局系统也很耗时间。此外,要使用原生代码将一个list view连接到远程的数据源并具有漂亮的外观是十分复杂的(在Android上是ListView, 在iOS上是UITableView)我能够通过已经掌握的JavaScript和HTML/CSS知识快速地实现同样的功能,无需学习新的adapter,delegate等等抽象概念,只要编写JQuery代码就可以做到。
2.避免麻烦的应用商店审批过程以及调试、构建带来的痛苦:为手机开发应用,尤其是iOS系统的手机,最痛苦的过程莫过于通过Apple应用商店的审批。想要让一个原生应用程序发布给iOS用户,你需要等待一个相当长的过程(需要好几天,甚至可能是好几周)。不仅在第一次发布程序时要经历磨难,以后的每一次升级也是如此。这使得QA和发布流程变得复杂,还会增加额外的时间。由于JQuery Mobile应用程序仅仅是一种web应用程序,因此它继承了所有web环境的优点:当用户加载你的网站时,他们就马上“升级”到最新的版本。可以马上修复bug和添加新的特性。即使是在Android系统——应用市场的要求比起Apple环境要宽松得多,在用户不知不觉中完成产品升级也是一件很好的事情。
进一步的好处是,发布beta或测试版本会更加容易。只要告诉用户用浏览器打开你的网址就可以了!不需要考虑iOS令人抓狂的DRM,也不需要理会Android必须的APK。
3.支持跨平台和跨设备开发:一个巨大的好处是,我的应用程序马上可以在Android和IOS上工作,同样也可以在其他平台上工作。作为一个独立开发者,为不同的平台维护基础代码是一项巨大的工作。为单个手机平台编写高质量的手机应用需要全职工作,为每个平台重复做类似的事情需要大量的资源。应用程序能够在Android和IOS设备上同时工作对我来说是一个巨大收获。
更进一步,尤其是对于运行Android各种分支的设备,它们大小和形状各异,想要让你的应用程序在各种各样屏幕分辨率的手机上看起来都不错,这是真正的挑战。对于要求严格的Android开发者来说,按照屏幕大小进行设屏幕分割(从完全最小化到最大进行缩放)会需要很多开发时间。由于浏览器会在每个设备上以相同的方式呈现,关于这个方面你不必有任何担心。

jquerymobile怎么样

jQuery Mobile是jQuery 框架的一个组件(而非jquery的移动版本)。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。
个人使用jquery mobile 3、4年左右时间,总的来说,基本上的功能都有,开发也挺方便的,特别是有那么多jquery的使用者,转到jquerymobile上也挺方便的。
缺点呢,就是稍显重量级,有一些定制化的东西改起来比较麻烦。

jquery mobile怎么用

如何使用默认调板

jQueryMobile内建了主题控制相关模块。调板可以使用data-theme属性来控制。如果你不指定data-theme属性,将默认采用a调板。以下代码定义了一个采用默认调板的页面:

《div data-role=“page“ id=“page“》
《div data-role=“header“》
《h1》Sample Page《/h1》
《/div》
《div data-role=“content“》
《p》I’m a sample page!《/p》
《/div》
《/div》

使用不同的调板:

《div data-role=“page“ id=“page“ data-theme=“e“》
《div data-role=“header“》
《h1》Sample Page《/h1》
《/div》
《div data-role=“content“》
《p》I’m a sample page!《/p》
《/div》
《/div》

从代码结构上看是一样的,仅仅使用一个data-theme=“e“便可以将整个页面切换为黄色色调:

默认情况下页面上所有的控件都会继承page上设置的调板,这意味着你只需设置一次便可以更改整个page:

《div data-role=“page“ id=“page“ data-theme=“e“》

当然你也可以独立设置不同元素的调板,同样设置元素的data-theme属性来实现:

《div data-role=“page“ id=“page“》
《div data-role=“header“ data-theme=“c“》
《h1》Header《/h1》
《/div》
《div data-role=“content“ data-theme=“d“》
《p》Content《/p》
《p》     《/p》
《ul data-role=“listview“ data-theme=“b“》
《li》《a href=“#page1“》Page 1《/a》《/li》
《/ul》
《div data-role=“collapsible-set“》
《div data-role=“collapsible“ data-theme=“b“》
《h3》Header《/h3》
《p》Content《/p》
《/div》
《div data-role=“collapsible“ data-collapsed=“true“ data-theme=“a“》
《h3》Header《/h3》
《p》Content《/p》
《/div》
《div data-role=“collapsible“ data-collapsed=“true“ data-theme=“e“》
《h3》Header《/h3》
《p》Content《/p》
《/div》
《/div》
《/p》
《p》 《a href=“#page4“ data-role=“button“ data-icon=“arrow-d“ data-iconpos=“left“ data-theme=“e“》Go To Page 4《/a》《/p》
《/div》
《div data-role=“footer“》
《h4》Footer《/h4》
《/div》
《/div》

关于jquery mobile的页面跳转

jm转场传参确实是奇葩的东西,首先你要理解:如果采用changePage转场,那么只需要第一个html引入Javascript,也就是说所有页面的Javascript是共享的。

那么一个解决方案是:你在page1.html通过changePage转场到page2.html之前,在Javascript中定义一个公共常量,这个常量就是要给page2.html的参数。然后跳转到page2.html的时候通过pageinit事件去获取常量。

var params1 = xxx;
$(document).on(“pageinit“,“#page2“,function(){  
  params1…. 
});

上面这是最简单但不安全合理的解决方法。

你说的禁用转场也可行,但是第二个页面就是全新页面了,不仅没转场效果,而且得重新加载所有文件,性能不行。

传说中最优的方案是绑定pagebeforechange事件,$(document).bind(“pagebeforechange“, handleChangePage),这个事件能在page1跳转后、page2初始化前触发,并且通过e.target.baseURI可以获取URL信息,剩下就是解析参数,很简单了。

$(document).bind(“pagebeforechange“, beforechange);
function beforechange(e, data) {
if (typeof data.toPage != “string“) {
var url = $.mobile.path.parseUrl(e.target.baseURI)
var re = ’details.html’;
if (url.href.search(re) != -1) {
var page = $(e.target).find(“#detailsPage“);
var d = data.options.data;
var data = getUrlParam(url.href);
page.find(“#nameDiv“).html(decodeURIComponent(data));
page.find(“#timeDiv“).html(decodeURIComponent(data));
page.find(“#contentDiv“).html(decodeURIComponent(data));

}
}
}

可能你还有一些疑惑,这没问题,你可以去百度搜索“JqueryMobile转场和参数传递“,现在已经有很多文章介绍了。

最后吐槽一下:JqueryMobile在Android下真的跑不快!但是适合不懂移动开发,只会web开发的同学入门。

怎么使用JQuery Mobile开发移动网站

简单的说明一下JQueryMobile.
它是一个很好的跨平台的移动端网站开发框架。 是一个前台的框架。现在要使用这个框架组一个界面,这个界面很简单, 但是麻雀虽小五脏俱全,
然后模板实现, 知识讲解完毕。html要使用HTML5的标准来写, 因为JQueryMobile是基于HTML5的。
既然使用JQueryMobile就要有这个框架, 这里可以使用本地引用的方式, 和网上引用, 也叫做cdn引用。就是比较稳定和快速的引用外部文件的一种方式。 这里使用cdn的方式, 这样只要可以上网就可以使用该框架。
在写移动端的网站的时候,
一定要写一个meta的name为viewport的属性, 因为该属性代表着网站页面的自适应。简单的写法为:《meta
name=“viewport“ content=“width=device-width, initial-scale=1“》
代表着网站为驱动设备的宽度。
然后加入框架之后,
写一个简单的界面。 这里面JQueryMobile大量的使用了一个data-的属性, 这里使用最多的事data-role。
代表着他默认的样式规则。 就是提前定义好了很多的样式来供你使用。 常用的page. 代表着页面, listview,
代表着一个列表视图。
稍微说明一下。
data-role=“page“ 是代表着一个页面可以看做该内容下是一个页面显示的内容
data-role=”header“代表着 页面的页头, 就是页面的最上面显示的内容这里需要注意, 里面要加上子标签内容, 要不然, 就不会居中显示内容了。推荐使用h1.
data-role=“footer“代表着页脚的内容。 也是网站的一个说明信息。 或者是一个底部导航菜单。 还有一部分, 就是data-role=“content“ 是代表着页面内容部分, 主要的内容在这里面显示。
这3个部分构成了一个简单的页面。 所以, 现在可以体验到它的强大, 不用写太多的代码一个简单的框架就好了, 下面继续增加一个listveiw的列表视图。
完成列表视图的代码, 增加一个文章列举表的代码, 这里列表是使用data-role=“listview“ 来修饰样式。 然后这里只需要加上data-role=“listview“ 你发现想要的list效果就实现了。 这样我们一个简单的页面效果就实现了。

如何修改Jquery Mobile 设置默认选项

以下的默认配置可以通过$.mobile对象重新配置
自定义命名空间s (字符, 默认: ““):
在jQuery Mobile中,甚至可以自定义象HTML5中的data-attribute等系列属性,比如data-role等。这通过自定义命名空间即可实现。比 如可以实现自定义一个名字,变成data-自定义名-role这样的形式。按照“data-属性”格式安排的命名空间,例如:data-role,可以设 置为任何东西,默认为空字符串。如果你包含一个面包屑的话用起来会比较明晰,比如mynamespace-“,会映射到 data-mynamespace-foo=“…“.
这可以通过$.mobile对象中增加ns属性来指定,如下代码:
$(document).bind(“mobileinit“, function() {
$.mobile.ns = “my-custom-ns“;
});
通过上面的代码,建立了一个data-my-customer-ns-role的属性,而不是传统jQuery Mobile中指定的data-role。通过设置自定义的命名空间,可以方便开发者在CSS选择器中进行指定,同时如果要自定义mobile小插件的主 题,则也必须使用自定义命名空间,以示区别。
注意:如果你使用了data-命名空间,你需要在主题的css中手动的更新/覆盖一个选择器。按照以下格式把命名空间并并入到命名空间中。
.ui-mobile [data-mynamespace-role=page], .ui-mobile [data-mynamespace-role=dialog], .ui-page { …
页面初始化
autoInitializePage(布尔值,默认: true)
当DOM加载完成时,JQM框架会自动调用$.mobile.initializePage方法。如果设为False,页面page则不会自动初始化,在视觉上就会是隐藏的,直到 $.mobile.initializePage 方法被手动调用。
jQuery Mobile提供了一个叫autoInitializePage的属性,这个属性表示页面是否应该初始化,其默认值为true。然而,如果是继承扩展 了$.mobile对象,开发者则可以将该值设置为false,并且在稍晚的时候对页面初始化进行设置。下面的代码中,演示了当其他脚本在运行时,如何暂 时延迟页面的初始化。如果有大量的客户端脚本运行,则一个很好的建议方法是延迟页面的初始化,直到DOM完成加载客户端脚本。
《!DOCTYPE HTML》
《html》
《head》
《title》Understanding the jQuery Mobile API《/title》
《script type=“text/java script“ src=“jquery.js“》《/script》
《script type=“text/java script“》
$(document).bind(“mobileinit“, function() {
$.mobile.autoInitializePage = false;
});
《/script》
《script type=“text/java script“ src=“jquery.mobile.js“》《/script》
《/head》
《body》
《div data-role=“page“》
《div data-role=“content“》
《ul data-role=“listview“ id=“my-list“》《/ul》
《/div》
《/div》
《script type=“text/java script“》
$(’#my-list’).html(’《li》《a href=“page-2.html“》Link to another page《/a》《/li》’);
$.mobile.autoInitializePage = true;
《/script》
《/body》
《/html》
自定义子页的URL键
subPageUrlKey (字符串,默认: “ui-page“)
当在jQuery Mobile中引用子页时,默认使用的是ui-page做为KEY标识。开发者可以通过$.mobile对象的subPageUrlKey去重新设置,比 如如果定义了subPageUrlKey为my-page,则默认的子页引用将从web-page.html&ui-page=value改为 web-page.html&my-page=value,这样做的一个好处是开发者可让url更友善更容易维护。
url参数用来指向组件产生的子页面(比如生成的嵌套的列表)。会被转义为example.html&ui-page=subpageIdentifier。Jquery Mobile会把 &ui-page=之前的部分用来向子页面的url地址发出ajax请求。
设置历史记录
nonHistorySelectors (字符串, 默认: “dialog“)
对于带有 data-rel 属性的a标签链接,或 data-role 属性的页面,如果选择器与之匹配,则他们不会在历史记录中被追踪 (即它们不会在location.hash中被更新也不会被浏览器历史所标记).
设置当前激活页面的样式
activePageClass (字符串, 默认: “ui-page-active“):给当前页面(包括转场中的) 分配class。
当使用了jQuery Mobile后,默认当前激活页面中的ui-page元素都会使用框架默认的样式中定义的ui-page-active,如果要对其进行修改,可以设置$.mobile对象中的activePageClass属性,比如:
$(document).bind(“mobileinit“, function(){
$.mobile.activePageClass=“ui-page-custom“;
});
其中ui-page-custome则为用户自定义的样式。
设置当前激活页面的按钮
activeBtnClass (字符串, 默认: “ui-page-active“):给活动状态的按钮分配class值,该class值必须在css框架中存。
设置ajax
ajaxEnabled (布尔值, 默认: true):Jquery Mobile 会自动通过ajax处理链接点击以及表单提交。如果无法处理,url hash 监听将会被禁用,url也会像常规那样发出HTTP 请求.
ajaxLinksEnabled (布尔值, 默认: true):可行时,Jquery Mobile 就会自动通过ajax处理链接的点击。
ajaxFormsEnabled (布尔值, 默认: true):可行时,Jquery Mobile 就会自动通过ajax处理表单的提交。
设置哈希值
hashListeningEnabled (布尔值, 默认: true)
Jquery Mobile 会自动监听与处理 location.hash的改变。禁用它会防止Jquery Mobile处理 location.hash的改变。使你可以自己处理他们,或者在文档中用完整的链接地址指到一个特定的id值上。
设置默认的转场效果
defaultTransition (字符串, 默认: ’slide’):设定使用AJAX进行页面转场的默认的转场效果。设为“none“的话则默认没有转场的动画。
默认的jQuery Mobile的页面和对话框的效果都是通过ajax实现的。默认的页面切换效果是幻灯片切换,默认的对话框出现的效果是弹出。如果需要改变这些效果的话 ,同样是如下代码所示,设置$.mobile对象的defaultPageTransition和defaultDialogTransition属性就 可以了。
$(document).bind(“mobileinit“, function() {
$.mobile.defaultPageTransition = “fade“;
$.mobile.defaultDialogTransition = “fade“;
});
jQuery Mobile提供了6种效果供用户选择,分别是:slide, slideup, slidedown, pop, fade, 和flip,用户可以按照上面的方法进行设置。
设置加载时默认信息
loadingMessage (字符串, 默认: “loading“):设置页面加载时显示的文本. 如果设置为false,将不会显示任何文字。
加载信息会在加载页面时显示给用户看,要更改这个设置,只需要修改$.mobile对象的loadingMessage属性即可,如下:
$(document).bind(“mobileinit“, function() {
$.mobile.loadingMessage = “Please wait“;
});
设置加载时错误信息
pageLoadErrorMessage (字符串, 默认: “Error Loading Page“):通过ajax加载页面失败时出现的文本信息。
$(document).bind(“mobileinit“, function() {
$.mobile.pageLoadErrorMessage = ’Sorry, something went wrong. Please try again.’;
});
设置页面的最小的卷动距离
minScrollBack (字符串,默认:’150’):返回一个页面的最小的卷动距离。
gradeA (返回一个布尔值, 默认: 返回$.support.mediaquery的值):浏览器必须符合所有支持的条件才会返回 true.

jquery mobile是什么框架

jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
Jquery mobile是一个基于HTML5,拥有响应式网站特性,兼容所有主流移动设备平台的统一UI接口系统,与前端开发框架。可以运行在所有智能手机,平板电脑和桌面设备上。 jQuery Mobile秉承 “write less, do more”的原则到了一个新的高度:不需要为每一个移动设备或者操作系统单独开发应用,jQuery Mobile框架可以使您设计一个高度响应式的网站或应用运行于所有流行的智能手机,平板电脑和桌面系统。