JQuery mobile navbar с разделенными кнопками и сбрасыванием

Question

Мне нужно выпадающее меню с разделенными кнопками ... Что-то вроде навигатора, состоящего из сплит-кнопок, каждая кнопка будет иметь текст и стрелку, , если вы нажмете на текст он вызывает обработчик (который будет отображать/скрывать вещи), если вы нажмете на стрелку, которую он открывает, выпадаете под кнопкой.

Я думаю, что я могу сделать это с помощью мобильного разделенного списка JQuery, но мне еще нужно перечислить кнопки horizzontally и откройте раскрывающийся под ними ...

Это то, что я до сих пор in fiddle

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

Так как я могу это сделать? Есть ли способ разобраться с навигационной панелью или плагином?

Имейте в виду, что я не могу использовать обычный выпадающее меню, потому что сенсорные экраны не имеют мыши над событиями ...

Answer 1

Вместо того, чтобы использовать списки расщепленные, как о создании двух навигационных кнопок для каждого разделенного элемента списка , Можно было бы иметь текст, а другой будет иметь значок:

<div data-role="foooter" data-position="fixed"> 
    <div class="ui-grid-c"> 
     <div class="ui-block-a"> 
      <a data-role="button" data-shadow="false" data-corners="false" href="#">Text 1</a> 
     </div> 
     <div class="ui-block-b"> 
      <a data-role="button" data-icon="delete" data-iconpos="notext" data-shadow="false" data-corners="false" href="#">Text 2</a> 
     </div> 
     <div class="ui-block-c"> 
      <a data-role="button" data-shadow="false" data-corners="false" href="#">Text 2</a> 
     </div> 
     <div class="ui-block-d"> 
      <a data-role="button" data-icon="home" data-iconpos="notext" data-shadow="false" data-corners="false" href="#">Text 2</a> 
     </div> 
    </div> 
</div> 

Вот демо: http://jsfiddle.net/neSDT/

Это, безусловно, нуждается в полировке, но это может вам начать работу.