0

jQuery Mobileサイトの下部のナビゲーションバーに大きな中央のボタンを作成するにはどうすればよいですか？これが私が欲しい効果です。

ナビゲーションバーを壊さずにボタンをアプリのメインウィンドウに重ねるには、どのCSSとjQueryが必要ですか？

4

2 に答える 2

2

これにより、かなりうまく始めることができます。

.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;
}​

これがデモです：http：//jsfiddle.net/gNnDJ/

于 2012-04-20T20:37:33.420 に答える
1

navbarの構造/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
于 2012-04-20T18:21:59.103 に答える