JQUERYMOBILE - 技术教程文章
jQuerymobile转换url地址及获取url中目录部分的方法_jquery
path.makeUrlAbsolute() 把相对URL转化为绝对URLjQuery.mobile.path.makeUrlAbsolute( relUrl, absUrl )把相对URL转化为绝对URL的方法。这个函数返回一个字符串，绝对URL。 relUrl：相对网址。类型：字符串。 absUrl：绝对网址。类型：字符串。jQuery.mobile.path.makeUrlAbsolute demo#myResult{border: 1px solid;border-color: #108040;padding: 10px;}The absoulte URL used is http://foo.com/a/b/c/test.htmlThe result will...
使用jQuerymobile库检测url绝对地址和相对地址的方法
这篇文章主要介绍了使用http://www.gxlcms.com/wiki/1495.html" target="_blank">jQuery mobile库监测绝对地址和相对地址的方法,分别是isAbsoluteUrl()和isRelativeUrl()方法的使用,需要的朋友可以参考下path.isAbsoluteUrl() 检测绝对网址如果一个URL是绝对的实用方法。如果URL是绝对的这个函数返回一个布尔值 true ，否则返回 false。<!doctype html> <html lang="en"> <head><meta charset="utf-8"><meta name="viewport" conte...
jQuerymobile移动web(6)_jquery
jquery mobile 针对移动端设备的事件类型。1.touch 事件。tap 快速触摸屏幕并且离开，类似一种完整的点击操作。taphold 触摸屏幕并保持一段时间。swipe 在1秒内水平移动30px屏幕像素上时触发。swipeleft 向左侧滑动swiperight 像右侧滑动。2.方向改变事件orientationchange 事件函数当移动设备的方向发生改变触发，在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数，该参数有两种返回值：portrait(纵向)landscarp(横...
jquerymobile移动web(5)_jquery
有序列表只读列表可分割按钮列表含有气泡式计数列表配置选项。jquery Mobile 在开始运行的时候，它会在document 对象上触发一个mobileinit 事件。我们可以通过该事件重写默认的相应的函数。配置各种属性参数。使用方法如下： 为开发者提供一个对象：$.mobile. 该对象的作用是配置各种选项及默认配置。 $(document).bind("mobileinit",function(){ $.mobile.foo = "foo";l})可配置选项：1.ns类型：字符串，默认是非空字符串。用...
jQueryMobile弹出窗、弹出层知识汇总_jquery【图】
先创建一个窗体Close弹出窗内容1）点击后弹出按钮 2）页面加载后弹出//页面延时加载 setTimeout(function () {$("#popupView").popup('open'); }, 1000);//1秒 关键字说明： data-overlay-theme: 背景色透明灰 data-position-to: 弹窗在窗口居中显示 data-dismissible: 是否允许单击窗口外任一位置关闭窗口（默认true为允许） data-transition: 弹出方式 下面通过代码实例详解jquery mobile 弹出层使用 引入文件弹出层基础 创建一个...
jqueryMobile使用示例分享_jquery【图】
jQuery Mobile是客户端代码，但其基于ajax技术与服务器端交互。因此拥有一个Web Service，才能更好的体验jQuery Mobile的功能。这里不打算介绍Web Service的搭建过程，朋友们可以根据自己的实际需要自行搭建。示例一：jqueryMoblie图标定位图标:顶部右侧底部左侧底部文本演示图：示例二：可折叠块点击我 - 我可以折叠！我是可折叠的内容。页脚文本演示图示例三：可折叠集合点击我 - 我可以折叠！我是可折叠的内容。点击我 - 我可以...
jquerymobile开发常见问题分析_jquery
本文实例分析了jquery mobile开发常见问题。分享给大家供大家参考，具体如下： jquery mobile功能很强大，有了它，不用在程序中，写方法去判断，是什么手机了，完全可以用js来实现各种智能手机的的兼容性。也是因为功能强大，jquery mobile插件，200多K，min也有140多K。 1、jquery mobile是通过ajax来进行页面请求，ajax大家都知道，是不涮新页面的。也就是说地址栏的变动也不是真实的涮新。这样就有问题了，js只有刷新页面的时候...
jQueryMobile之窗体长内容的缺陷与解决方法实例分析【图】
本文实例讲述了jQueryMobile窗体长内容的缺陷与解决方法。分享给大家供大家参考，具体如下： 前面的一篇文章《jQueryMobile之Helloworld与页面切换的方法》没有考虑到窗体中放置长内容的状况 一旦窗体中出现长内容，使用笔者那种固定header与footer的全屏布局是存在缺陷的，如图所示，长内容最后的内容，直到滚动条拉到最底部也无法穷尽， 而且很有可能的是，虽然现在这个地方的内容是显示为半透明，但往往这个位置是一些提交按钮什...
jqueryMobile 动态添加元素,展示刷新视图的实现方法
jQuery Mobile的是一个很好的移动开发框架，你可能已经知道，虽然它有很多难以解决的问题，但是我相信后续版本jquery会修复……我是很喜欢jquery的。这并不是说它很完美无暇，很多开发人员遇到的情况也都难解决，比如：尝试使用代码来添加，更新或删除元素，使用JavaScript的页面跳转。在这篇博客文章中，我列出了一些动态添加组建重新刷新的方法。 1.Textarea field $(body).prepend(<textarea id="myTextArea"></textarea>); $(#...
jqueryMobile使用示例分享【图】
jQuery Mobile是客户端代码，但其基于ajax技术与服务器端交互。因此拥有一个Web Service，才能更好的体验jQuery Mobile的功能。这里不打算介绍Web Service的搭建过程，朋友们可以根据自己的实际需要自行搭建。示例一： <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"><script src="http://code.jquery.com/jquer...
jQueryMobile之Helloworld与页面切换的方法【图】
本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下： jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。就是能够迅速能把页面写成APP的界面，让用户浏览网页，相当于在使用布局好的app一样。 首先要在jQueryMobile（点击此处本站下载）下载一个压缩包，然后...
使用jQueryMobile实现滑动翻页效果的方法【图】
本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下： 滑动手势在移动设备是很流行的，在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现，但是个人与之前一篇【jQuery手机浏览器中拖拽动作的艰难性分析】中的观点一致，由于这是在手机浏览器中浏览，而不是安卓的一个独立APP，所以不要经常除点击以外的移动设备手势，以免跟手机浏览器与手机系统本身的手势发生冲突。 ...
jquerymobile局部渲染的各种刷新方法小结
在JQueryMobile页面在第一次初始化进行一次整体渲染，动态生成的需要局部渲染。 在jquerymobile实现listview局部渲染的方法： 代码如下:function queryPublishOrderList(trackOrDealOrInsp,userCode,type,pageNum){ var queryPublishOrderListURL="http://xxx.xxx.xxx.xxx/Myapp/WorkOrderSelByTypeService.svc/WorkOrderSimpSelByType/Json/"+trackOrDealOrInsp+"/"+userCode+"/"+type+"/"+pageNum; $.ajax({ ...
jquerymobile checkbox及时刷新才能获取其准确值
解决办法： 代码如下:$(input[type="checkbox"]).bind(click,function() { $(this).prop(checked).checkboxradio("refresh"); // 绑定事件及时更新checkbox的checked值 }); 如果要用js去改变checkbox的值时也要及时刷新。 代码如下:$(input [type="checkbox"]).attr(checked,false).checkboxradio("refresh"); $(input [type="checkbox"]).attr(checked,false).checkboxradio("refresh"); 原因： 因为手动改变它的值后，jquery...
小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程【图】
为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程，我绘制了一幅流程图：图中用红色框圈起来的是界面中的事件，测试代码如下：<!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> <link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type=...
小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度【图】
在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版，在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求，用户会感到略有停顿。使用多页模版，可以改善页面跳转之间的流畅性，但是多个页面要一次性下载，所以下载时间变长，用户体验也会受到影响。在基于预取技术的开发中，当第一个页面的DOM对象加载完成后，jQuery Mobile会对标记data-prefetch的链接地址进行预取操作。预取的详细过程如下：注意...
小强的HTML5移动开发之路（52）——jquerymobile中的触控交互
当使用移动设备进行触控操作时，最常用的就是轻击、按住屏幕或者手势操作，jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为。一、轻击与按住直接上代码（一切皆在代码中，细细品吧！）<!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> <link href="css/jquery.mobile-...
小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递【图】
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数，而在多页模版中不需要与服务器进行通信，通常在多页模版中有以下三种方法来实现页面间的参数传递。1、GET方式：在前一个页面生成参数并传入下一个页面，然后在下一个页面中进行GET内容解析。2、通过HTML5的Web Storage进行参数传递。3、建立当前页面变量，在前一个页面将所需传递的参数内容赋值到变量中，在后一个页面从变量中将参数取出来。（程序灵活性较弱）一、以GE...
小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航【图】
一、页眉1、添加页眉和页脚 <p data-role="header"><h1>第 1 页</h1></p> <p data-role="footer"><h4>页面脚注</h4></p>默认的页眉在屏幕的顶部边缘显示，而且在在屏幕滚动时，页眉会滑出屏幕之外，通过添加data-position属性可以创建一个固定的页眉 <p data-role="header" data-position="fixed"><h1>第 1 页</h1></p> <p data-role="footer" data-position="fixed"><h4>页面脚注</h4></p>可以使用date-theme属性来调整页眉的主题...
小强的HTML5移动开发之路（44）——JqueryMobile中的按钮【图】
一、链接按钮<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> </head> <body> <p data-role="page" i...
小强的HTML5移动开发之路（47）——jquerymobile基本的页面框架
一、单容器页面结构<!DOCTYPE html> <html> <head> <title>Jquery mobile 基本页面框架</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script> <...
【HTML5】jQueryMobile初体验
jQuery Mobile v1.1.0上个月已经发布，由于好奇就学习了一下。jQuery Mobile是 jQuery 在手机和平板设备上的版本，用于创建针对智能手机和平板电脑的跨设备Web应用。jQuery的用户界面总设计师Todd Parker(jQuery之父)称，jQM旨在“为 jQuery 社区创建一个优雅的能够兼容当前所有主流移动平台的HTML5 UI库”。jQuery mobile页面结构jQuery Mobile 应用了 HTML5 标准的特性，在结构化的页面中完整的页面结构分为 header、content、fo...
小强的HTML5移动开发之路（23）——jQueryMobile入门【图】
一、下载jQuery Mobile下载地址：http://jquerymobile.com/点击Download下载如下zip包下载成功后如下图解压目录如图：点击index.html进入demo主页，这里面有很多例子。二、创建JQuery Mobile的Helloword1、创建demo2、新建站点3、站点建立成功后将生成的demo拷贝到站点中index.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <link href="jquery.mobile-1.3.2.m...
关于jQueryMobile表单提交Servlet问题_html/css_WEB-ITnose
前台用的是jQueryMobile的一个form表单，然后提交到Servlet进行处理，servlet里面response的重定向用不了，手机上点击提交后页面就显示errorpage提示文字，经过查询说是要将ajax禁用，我在form标签里加了 data-ajax="false"后，提交后服务器就报异常了。 不加data-ajax="false" 提交的内容可以存到数据库，就是页面不跳转，加了后提交的数据连数据库都存不了，我不知道加了data-ajax="false" 后Servlet里面是否要做修改，求...
JqueryMobile在Ios上会自动跳转_html/css_WEB-ITnose
JqueryMobile点击浏览记录，向后台发aiax,显示到页面上，点击某一个浏览的商品，跳转到详情页面。这是正常的逻辑，我在安卓手机上测试也一切正常。但是在IOS上跑的话，点击浏览记录，显示到页面上之后，直接跳转到详情了。为啥？？？？？？ 回复讨论(解决方案) 因为你的手指发动了连击技能 查看你代码是否重复触发了吧。。。。
javascript-在jqueryMobile HTML页面中使用jquery提交时刷新部分标签【代码】
我正在使用Dreamweaver6.0中的jquerymobile模板并构建移动应用程序界面.在主屏幕上,我有四个按钮-例如,查看,创建,更新,删除.当我单击“创建”时,它将打开一个新屏幕(从这四个按钮打开的每个屏幕都被定义为同一index.html页中的“部分”). 在创建“节”中,几乎没有表单字段和提交按钮.当我单击提交时,我的表单值将被提交到数据库(我正在使用AJAX来做到这一点).但是这里的问题是,当我单击“提交”时,我的页面无法刷新. 我正在寻找的是...
javascript – JQueryMobile中的弹出/工具提示位置【代码】
我想在鼠标光标下显示工具提示.由于JQueryMobile没有任何小部件,我使用Popup小部件(非常接近). 显示弹出窗口时,我可以指定X和Y坐标.但问题是它是基于X和Y的弹出窗口的中心.我想在鼠标光标的右侧显示它,而不是在它下面(因为这使得文本难以阅读,因为光标在它上面). 如何以这种方式显示弹出窗口？我唯一能想到的是测量弹出元素的宽度,并根据弹出窗口的宽度/高度校正坐标.但这似乎是不可能的,因为我只能在弹出窗口渲染到屏幕后测量实际...
javascript – jQueryMobile关闭对话框没有页面刷新
虽然之前已经提出了这个问题,但他们没有建议的解决方法.我有一个表单,单击复选框我想打开一个弹出/对话框并希望用户在弹出/对话框中输入一些数据,但是当对话框/弹出窗口关闭时,我的父页面将丢失所有数据,因为它被重新加载.你能帮助我实现同样的目标吗？解决方法:JQuery mobile的弹出窗口小部件会将当前URL与原始URL进行比较,如果页面不匹配则刷新页面.因此,如果要阻止此行为,则必须避免影响历史记录的弹出窗口小部件.只需将data-hi...