如何：标题按钮样式Foursquare（Jquery Mobile）

我想添加一个按钮到我们的Jquery Mobile webapp。我说从Foursquare应用程序，其显示upperright“签入”按钮和图标的屏幕截图，我们很乐意在我们头实现..如何：标题按钮样式Foursquare（Jquery Mobile）

http://www.iclarified.com/images/news/26011/99138/99138.png

我们可以;吨弄清楚如何imlement这一点。我们现在的Navbar能够让我们像FSQ按钮一样的按钮样式，但是我们只需要在我们的Header中有一个按钮，右对齐。

有人已经设计过这样的东西，可以帮助我们吗？

来源

2012-12-20 user1483464

是的，它可以做到，这里是一个简单的例子：

<body> 
     <div data-role="page"> 
      <div data-role="header"> 
       <h1>Foursquare Like</h1> 
       <a href="#" data-icon="arrow-d" class="ui-btn-right">Checkin</a> 
      </div> 
      <div data-role="content"> 
       <p>This is a test page</p> 
      </div> 
     </div> 
    </body>

查看更多在这里：http://jquerymobile.com/demos/1.2.0/docs/toolbars/docs-headers.html 的jsfiddle例子：http://jsfiddle.net/Twisty/xWzFt/

来源

2012-12-20 23:09:20 Twisty

但我想没有buttun喜欢的那一个。如图所示，我希望它的样式只是一个图标。我如何设计这种风格？ – user1483464

设计您的图像或精灵并将其设置为'DIV'的背景。或者在'DIV'里面使用'IMG'。然后你可以把它放在标题栏中。 – Twisty

如何：标题按钮样式Foursquare（Jquery Mobile）

回答

相关问题