jquery mobile

时间:2024-03-27 02:02:21编辑:coo君

jquery mobile适合做大型应用吗

jQuery Mobile是移动前端框架,包含js、html、css,提供一套完整的移动前端开发组件,可以比喻成Android开发框架,尽可能提供移动APP所具有的所有功能,针对解决的问题有:
移动网页APP所常用的组件,例如:手机导航栏、选项卡、底部菜单、列表、表单等各种组件,而这些与Bootstrap提供的组件有很大区别,jQuery Mobile提供的是类似手机APP的组件,只用于移动网页,而Bootstrap提供的是面向所有设备的组件,并没有对移动设备专门考虑,与移动APP的组件体验不一样。


jquery mobile是什么框架

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


jquery mobile怎么开发APP应用

jQuery Mobile是一个基于jquery的html 5移动网站框架,用它做出来的网站界面和App风格类似。
jQuery Mobile文档,内容不多,耐心看完只需要1个小时,大体分成8大功能点
page:最基准单元,包括header,footer,导航栏
dialog:对话框,在手机屏幕弹出dialog来交互,我觉得不是很友好
transitions:转场效果
form:表单
button:大button,小button(放在各种栏上的都是小button),还提供了若干内置标准icon
listview:列表,这是jquery mobile的核心UI,提供了10几种类型的List,简单好用
event:各种滚动,滑动,拖拽事件
Theming:官方提供了5种皮肤,也有工具可以自定义,切换皮肤只需要改动一个class
jQuery Mobile全面支持ajax,但也可以当做普通html模板在后端渲染数据,我选择后面一种


jquery mobile 动态生成多个页面的元素怎么刷新

jquery 你写方法动态刷新页面是没有问题。 只不过 jquery mobile 支持单页模式。 我很怀疑 你在page容器中 将data-dom-cache 设置成了true。 这样的效果是
1 你已经打开过的页面不再走后台 (不浪费客户流量)
2 如果你的jquery选择器 使用不当 你只是在给第一个页面刷新元素。(举例: 你选择了一个列表中的第一条信息。 打开一个详细页面。 进行了js操作后或者没进行js操作 再返回列表页点击第二条信息 再打开一个详细页面时 你发现你的js方法“失灵了” 实际上因为选择器指定的不对 js在给你更新第一个详细页面。 单页模式会将你打开过的页面全部累加起来 选择器 选取不正确 是无法更新后面打开的页面的。 必须正确指定自己想要刷新的页面。)

我怀疑你是第二种情况


如何使动态生成的jquery Mobile元素立即生效

需要使用 JQM 提供的 create 方法创建一次,才会附加上 JQM 的样式,立即生效; 如果是动态添加块状元素,如 div、p等: $('selector').trigger('create'); 如果是表单元素,如input、textarea、button等: $('selector').textinput(); 下拉元素,如select: $('selector')[0].selectedIndex = 3; // 先给 select 赋值$('selector').selectmenu('refresh'); // 然后刷新 Toggle switch 控制: var myswitch = $("#toggle");myswitch[0].selectedIndex = 1;myswitch .slider("refresh"); slider 控制: $('selector').val(value).slider('refresh'); listview 元素,如 li: $('selector').listview('refresh'); radio 元素: $("input[value=value]").attr('checked',true).checkboxradio('refresh'); checkbox 元素: $('selector').attr('checked',true).checkboxradio('refresh');


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

在写移动端的网站的时候, 一定要写一个meta的name为viewport的属性, 因为该属性代表着网站页面的自适应。简单的写法为: 代表着网站为驱动设备的宽度。

然后加入框架之后, 写一个简单的界面。 这里面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切换页面的几种方法是什么?

普通切换页面,不是在一个页面的html
带滑动效果的切换当前页面的div页面
一个完整的jqm页面

...
...
...


一个页面可以有很多个data=role="page" 他表示一个页面 id就是为了方便超链接点击找到他显示他
还有通过js来切换页面:
$.mobile.changePage("about/us.html", "slideup");

第一个是地址或者ID,第二个效果


jqmobile和jquery的区别

jQuery Mobile
jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

每章中的 TIY 实例
通过我们的在线编辑器,您能够编辑代码,然后点击提交按钮来查看结果。
实例


在此处写入标题



在此处写入正文



在此处写入页脚文本

怎么获取 canvas 上鼠标的坐标

  以下程序实现了在canvas上画红色的圆,圆心为鼠标所在位置,其中圆的位置随着鼠标位置的移动而移动,js代码中mousePos(e)方法用于获取鼠标在整个页面的坐标,getCanvasPos(canvas,e)方法用于获取鼠标在canvas上的坐标;canvas以其左上角为起点,并设为(0,0),因此当页面包含其他元素的时候,两者坐标不一致,不过在本例中两者坐标是一致的,因为页面只包含一个canvas元素:
  html代码如下:

  [html] view plain copy
  
  
  
  
  
  Your browser does not support the canvas element.
  
  
  
  
  
  
  其中abc.js文件中的代码如下:

  [javascript] view plain copy
  function mousePos(e)
  {//获取鼠标所在位置的坐标,相对于整个页面
  var x,y;
  var e = e||window.event;
  return {
  x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft,
  y:e.clientY+document.body.scrollTop + document.documentElement.scrollTop
  };
  }
  
  function getCanvasPos(canvas,e)
  {//获取鼠标在canvas上的坐标
  var rect = canvas.getBoundingClientRect();
  return {
  x: e.clientX - rect.left * (canvas.width / rect.width),
  y: e.clientY - rect.top * (canvas.height / rect.height)
  };
  }
  function draw(e)
  {
  var c=document.getElementById("myCanvas");
  var cxt=c.getContext("2d");
  cxt.clearRect(0,0,c.width,c.height);
  cxt.fillStyle="#FF0000";
  cxt.beginPath();
  //cxt.arc(mousePos(e).x,mousePos(e).y,15,0,Math.PI*2,true);
  cxt.arc(getCanvasPos(c,e).x,getCanvasPos(c,e).y,15,0,Math.PI*2,true);
  cxt.closePath();
  cxt.fill();
  }


如何修改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完成加载客户端脚本。



Understanding the jQuery Mobile API


$(document).bind("mobileinit", function() {
$.mobile.autoInitializePage = false;
});










$('#my-list').html('Link to another page');
$.mobile.autoInitializePage = true;




自定义子页的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.


上一篇:追风少年刘全有

下一篇:破产姐妹3