`
liningjustsoso
  • 浏览: 48376 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery Mobile 技巧,常见问题,解决方案

阅读更多
1、强制覆盖模版的背景色
.ui-page{
     background:#ffffff;
}

说明:这段样式必须放在Jquery Mobile 模版样式的下方,这样才能进行覆盖。

2、禁止截断过长的列表和按钮内容
在jQuery mobile中,如果列表或者按钮中文字的内容过长,jQuery Mobile会自动截断其超过长度的内容。

1)设置按钮样式
.ui-btn-text {  
white-space: normal;  
} 


2)设置列表样式
.ui-li-desc {  
white-space: normal;  
}  


说明:这段样式必须放在Jquery Mobile 模版样式的下方,这样才能进行覆盖。如果不想设置全局的覆盖,那么只要在用到的地方写行内样式。
恢复截断的样式 white-space: nowrap;

3、移除项目列表中a标签的箭头

默认情况下,jQuery Mobile框架会为每一个列表项中带a标签的添加一个箭头,想要禁用箭头显示,需要在想要移除列表项设置data-icon="false"。

4、jQuery mobile 中使用$(document).ready(function() {});问题

由于jQuery mobile框架的影响,所有的链接请求都会被处理成ajax形式的请求,这样依赖document ready只会执行一次。
1)方法1,初始发中配置
$.mobile.ajaxEnabled = false;


2)方法2,用其他监听事件代替,如下所示
$("div[data-role='page']").bind('pageshow',function(event,ui){
    // do something
});

5、Jquery Mobile忽略页面中数字为电话号码,因为不这样处理的话,部分数据的样式会受到影响。

<meta content="telephone=no" name="format-detection" />


6、jquerymobile动态添加元素之后有些不能被正确渲染的解决方法:
1)listview:$(".list").listview("refresh");
2)div或其他元素:$(".list") .trigger( "create" );
0
0
分享到:
评论

相关推荐

    JqueryMobile常见问题整理

    **jQuery Mobile 常见问题及解决方案** **一、页面跳转时重复调用 `pageinit` 方法** 在使用 jQuery Mobile 进行移动应用开发时,`pageinit` 是一个非常重要的事件,它会在每个页面加载时触发。然而,有时在页面...

    jquerymobile经验小结

    本文将对使用 PhoneGap + jQuery Mobile 进行开发过程中遇到的一些常见问题进行总结,并提出相应的解决方案。 #### 二、解决按钮点击反应慢的问题 在移动设备上,用户从按下手指到触发 click 事件存在大约 300ms ...

    Sample of Master Mobile Web Apps with jQuery Mobile

    - **案例研究**:通过具体的实例分析,展示了如何利用jQuery Mobile解决实际问题,帮助读者更好地掌握所学知识。 #### 总结 《Master Mobile Web Apps with jQuery Mobile》是一本非常适合希望进入移动Web应用开发...

    jQuery常见问题列表展开收缩代码.zip

    5. **响应式设计**:jQuery.mobile.js的引入表明这个解决方案考虑了移动设备的屏幕尺寸和触摸交互。它提供了一套适配不同屏幕大小的组件和样式,确保在各种设备上都有良好的用户体验。 6. **性能优化**:在移动端,...

    新版jquery

    6. 第六章深入探讨Ajax应用,从Ajax的核心对象XMLHttpRequest到jQuery的Ajax解决方案,如load()、$.get()、$.post()和$.ajax()等。 7. 第七章介绍了jQuery插件,包括常用插件的使用和编写自己的jQuery插件的方法。 ...

    jQuery CookBook

    `$.animate()`函数允许开发者创建复杂的动画序列,而`.slideToggle()`和`.fadeIn()`等方法则提供了一键式解决方案。 5. **Ajax交互**:jQuery简化了Ajax请求,如`$.ajax()`, `.load()`, `.get()`, `.post()`等函数...

    键盘遮挡问题

    总的来说,解决键盘遮挡问题需要开发者具备跨平台的解决方案思维,了解不同平台的特性,并结合良好的用户体验设计。无论是iOS、Android还是Web开发,都有相应的技术和策略来处理这个问题,确保用户在输入时能够顺畅...

    jQ资料.rar

    4. **社区讨论**:Stack Overflow等社区有大量jQuery相关问题和解决方案,是学习的好去处(https://stackoverflow.com/questions/tagged/jquery)。 总之,jQuery是Web开发者的得力工具,掌握其核心概念和实用技巧...

    AppCan移动应用快速开发平台概述

    - **完善的服务支持**:平台提供了丰富的文档和技术支持,帮助开发者快速掌握开发技巧,并解决开发过程中遇到的问题。 - **强大的插件系统**:开发者可以通过插件扩展应用的功能,满足更加复杂的应用需求。 - **UI...

    软件工程师实习报告3000字 (2).pdf

    能够准确地表述问题有助于更快地找到解决方案。 7. **产品开发中的用户体验**:报告提到,虽然导师重视代码效率,但在用户体验和交互设计上可能稍显不足。在产品开发中,用户体验和交互设计同样重要,它们影响着...

    bootstrap3中文文档_cn20131130

    10. **问题与解决方案**:针对开发者在使用过程中可能遇到的问题,提供了一些常见的解决方案和技巧。 这个"new_cn"文件很可能是文档的更新或修订版,对于已经熟悉Bootstrap3基础的开发者来说,这样的更新可以帮助...

    HTML5+CSS3在触屏网站上的实践

    - **Mobile Server**:专门针对移动设备优化的服务端解决方案。 - **Map Json**:用于地图数据传输的格式,方便客户端进行地图渲染和交互。 #### 前端结构 文档中提到的前端结构主要包括以下几个方面: - **JS...

    AJAX高级程序设计源代码

    现代解决方案如Google的Prerendering和AMP(Accelerated Mobile Pages)可以帮助解决这个问题。 8. **用户体验**:使用AJAX可以提供更流畅的用户体验,但也要注意避免过度依赖AJAX导致的页面加载延迟问题,以及对...

    前端学习会用到的网站

    - 探索最佳实践和常见问题解决方案。 #### 19. MUI - **网址**:http://dev.dcloud.net.cn/mui/ui/#accordion - **简介**:一套基于原生 HTML5 的移动前端 UI 框架。 - **使用场景**: - 加速移动 Web 应用的开发...

    slide-page:H5 滑动翻页

    在实际项目中,开发者可能会利用现有的库或者框架,如Swiper.js或者jQuery Mobile,这些工具已经封装了滑动翻页的实现,提供了一套完整的解决方案,使得开发者可以更专注于内容的创作,而不是底层的技术实现。...

Global site tag (gtag.js) - Google Analytics