split 버튼이있는 Jquery 모바일 navbar

Question

분할 버튼이있는 드롭 다운 메뉴가 필요합니다 ... 분할 버튼으로 구성된 navbar와 같은 기능으로 모든 버튼에는 텍스트와 화살표가 있습니다. 텍스트를 클릭하면 그것은 핸들러를 호출합니다 (즉, 내용을 표시하거나 숨 깁니다). 화살표를 클릭하면 버튼 아래에 드롭 다운이 열립니다.

나는 내가 JQuery와 모바일 분할리스트와 함께 할 수 있다고 생각하지만, 난 여전히이 내가 지금까지 무엇을 가지고

... horizzontally 버튼을 나열하고 아래로 그 아래의 드롭을 열 필요가 in fiddle

HERE과 같은 아이콘이 클릭되었을 때 드롭 다운을 열어야하지만 아이콘이 클릭되면

어떻게하면됩니까? navbar 또는 플러그인을 사용하여 디 방법이 있습니까?

터치 스크린 이벤트를 통해 마우스를 가지고 있겠지 때문에 다운 메뉴 정상적인 놓기를 사용하지 못할 것을 알고 있어야합니다 ...

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/

그것은 확실히 연마 필요가 있지만, 이것은 당신이 시작할 수 있습니다.