Jquerymobile - 生成类似FB menu的方法和自定义panel reveal的宽带

其实在jquerymobile里面生成类似facebook的非常容易。方法如下：

1。建立一个panel并建立一个listview

<div data-role="panel" id="category" data-position="left" data-display="reveal" data-dismissible="false" data-position-fixed="true">
     <ul data-role="listview" data-count-theme="b" data-filter="true" data-filter-placeholder="搜索菜品" data-inset="true">
    <li><a href="#">煲饭类<span class="ui-li-count">12</span></a></li>
    <li><a href="#">套饭类</a></li>
    <li><a href="#">每日打折</a></li>
    <li><a href="#">Cranberry</a></li>
    <li><a href="#">Grape</a></li>
    <li><a href="#">Orange</a></li>
    </ul>
    </div>

定义的panel 属性 

data-display="reveal" 现实方式

data-dismissible="false" 打开后点击其他地方不能关闭该panel

data-position="left" 从哪一边滑动打开

默认的panel css 是设定的左边滑动打开17em，我们可以自己更改成自己的宽带，这时需要写jquerymobile的css, 仔细阅读注释

/*重写jquerymobile的panel css左右reveal的宽度，左边reveal的宽度是10em 右边宽带是15em 可以自己定义
*重写文件需要放在jquery.mobile-1.4.0.min.css后面。注意文件加载顺序
*/
.ui-panel {
    width: 10em;
}

.ui-panel.ui-panel-position-right {
    width: 15em;
}

.ui-panel.ui-panel-closed {
    width: 0;
}

.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
    -webkit-transform: translate3d(-10em, 0, 0);
    -moz-transform: translate3d(-10em, 0, 0);
    transform: translate3d(-10em, 0, 0)
}

.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
    -webkit-transform: translate3d(15em, 0, 0);
    -moz-transform: translate3d(15em, 0, 0);
    transform: translate3d(15em, 0, 0)
}

.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-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
    -webkit-transform: translate3d(10em, 0, 0);
    -moz-transform: translate3d(10em, 0, 0);
    transform: translate3d(10em, 0, 0)
}

.ui-panel-animate.ui-panel-page-content-position-left{
    -webkit-transform: translate3d(10em, 0, 0);
    -moz-transform: translate3d(10em, 0, 0);
    transform: translate3d(10em, 0, 0);
}

.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
    -webkit-transform: translate3d(-15em, 0, 0);
    -moz-transform: translate3d(-15em, 0, 0);
    transform: translate3d(-15em, 0, 0)
}
/****************************panel重新css完*****************************/