jquery mobile开发常见问题分析

本文实例分析了jquery mobile开发常见问题。分享给大家供大家参考，具体如下：

jquery mobile功能很强大，有了它，不用在程序中，写方法去判断，是什么手机了，完全可以用js来实现各种智能手机的的兼容性。也是因为功能强大，jquery mobile插件，200多K，min也有140多K。

1、jquery mobile是通过ajax来进行页面请求，ajax大家都知道，是不涮新页面的。也就是说地址栏的变动也不是真实的涮新。这样就有问题了，js只有刷新页面的时候才会执行，起作用，页面中的js代码刷新页面起作用，点了页面里面的跳转，在转回来就不起作用了。

错误代码：

<script type="text/javascript">
$(function(){
  $('#search01').bind("click",function(){
    $('.searchPanel').show();
  });
});
</script>

正确代码：

<script type="text/javascript">
$(function(){
  $('#search01').live("click",function(){ //jquery 1.7系列
    $('.searchPanel').show();
  });
});
</script>

如果是jquery 1.9系列的

<script type="text/javascript">
$(document).on('click', '#search01', function () { //jquery 1.9系列
  $('.searchPanel').show();
});
</script>

2、所有页面都在一个页面里面，这个时候，就要注意了，id不要用一样的，不然只会读取第一个。多页面在一个页面里面，会出现很多问题。例如算标签到窗口顶部的距离，就会不准。

错误写法：

$('html,body').animate({
   scrollTop: $('.content').offset().top
}, 100);

这样写的问题是，当前页面，前面很可能有很多页面，这样top值就不对了，你如果刷新页面值就会正确

正确写法：

$('html,body').animate({
   scrollTop: $('.ui-page-active .content').offset().top
}, 100);

.ui-page-active，表示当前激活的页面，这样算出来的高度就是对的。

3、php变量赋值给JS变量，有的时候会起作用，有的时候不能。


代码如下:

color = '<?php echo $color?>';

对于这个问题，也没有找到是什么原因产生的。但是，可以用其他方法解决。

<input type="hidden" id='color' value='<?php echo $color;?>'>
<script type="text/javascript">
  color = $('.ui-page-active #color').val();
