1. 首页
  2. 问答
  3. 如何使用jquery-mobile添加主页按钮？

如何使用jquery-mobile添加主页按钮？

2010-11-10 48 views
18

默认情况下，jquery-mobile在主页面之后的每个页面上添加一个后退按钮。我想知道如何添加主页按钮？
下面是一个例子：http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html如何使用jquery-mobile添加主页按钮？

注：此链接是只适用于Firefox/Chrome的

感谢好。

来源

2010-11-10 Ravi Gupta

+0

您的链接指向1.0alpha1。只是为了让你知道 - 最新版本是alpha3，如果你使用任何参考或教程 - 那些alpha1是不兼容的。 – naugtur 2011-03-04 13:32:44

回答

21

在不修改jquery-mobile.js源代码的情况下，我唯一能做的就是将自己的导航链接添加到标题中。一旦添加了自己的链接，自动“返回”按钮将消失，因此我们将创建2个链接，一个用于后退，另一个用于回家。

您会注意到第2页和第3页都有后退按钮和主页按钮，您可以返回或直接跳到主页。这要求您修改每个页面的'标题'部分，但它并不是什么大不了的，因为它总是相同的（复制和粘贴）每个实例不需要修改。

'home'链接将位于右上角（按照第二个链接的默认行为将其置于右上角）。

这里是例子：

<!DOCTYPE html> 
<html> 
     <head> 
     <title>Page Title</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
</head> 
<body> 


<div data-role="page" id="firstpage"> 

     <div data-role="header"> 
       <h1>First Page</h1> 
     </div> 

     <div data-role="content"> 
       <p>I'm first in the source order so I'm shown as the page.</p> 
       <p>View internal page called <a href="#secondpage">second page</a></p> 
     </div> 

     <div data-role="footer"> 
       <h4>Page Footer</h4> 
     </div> 
</div> 

<div data-role="page" id="secondpage"> 

     <div data-role="header"> 
       <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a> 
     </div> 

     <div data-role="content"> 
       <p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p> 
       <p><a href="#thirdpage">Go to third page</a></p> 
     </div> 

     <div data-role="footer"> 
       <h4>Page Footer</h4> 
     </div> 
</div> 

<div data-role="page" id="thirdpage"> 

     <div data-role="header"> 
       <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a> 
     </div> 

     <div data-role="content"> 
       <p>I'm first in the source order so I'm shown as the page. (this is thirdpage)</p> 
     </div> 

     <div data-role="footer"> 
       <h4>Page Footer</h4> 
     </div> 
</div> 

</body> 
</html>

如果你想让它自动做到这一点，你也可以只砍了JS ...

这段代码后右（周围无缩小的jquery.mobile-1.0a2.js的1084线）

$("<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>") 
               .click(function() { 
                 history.back(); 
                 return false; 
               }) 
               .prependTo($this);

添加这样一行，其中#firstp年龄是你的主页的ID，我找不到一个方法来引用主页，而不用名字叫它，随时改善..我不想/或只是＃不会工作.. 。但这种方法可行

$("<a href='#firstpage' class='ui tn-right'>Home</a>").appendTo($this);

来源

2010-11-16 15:27:45 superfro

+1

谢谢你，这就是我一直在寻找的东西。 – 2010-11-16 18:58:20

23

有一个简单的解决方案：只需添加一个链接到你的头分度class="ui-btn-right"。这是至关重要的，这样jQuery Mobile后退按钮可以自动添加到左侧。还有一些其他的数据 - *属性，你可以用，所以你可以使用内置的主题图标等，如图所示：

<div data-role="page"> 
    <div data-role="header"> 
     <h1>Title</h1> 
     <a href="/" class="ui-btn-right" data-icon="home" data-iconpos="notext" 
      data-direction="reverse">Home</a> 
    </div> 
    <div data-role="content"> 
     ...

（显然，家庭href网址更改为明智的您的环境，不要“T只使用‘/’，因为它限制了您的应用程序可以部署）。

来源

2011-03-04 11:11:56

+0

如果您将'href'设置为与首页网址相同的网址，则可以完美运行 – 2012-03-14 21:02:56

1 
<div data-role="footer" class="ui-bar"> 
     <div data-role="controlgroup" data-type="horizontal"> 
      <a href="Main.html" data-role="button" rel=external><img src="/MobileTest/images/Home.png" /> </a> 
      <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/MyShare.png" /></a> 
      <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/SharedWithMe.png" /></a> 
      <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/settings.png" /></a> 
     </div> 
    </div>

你可以在你使用rel=externalhref标签。这将打开没有后退按钮的主页。

来源

2011-03-22 16:38:59 thomas

1

当首次使用jqm开发应用程序时，由于导航树很深，我希望顶部标题中的主页和后退按钮。使用诸如“ui-btn-right”或“ui-btn-left”这样的核心按钮类很有效 - 如果你只需要在每一边都有一个按钮。

但是，如果你像我一样，想要左边的两个按钮，你可以使用一个自定义的CSS和定位来获得它想要的位置。我还将按钮封装在自定义头类中，并使用CSS控制头中的标题。您需要将每个按钮放置在不同的z-index上，否则每个按钮都会与另一个按钮发生冲突。

这是标题：

<div id="home-btn" class="header-btn-left-pos1"> 
     <a href="config.html" data-role="button" data-icon="home" data-rel="home">Home</a> 
    </div><!-- /home-btn --> 

    <div id="back-btn" class="header-btn-left-pos2"> 
     <a href="#" data-role="button" data-icon="back" data-rel="back">Back</a> 
    </div><!-- /back-btn --> 

    <div class="header-title" align="center"> 
     <h4>Business Locations</h4> 
    </div><!-- /header-title --> 

</div><!-- /custom header -->

这是CSS：

.custom-header 
{ 
    height:18px; 
} 
.header-title 
{ 
    position:relative; 
    top:-10px; 
} 
.header-btn-left-pos1 
{ 
    position:absolute; 
    left:25px; 
    top:5px; 
    z-index:1; 
} 
.header-btn-left-pos2 
{ 
    position:absolute; 
    left:105px; 
    top:5px; 
    z-index:2; 
}

希望这给你更多的选择。

来源

2011-08-02 12:59:33

相关问题

 相关问题