JQUERYMOBILE - 技术教程文章

jquerymobile动态添加元素之后

Jquerymobile动态添加元素之后有些不能被正确渲染的解决方法:listview: 添加 jq(".detail").listview("refresh");div或其他: 添加.trigger( "create" ); jq(".detail:eq("+ix+1+")").append("<li>"+data.linete[i].S_Station+data.linete[i].D_Station+data.linete[i].S_Time+data.linete[i].D_Time+data.linete[i].distance+"</li>"); }); jq(".detail").lis...

jquerymobile的helloworld【代码】

现在项目需要用jquerymobile做手机版,开发过程中都是边用边学,下班没什么事,就系统学习一下jquerymobile,顺便把学习过程记录一下。 编写jquerymobile代码时,需要先在官网上下载jquerymobile的整个压缩包,其中对于开发有作用的只有三个文件,其中分别是:jquery.min.js、jquery.mobile-1.4.5.min.css、jquery.mobile-1.4.5.min.js。helloworld的具体源码如下:<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><tit...

jQueryMobile控件之按钮【代码】

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0"><title>按钮</title><script src="../jquery-2.2.4.min.js"></script><script src="jquery.mobile-1.4.5.min.js"></script><link type="text/css" rel="stylesheet" href="jquery.mobile-1.4.5.min.css"><style>ul{width: 150px;display: inline-block;}...

【jQueryMobile】使用jQueryMobile实现滑动翻页的效果【图】

滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见虽然这个功能可以在jQueryMobile中实现,但是个人与之前写的《【jQuery】论手机浏览器中拖拽动作的艰难性》(点击打开链接)中的观点一直,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突。那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢?一、基本目标在手机浏览...

mvc4+jquerymobile页面加载时无法绑定事件

问题:在view里写js,在页面第一次加载完成后,无法触发事件,  如:按钮click事件,已经在$(function(){ 添加了click });但就是无法触发,必须刷新下才可以。 原因分析:    主页里没有@section Scripts写的js正常,子view里加了@section Scripts{ ......js内容... }就不正常。。找了好久 。。郁闷了半天 。。个人感觉这段是放在模板页加载完后再加载的子页面,不是很清楚,请大神指教解决方法:  在view里写js的话,...

jquerymobile知识点三:弹出层popup【代码】【图】

弹出层popup很简单,主要就是弹出验证,登陆注册,提交信息之类的,下面是我写好的一个demo。。。 <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false"style="max-width: 460px;"class="ui-corner-all"><a href="#" data-rel="back" data-role="button" data-theme="e" data-icon="delete"data-iconpos="notext"class="ui-btn-right">Close</a><div data-role="header" dat...

jquerymobile使用技巧