</script>

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 使用jQuery mobile库检测url绝对地址和相对地址的方法

    path.isAbsoluteUrl() 检测绝对网址 jQuery.mobile.path.isAbsoluteUrl(url) 如果一个URL是绝对的实用方法.如果URL是绝对的这个函数返回一个布尔值 true ,否则返回 false. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewpor

  • jQuery mobile转换url地址及获取url中目录部分的方法

    path.makeUrlAbsolute() 把相对URL转化为绝对URL jQuery.mobile.path.makeUrlAbsolute( relUrl, absUrl ) 把相对URL转化为绝对URL的方法.这个函数返回一个字符串,绝对URL. relUrl:相对网址.类型:字符串. absUrl:绝对网址.类型:字符串. <!doctype html> <html lang="en"> <head> <meta charset=&q

  • jquery.mobile 共同布局遇到的问题小结

    jquery.mobile 共同布局遇到的问题小结

    最近项目用上了jquery.mobile这货,在手机上做点简单的显示.之前只知道有这个框架,没把玩过. 特别是事件绑定方面,相比桌面系统下浏览器用着各种不爽,不得要领. 如下图,在做后台系统时,一般左侧都是一个个模块及下属菜单项,可展开折叠. 我的问题卡在了累计评价这块,为了页面复用,累计评价中嵌套了iframe做评论显示. 第一槛 有过移动WEB开发的同学应该知道,IOS浏览器下iframe中内容过多时,滚动条时不会出现的,内容好像被截断了. 查资料最终搞定,手机屏毕竟小,评论多的时候不可能像

  • 浅析jQuery Mobile的初始化事件

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

  • jquery mobile的触控点击事件会多次触发问题的解决方法

    jquery mobile 对手势触控提供了如下几个事件监听: 复制代码 代码如下: tap  当用户点屏幕时触发taphold 当用户点屏幕且保持触摸超过1秒时触发swipe 当页面被垂直或者水平拖动时触发.这个事件有其相关联的属性,分别为scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThresholdswipeleft 当页面被拖动到左边方向时触发s

  • jQuery mobile类库使用时加载导航历史的方法简介

    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.navi

  • jQuery Mobile弹出窗、弹出层知识汇总

    先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" data-overlay-theme="b" data-position-to="window" data-dismissible="false"> <a href='javascript:void(0)' data-rel="ba

  • jquerymobile局部渲染的各种刷新方法小结

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

  • jquery mobile开发常见问题分析

    本文实例分析了jquery mobile开发常见问题.分享给大家供大家参考,具体如下: jquery mobile功能很强大,有了它,不用在程序中,写方法去判断,是什么手机了,完全可以用js来实现各种智能手机的的兼容性.也是因为功能强大,jquery mobile插件,200多K,min也有140多K. 1.jquery mobile是通过ajax来进行页面请求,ajax大家都知道,是不涮新页面的.也就是说地址栏的变动也不是真实的涮新.这样就有问题了,js只有刷新页面的时候才会执行,起作用,页面

  • jQuery Mobile开发中日期插件Mobiscroll使用说明

    jQuery Mobile开发中日期插件Mobiscroll使用说明

    近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡 mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅 放在一起对比下 各位看官,你们觉得哪个

  • jQuery mobile 移动web(6)

    jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作.   taphold 触摸屏幕并保持一段时间.   swipe 在1秒内水平移动30px屏幕像素上时触发.   swipeleft 向左侧滑动   swiperight 像右侧滑动. 2.方向改变事件 orientationchange 事件函数当移动设备的方向发生改变触发,在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数,   该参数有两种返回值:p

  • jQuery Mobile漏洞会有跨站脚本攻击风险

    jQuery Mobile漏洞会有跨站脚本攻击风险

    概述 根据国外媒体的最新报道,谷歌公司的安全工程师Eduardo Vela在jQuery Mobile框架中发现了一个安全漏洞,这个漏洞将会让 所有使用了jQuery Mobile的网站暴露于跨站脚本攻击风险之下 . jQuery Mobile项目(jQuery框架中的一个组件)是一个基于HTML5的开发框架,在它的帮助下,开发者可以设计出能够适配目前主流移动设备和桌面系统的响应式Web站点以及应用程序.实际上,jQuery Mobile不仅可以为主流移动平台提供jQuery的核心库,而且它也是

  • jQuery Mobile页面跳转后未加载外部JS原因分析及解决

    在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中引用的JS并未成功运行.因为,JQM并为将整个页面加载到当前的dom中,仅将data-role="page"元素加入当前的dom中. 因此,在<head>中引入的外部JS文件,以及<page>标签外的JS均不能正常运行,刷新页面后方可加载成功. 鉴于JQM这个特性不太可能主动更改,可以用两种方法来解决:一是在index页面中,注册所有需要使用到的外

  • 使用jQuery Mobile框架开发移动端Web App的入门教程

    使用jQuery Mobile框架开发移动端Web App的入门教程

    一.jQuery Mobile 的渐进增强设计与浏览器支持 根据维基百科( Wikipedia ) 的解释,渐进增强的设计主要包括以下几点 basic content should be accessible to all web browsers (所有浏览器都应能访问全部基础的内容) basic functionality should be accessible to all web browsers (所有浏览器都应能访问全部基础的功能) sparse, semantic markup

  • jQuery Mobile和HTML5开发App推广注册页

    jQuery Mobile和HTML5的组合可以直接开发web版的app,所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发,那么html5+jqueryMobile你会立刻上手. html5比html4多了很多的标签,特别是多媒体这块有了很好的支持,但是如果只是做一般的web手机页面,那么多数标签是用不上的,JqueryMobile与jquery的不同点就在一些事件名称上,当然这里封装的也是html5的原生事件,还要说一个关于html5提倡的一

  • jquery mobile 移动web(5)

    有序列表 <div data-role="content"> <ol data-role="listview" data-theme="g"> <li><a href="#"> List 1</a></li> <li><a href="#"> List 2</a></li> <li&

  • jQuery Mobile页面返回不需要重新get

    jQuery Mobile页面返回不需要重新get

    jQuery Mobile 是用于创建移动 Web 应用的前端开发框架. jQuery Mobile 可以应用于智能手机与平板电脑. jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页. 最近公司的web app项目,使得我有幸一直接触和学习jQuery Mobile.这确实是一个很不错的移动开发库,有助于擅长web开发的工程师,快速入门并构建自己的移动应用.但是在前两天,我碰到了一个问题,使我查了很多资料都没有找到很好的解决方案,最终只能逼着我读jQuery Mo

随机推荐