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

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

 

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

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、效果图预览:

技术分享 点击下一页 技术分享 点击尾页 技术分享 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。