Jquery幻灯片面板显示格式问题？

Question

我需要以下格式的侧面板，因为我使用了列表，但我没有得到require格式。我需要使用哪个标签来获取以下格式。此外，我需要面板应在标题下面打开，如下图所示，

我的代码如下，

<div data-role="panel" id="navpanel" data-display="reveal" data-position="left">
    <a href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-about ui-nodisc-icon" onClick='test()'>test</a>
    <a href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-privacy ui-nodisc-icon" onClick='test1()'>test1</a>
    <a href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-reset ui-nodisc-icon" onClick='test2()'>test2</a>
    <a href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-feedback ui-nodisc-icon" onClick='test3()'>tets3</a>
</div>

<a href="#navpanel" id="bars-button" data-role="button" data-icon="bars" data-iconpos="notext">Menu</a>

Answer 1

我为你创建了一个演示。

要在面板下打开面板，将面板（z-index）值调整到比标题更低的值，将实现该目标。

调整一些其他CSS值以更改项目符号和边框颜色，并添加Jquery脚本以在单击面板项时动态更改项目符号的颜色。

<强>演示

http://jsfiddle.net/HE96S/

使用整页叠加效果

http://jsfiddle.net/88aka4r1/

增加了css

@font-face {

  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 100;
  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');

}

.ui-panel-display-overlay {

z-index: 100;

}

.ui-page-theme-a .ui-btn, html .ui-bar-a .ui-btn, html .ui-body-a .ui-btn, html body .ui-group-theme-a .ui-btn, html head+body .ui-btn.ui-btn-a, .ui-page-theme-a .ui-btn:visited, html .ui-bar-a .ui-btn:visited, html .ui-body-a .ui-btn:visited, html body .ui-group-theme-a .ui-btn:visited, html head+body  {

border-color: #17A3F1;

}

#mypanel li a {  

font-family: 'open sans',arial,sans-serif;
font-size: 18px;
font-weight:lighter;

}


.ui-page-theme-a .ui-btn:hover, html .ui-bar-a .ui-btn:hover, html .ui-body-a .ui-btn:hover, html body .ui-group-theme-a .ui-btn:hover, html head+body .ui-btn.ui-btn-a:hover {

border-color: #17A3F1;

}

li, .aa > .ui-custom-icon:after {

background-color: rgba(15, 101, 229, 0.3);

}

#overlay  {

   width: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    background: url('http://s23.postimg.org/5q0dfwmbr/overlay.png') repeat 0 0;;
    display: none;

}

html, body {

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

}

<强> Jquery的

$('ul > li').click(function() { 

  $('ul > li').removeClass('aa'); 
  $(this).addClass('aa');

});

var $overlay_wrapper;

function show_overlay() {

    if ( !$overlay_wrapper ) append_overlay();
    $overlay_wrapper.fadeIn(700);

}

function hide_overlay() {

    $overlay_wrapper.fadeOut(500);

}

function append_overlay() {

    $overlay_wrapper = $('<div id="overlay"></div>').appendTo( $('.ui-mobile .ui-page') );

}


$( "#mypanel" ).on( "panelbeforeopen", function( event, ui ) {

    show_overlay();

});

$( "#mypanel" ).on( "panelbeforeclose", function( event, ui ) {

        hide_overlay();

});