1)ajax开关(默认jquery以ajax方式加载页面)$.mobile.ajaxEnabled = false; 2)不编译指定标签$.mobile.page.prototype.options.keepNative="input"; 3)开启dom缓存$.mobile.page.prototype.options.domCache = true; 4)多个页面分开写于不同的html里,在首页用loadPage方法一次性加载其他页面(全部)$(document).ready(function(){   $.mobile.loadPage(‘aaa.html‘);   $.mobile.loadPage(‘bbb.html‘);   ...

JqueryMobile动态生成listView并实现刷新的两种方法

JqueryMobile动态生成listView并实现刷新的两种方法 代码如下:function queryEntfernungen(tx, results) alert("This Hello works"); var len = results.rows.length; // This For works fine for (var i = 0; i < len; i++) { $("div[data-role=content] ul").append(<li><a href="+results.rows.item(i).name+">+results.rows.item(i).name+</a></li>); } $("div[data-role=content] ul").listview(refre...

详解jQueryMobile自定义标签_jquery【图】

本文实例讲解了jQuery Mobile自定义标签,分享给大家供大家参考,具体内容如下 规划产品国际化的需求时,涉及到PC Web,移动Web,和各app。设计了多个版本的移动Web均不理想。 由于移动Web采用了jQuery Mobile框架,所以将切换语言放在哪个位置更合理进行了讨论。讨论的过程和多个方案我就不提了,先来看看最终效果: 是不是感觉很经验,这里一开始尝试了多次,最终自定义了一个下拉选项,代码如下:jQuery Mobile .co...

jquerymobile页面跳转后样式丢失js失效的解决方法_jquery

用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了。 方法: 将当前页面b.html需要用到的css以及js放在div内。 原理: 由于jqm的ajax跳转的时候,只会把b.html中内的内容加载进dom,而外的代码都不会加载,所以导致在外的js和css都失效了。

基于Jquerymobile实现的支持PC、平板、手机移动设备的web应用程序(C#)

页面部分: List部分: @{ Layout = null;}@using ePR.Models;@using ePR;@using BusinessObjectLayer.Entities;@using DataAccessLayer;@model ePR.Models.pRHeaderListModel <!DOCTYPE html> <html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="@Url.Content("~/Scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css")" rel="stylesh...

jQuerymobile类库使用时加载导航历史的方法简介_jquery

jQuery.mobile.navigate( url [, data ] )改变URL和跟踪历史。作品为浏览器和无历史新的API url:是必须的参数。类型:字符串data:是可选的参数。类型:对象。 更改哈希片段两次然后日志提供导航事件数据时,浏览器向后移动的历史// Starting at http://example.com/ // Alter the URL: http://example.com/ => http://example.com/#foo$.mobile.navigate( "#foo", { info: "info about the #foo hash" });// Alter the URL: http...

jqueryMobile:如何加载外部Javascripts【代码】

我认为这是一个常见的情况,并且很惊讶没有在这里找到答案.所以这里…… 我的jquerymobile站点中的某些页面正在使用外部javascripts.我不希望这些脚本加载到网站上的每个页面上.它是移动的,它应该快速加载. 如何加载外部javascript,以便在需要引用时在DOM中可用.我发现这篇Stack文章似乎有一个很好的技巧:Using Javascript to load other external Javascripts 如果我动态加载这个外部javascript,我应该使用pageinit事件吗? http:...

jquerymobile局部渲染的各种刷新_html/css_WEB-ITnose【图】

在JQueryMobile页面在第一次初始化进行一次整体渲染,动态生成的需要局部渲染。 在jquerymobile实现listview局部渲染的方法: Java代码 function queryPublishOrderList(trackOrDealOrInsp,userCode,type,pageNum){ var queryPublishOrderListURL="http://xxx.xxx.xxx.xxx/Myapp/WorkOrderSelByTypeService.svc/WorkOrderSimpSelByType/Json/"+trackOrDealOrInsp+"/"+userCode+"/"+typ...

jQueryMobile和KendoUI的比较_基础知识

jQuery Mobile 和 Kendo UI 都是流行的 JavaScript 框架,在开发中我们可以在它们的基础上添砖加瓦制作所有现代移动WEB应用。这两个框架都是基于使用率顶尖的 JavaScript 库 jQuery 所构建的。比较 Kendo UI 和 jQuery Mobile 有些类似于比较同一枚硬币的两面。众所周知,jQuery Mobile 实际上并不需要太多的介绍,因为它是最常用的HTML5框架之一。 Kendo UI 具有相似的动机和类似的发展速度。与 jQuery Mobile 非常类似,Kendo UI...

jQueryMobile 網頁使用 ASP.NET Web API 服務【代码】【图】

微軟的 ASP.NET Web API 框架,能以 RESTful 輕量級的架構風格,建立 HTTP 服務,讓多種不同的用戶端,如: 手機、平板、電腦(PC),透過 HTTP 的 GET、POST、PUT、DELETE 方法來「存取(访问)」服務。 而 jQuery Mobile 框架,設計的目標,是希望能統一,市面上常見的手機、平板...等各種行動裝置。其特性如下:以 jQuery 為核心 支援 HTML 5 支援滑鼠(鼠标)、手指的觸碰事件 內建多種佈景主題 內建豐富的 UI 控制項(控件) 和微軟的 ...

浅析jQueryMobile的初始化事件_jquery

jQuery Mobile 包括一个初始化事件,该事件甚至会先于 jQuery 的 document.ready 事件进行加载。jQuery Mobile 实际上在文档对象本身上触发其初始化事件,第一个触发的事件是mobileinit。 当Jquery Mobile开始执行时,他就会在document对象上触发mobileinit 事件,因为mobileinit事件是在加载后马上触发,所以你需要在Jquery Mobile加载之前绑定你的事件处理函数,所以我建议你如下安排你的js引用顺序要扩展 mobileinit 事件,您首...

让jQueryMobile不显示讨厌loading界面的方法_jquery

jQuery Mobile 的一个BUG: 当不采用 ajax 以及 他自己的 back 返回的时候,即: 点击浏览器后退按钮时,将会从缓存之中加载页面,此时,讨厌的 loading 动画出来了,而且一直不消失。 网上找了好多解决方法,搜索了好久都没有好用的,今天突然想起来个釜底抽薪,直接动jqeury-mobile 的类库. 用编辑器打开, 找到显示pageLoading的方法, showPageLoadingMsg 的定义处: 然后加上一句代码,if("".length 代码如下: showPageLoadin...

jQueryMobile导航栏代码_jquery

导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内。 默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button")。 使用 data-role="navbar" 属性来定义导航栏: 代码如下:HomePage TwoSearch默认情况下,按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度:1 个按钮占 100% 宽度,2 个按钮则各占 50% 的宽度,3 个按钮则每个占 33,3% 的宽度,依此类推。然而,如果您在导航栏中指定了超过...

如何解决jQuerymobile的header和footer在点击屏幕的时候消失的问题

这篇文章主要介绍了jQuery mobile的header和footer在点击屏幕的时候消失的解决办法,通过给header和footer添加 data-position="fixed" 和 data-tap-toggle="false"完成此功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下jQuery Mobile简介jQuery Mobile 是创建移动 web 应用程序的框架。jQuery Mobile 适用于所有流行的智能手机和平板电脑。jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。给header和...

jQueryMobile+PHP实现文件上传_PHP

很简单的一个小例子 jQuery Mobile + PHP 通过超全局 $_FILES 上传,然后用move_uploaded_file()方法把上传的图片移动到到本地服务器下的文件夹, 下面是html和php的代码代码如下:校园祭首页创新实验代码如下: <?php if ($_FILES["file"]["error"] > 0) { echo "Return Code: " . $_FILES["file"]["error"] . ""; } else { echo "Upload: " . $_FILES["file"]["name"] . ""; echo "Type: " . $_FILES["file"]["type"] . ""; echo "Si...

jquerymobile事件多次绑定示例代码_jquery

新手新手,初学js,html,css,jq就不断麻烦 代码如下: $(document).on("pageinit",function(){ $("XXX").bind() }) 这种绑定方法会在整个document每pageinit一次,就对xxx进行的某一事件进行绑定,而pageinit事件什么时候会触发,具体要如何解决,可以看链接 http://rubiks.ph/jquery-mobile-events-firing-multiple-times/ 英文不好,仅能勉强看懂.

jQueryMobile+PHP实现文件上传_php实例

很简单的一个小例子 jQuery Mobile + PHP 通过超全局 $_FILES 上传,然后用move_uploaded_file()方法把上传的图片移动到到本地服务器下的文件夹, 下面是html和php的代码代码如下:校园祭首页创新实验代码如下: <?php if ($_FILES["file"]["error"] > 0) { echo "Return Code: " . $_FILES["file"]["error"] . ""; } else { echo "Upload: " . $_FILES["file"]["name"] . ""; echo "Type: " . $_FILES["file"]["type"] . ""; echo "Si...

jquerymobile怎么样【图】

jQuery Mobile是jQuery 框架的一个组件(而非jquery的移动版本)。jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery mobile的优点1.跨平台目前大部分的移动设备浏览器都支持HTML5标准,jQuery Mobile以HTML5标记配置网页,所以可...

jQuerymobile移动web(4)_jquery

移动互联网的发展,促生了各种各样的移动Web框架。jQuery Mobile 是一个针对触摸体验的 web UI 开发框架,很容易就可以把 Web App 包装成适合 Android 与 iOS等触屏移动设备的 Javascript 库,与 HTML5结合可以很方便快速的开发出一款具有良好界面及用户体验的 Web App,而且不需要安装任何东西,只需将需要的 *.js 和 *.css 文件直接包含到 web 页面中即可。 下拉菜单:设置label 元素的for 属性为 select label 元素的文本内容作为...

通过AJAX和PHP,提交JQueryMobile表单(两篇)【图】

通过AJAX和PHP,提交jQuery Mobile表单File name: callajax.php<?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo("First Name: " . $firstName . " Last Name: " . $lastName); ?>File name: index.php<!DOCTYPE html> <html> <head> <title>Submit a form via AJAX</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" /> <script src...

jQueryMobile+PHP实现文件上传,_PHP教程

jQuery Mobile + PHP实现文件上传, 很简单的一个小例子 jQuery Mobile + PHP 通过超全局 $_FILES 上传,然后用move_uploaded_file()方法把上传的图片移动到到本地服务器下的文件夹, 下面是html和php的代码代码如下:校园祭首页创新实验代码如下: <?php if ($_FILES["file"]["error"] > 0) { echo "Return Code: " . $_FILES["file"]["error"] . ""; } else { echo "Upload: " . $_FILES["file"]["name"] . ""; echo "Type: " . $_FI...

javascript-快速开发一个移动的web站点,求帮忙推荐一下,用bootstrap重构写,还是用jquerymobile

PC站点有现成的, 现在想快速做一个对于的移动站点有什么好推荐的,可以不用适配 , 可以跟PC 站点不同 模板 主要针对移动web端回复内容:PC站点有现成的, 现在想快速做一个对于的移动站点有什么好推荐的,可以不用适配 , 可以跟PC 站点不同 模板 主要针对移动web端两个我都用过,感觉Bootstrap更像一个CSS库,如果想要构建一个响应式布局的网站,它提供了不少方便的预定义class。 jQueryMobile更像一套完整的移动前端框架,除了...

jquerymobile是什么【图】

jQuery Mobile是jQuery 框架的一个组件(而非jquery的移动版本)。jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正...

jQuerymobile类库使用时加载导航历史的方法

这篇文章主要介绍了jQuery mobile开发中加载导航历史的方法,jQuery mobile是jQuery针对移动设备开发的JavaScript库,需要的朋友可以参考下jQuery.mobile.navigate( url [, data ] )改变URL和跟踪历史。作品为浏览器和无历史新的APIurl:是必须的参数。类型:字符串data:是可选的参数。类型:对象。 更改哈希片段两次然后日志提供导航事件数据时,浏览器向后移动的历史// Starting at http://example.com/ // Alter the URL: http:/...