JQuery Mobile入门——设置后退按钮文字(转)

http://www.tuicool.com/articles/AZnYVz

JQuery Mobile入门——设置后退按钮文字

时间 2013-01-09 20:24:28  CSDN博客原文  http://blog.csdn.net/liang408015204/article/details/8487201

1、给page容器头部添加后退按钮,只需在page容器中添加data-add-back-btn属性,并将属性值设置为true。显示默认为back,可修改data-back-btn-text属性值来设置后退按钮中显示的文字。

2、示例代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML> 
 <HEAD> 
  <TITLE> New Document </TITLE> 
  <meta name="viewport" content="width=device-width,initial-scale=1"/> 
  <link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/> 
  <script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script> 
  <script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script> 
  <script type="text/javascript"> 
    $(function(){ 
  $.mobile.page.prototype.options.backBtnText="后退"; 

  </script> 
 </HEAD> 
 <BODY> 
   <div data-role="page" id="e1" data-add-back-btn="true"> 
     <div data-role="header"><h1>后退按钮文字</h1></div> 
<div data-role="content"><a href="#e2">下一页</a></div> 
<div data-role="footer"><h4>@2013 3I Studio</h4></div> 
   </div> 
    <div data-role="page" id="e2" data-add-back-btn="true"> 
     <div data-role="header"><h1>后退按钮文字</h1></div> 
<div data-role="content"><a href="#e3">尾页</a></div> 
<div data-role="footer"><h4>@2013 3I Studio</h4></div> 
   </div> 
    <div data-role="page" id="e3" data-add-back-btn="true" data-back-btn-text="首页"> 
     <div data-role="header"><h1>后退按钮文字</h1></div> 
<div data-role="content"><a href="#e1">首页</a></div> 
<div data-role="footer"><h4>@2013 3I Studio</h4></div> 
   </div> 
 </BODY>

</HTML>

3、效果图预览:

 点击下一页  点击尾页 

时间: 2024-10-09 23:27:10

JQuery Mobile入门——设置后退按钮文字(转)的相关文章

jQuery Mobile入门经典 ([美] Phil Dutson) 中文pdf扫描版

jQury Mobile是以全球最流行的jQuery为核心的跨平台移动Web应用开发框架,自从诞生以来,就赢得了业内专家和技术社区的强烈关注.<jQuery Mobile入门经典>采用直观.循序渐进的方法讲解了如何借助jQuery Mobile,通过一个单一的代码库来创建适合各种移动设备的移动应用.<jQuery Mobile入门经典>分为4部分:第1部分介绍了jQuery Mobile的基础入门知识:第2部分讲解了用户界面相关的知识,读者将学到如何使用jQuery Mobile来

HTML5移动开发之路(23)—— jQuery Mobile入门

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(23)-- jQuery Mobile入门 一.下载jQuery Mobile 下载地址:http://jquerymobile.com/ 点击Download 下载如下zip包 下载成功后如下图 解压目录如图: 点击index.html进入demo主页,这里面有很多例子. 二.创建JQuery Mobile的Helloword 1.创建demo 2.新建站点 3.站点建立成功后将生成的demo拷贝到站点中

jquery mobile入门

进来对移动前端开始了解,虽然与原来所做的服务端开发越离越远,也没办法.想什么都做好,毕竟很难,精力有限. 坚定地往前端路线走下去,废话不多说了,因为写的博客主要是作为自己学习笔记.并不过多说明,这里只贴上代码,相信有兴趣的人可以先从w3cschool网站去学习入门,基本上与我们pc端的前端开发一致. 具体效果,把下面代码复制到html文件里面运行一下就知道了. <!DOCTYPE html> <html> <head> <title>ButtonBar HT

jQuery Mobile 入门教程

原作:Getting started with jQuery Mobile   —— Matthew David http://www.cnblogs.com/yuzhongwusan/archive/2011/11/24/2261571.html 翻译:filod 译文:http://blog.filod.net/jquerymobile-2/295.html 转载声明:请注明原作.翻译以及译文链接. 你每天都会对着它讲话,和它玩游戏,用它看新闻——没错,它就是你裤兜里的智能手机.androi

移动框架jQuery Mobile入门

jQuery Mobile使用指南 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计. jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾.它是基本jQuery框架并提供了一定范围的用户接口和特性,以便于开发人员在移动应用上

jquery Mobile入门—多页面切换示例学习

1.在JQuery Mobile中,多个页面的切换是通过<a>元素.并将<href>属性设置为#+对应的id号的方式进行的. 2.多页面切换示例代码: 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta n

【学习】一本案例驱动的jQuery Mobile入门书

清华大学出版社推出的<构建跨平台APP:jQuery Mobile移动应用实战> 提供的全是jQuery Mobile的案例: 手机入侵 题库应用 音乐专辑 通讯录 新闻列表 销售排名 九宫格 课程表 相册 电子阅读器 计算器 记事本 大学移动校园项目 个人博客项目 在线音乐播放器 在线视频播放器 大学校园表白墙 天天背单词项目

jQuery Mobile 入门图文教程

你每天都会对着它讲话,和它玩游戏,用它看新闻--没错,它就是你裤兜里的智能手机.android,黑莓还是iphone?为了让你清楚意识到究竟哪些才算是智能手机,我在下面总结了一个智能手机系统/设备的列表: Apple iPhone/iPod Touch Google Android RIM BlackBerry/Playbook OS Nokia Symbian (我承认它该退休了,可是在世界范围内它仍然拥有10亿以上的用户) HP/Palm WebOS Microsoft Window Pho

按钮相关属性设置(按钮文字位置 和图片位置设置)

- (UIButton *)navSearBtn { if (!_navSearBtn) { _navSearBtn = [[UIButton alloc]init]; _navSearBtn.backgroundColor = [UIColor clearColor]; _navSearBtn.titleLabel.font = DEF_FontSize_14; [_navSearBtn setTitle:@"请输入关键词搜索" forState:UIControlStateNorm