2013-04-14 74 views
1

我根據http://view.jquerymobile.com/1.3.1/dist/demos/examples/panels/panel-styling.html中的示例設置我的面板的寬度。 一切都很好,但我的固定工具在頁腳移動比標題和內容更進一步。這使固定工具欄與面板之間存在差距。 任何人都知道如何解決這個問題? 謝謝。使用固定工具欄的Jquery Mobile Panel造型

+0

請在您的問題中添加更多細節.. – 5ervant

+1

解決。我發現我應該添加.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,在css文件中。 – user2279231

+0

然後你可以回答你自己的問題,並選擇它作爲正確的答案.. – 5ervant

回答

1
#demo-page #left-panel.ui-panel { 
    width: 15em; 
} 
#demo-page #left-panel.ui-panel-closed { 
    width: 0; 
} 
#demo-page .ui-panel-position-left.ui-panel-display-reveal { 
    left: 0; 
} 
#demo-page .ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open, 
.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, 
.ui-panel-dismiss-position-left.ui-panel-dismiss-open { 
    left: 15em; 
    right: -15em; 
} 
#demo-page .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, 
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal { 
    left: 0; 
    right: 0; 
    -webkit-transform: translate3d(15em,0,0); 
    -moz-transform: translate3d(15em,0,0); 
    transform: translate3d(15em,0,0); 
} 
/* Reveal menu shadow on top of the list items */ 
#demo-page .ui-panel-display-reveal { 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
} 
#demo-page .ui-panel-content-fixed-toolbar-position-left, .ui-panel-content-wrap-position-left { 
    -webkit-box-shadow: -5px 0px 5px rgba(0,0,0,.15); 
    -moz-box-shadow: -5px 0px 5px rgba(0,0,0,.15); 
    box-shadow: -5px 0px 5px rgba(0,0,0,.15); 
}