jQuery Mobileのデフォルトのnavbarには、どのようにセンターボトムのnavbarボタンが大きくなっていますか？

Question

jQuery Mobileサイトの下部ナビゲーションバーに大きなセンターボタンを作成するにはどうすればいいですか？ This is the effect I would like to have。

ボタンとアプリケーションのメインウィンドウが重なって、ナビゲーションバーが壊れないようにするには、どのCSSとjQueryが必要ですか？

Answer 1

これは、あなたがかなりよく始める必要があります。ここでは

.ui-mobile .ui-page .ui-footer .ui-navbar .ui-btn.ui-btn-active { 

    /*to make the active nav item stick-out we need to make it absolutely positioned*/ 
    position : absolute; 

    /*this width is based on the number of nav items, 4 items means 25% for each*/ 
    width : 25%; 

    /*you can change this to however tall you want to make the active nav item*/ 
    height : 50px; 

    /*this places the active nav item at the same height as the rest of the nav items*/ 
    bottom : -39px; 

    /*normal nav items are z-index:10, so this will place the active one above the others*/ 
    z-index : 11; 

    /*this adds the top-left and top-right rounded corners*/ 
    -webkit-border-top-right-radius : 6px; 
     -moz-border-top-right-radius : 6px; 
      border-top-right-radius : 6px; 
    -webkit-border-top-left-radius : 6px; 
     -moz-border-top-left-radius : 6px; 
      border-top-left-radius : 6px; 
    -webkit-background-clip : padding-box; 
     -moz-background-clip : padding; 
      background-clip : padding-box; 

    /*this adds box shadow to the active nav item*/ 
    -webkit-box-shadow : 0 -1px 8px #000; 
     -moz-box-shadow : 0 -1px 8px #000; 
      box-shadow : 0 -1px 8px #000; 
} 

/*we need to override the default "overflow:hidden" for a couple elements so our active nav item doesn't get clipped*/ 
.ui-mobile .ui-page .ui-footer .ui-navbar, 
.ui-mobile .ui-page .ui-footer .ui-navbar ul { 
    overflow : visible; 
}​ 

がAでデモ：http://jsfiddle.net/gNnDJ/

Answer 2

私は、ナビゲーションバーの構造/ CSSが何であるかをかなり確実ではないけど、多分これは動作します：

z-index: 2 //This number must be higher than the z-index-number of the other navabar-element 
bottom: 0px 
//Depending on the normal size of your navbar. 
width: x 
height: y