Чувствительные кнопки заголовка JQuery Mobile

Question

У меня следующая проблема с моей секции заголовка в моем Jquery мобильного приложения:

Вот код:

<div data-role="footer" class="ui-bar"> 
      <a href="#searchpage" data-role="button" data-icon="search" style="border-right:1px solid #0E6251;">Search</a> 
      <a href="#sellbookpage" data-role="button" id="ContactSellButton" data-icon="dollar" style="border-right:1px solid #0E6251;">Sell</a> 
      <a href="#" data-role="button" data-icon="email">Contact Us</a> 

      <div id='ContactUsProfileButtons' class='ui-btn-right' style="display: flex;"> 
       <a data-icon='home' href="#profilepage" data-role='button' style="border-right:1px solid #0E6251;">Profile</a> 
       <a data-icon='forward' onclick='LogOut()' data-role='button'>Log Out</a> 
      </div> 

В идеале я хотел бы кнопки конденсироваться в выпадающем меню, как показано в twitter bootstrap. Но я не могу понять это правильно. Является ли jquery mobile a) не для этого? б) если нет, то как я могу исправить проблему?

Примечание для кода Я следовал за этим link. Я знаю, что я использую класс нижнего колонтитула здесь, но я просто сделал это, чтобы кнопки были отформатированы рядом друг с другом и имели свободу передвигать их, не беспокоясь о тегах.

 </div> 

Answer 1

Я имел взгляд на Twitter Bootstrap и если вы после страницы тянуть вниз, что показывает меню я сделал демо для JQM здесь Javascript Menu like JQuery Mobile

Я создал еще одну демонстрацию в боковом меню, чем выцветает и после нажатия. Простой и приятный, как и в приложении Gmail.

Кнопка для открытия и закрытия находится слева от заголовка, так как я наклоняю ее справа от нее, должно быть, так же, как и скрипка, накладывается оверлей, говорящий результат, и его трудно получить щелчок.

Demo Я использую шрифт Высокий иконки, как есть больше разнообразия для меню

http://jsfiddle.net/qd0cfvd6/

HTML

<div data-role="header"> 
<a data-iconpos="notext" id="panelleft" data-role="button"><i class="button fa fa-ellipsis-v"></i></a> 
    <h1>Page Title</h1> 
</div> 

<div id="menu"> 
    <ul data-role="listview"> 
     <li><i class="icon fa fa-search"></i><span class="text">Search</span></li> 
     <li><i class="icon fa fa-envelope"></i><span class="text">Contact</span></li> 
      <li><i class="icon fa fa-book"></i><span class="text">Profile</span></li> 
      <li><i class="icon fa fa-level-up"></i><span class="text">Logout</span></li> 
    </ul> 
</div> 

CSS

#menu{ 
    width:100px !important; 
    height: auto; 
    padding:10px; 
    background-color:#fff; 
    position:fixed; 
    top:47px; 
    right:0px; 
    -moz-box-shadow:-2px 0px 5px #aaa; 
    -webkit-box-shadow:-2px 0px 5px #aaa; 
    box-shadow:-2px 0px 5px #aaa; 
    width:100px; 
    display:none; 
} 

.ui-btn-left, .ui-btn-right { 
border: 0 !important; 
background-color: transparent !important; 
box-shadow: none !important; 
} 

.fa { 
font-size:18px; 
} 

.icon { 
margin-left:-14px; 
font-size:12px 
} 
.text { margin-left:20px !important; 
font-size:12px } 
} 

Jquery

$(document).on("click",".button", function(){ 
$('#menu').fadeToggle("fast"); 
}); 

Результат

Update 29 Декабрь 2014

Я наткнулся на это turtorial http://www.syncano.com/getting-started-reactjs-tutorial/, который использует Реагировать Js и скорость, что читает точное всплывающее меню в собственном приложении для Android и сделал быструю демонстрацию только с использованием JQuery и анимации Velocity. Захват http://julian.com/research/velocity/. Кредит тому, кто сделал оригинальную демонстрацию и для кода скорости.

Demo Некоторые Css нужно крепление для правильного использования, но это выглядит нормально

http://jsfiddle.net/zhxc830f/