jquery mobile panel面板左右宽度设置css

以下是css样式，主要是覆盖了jquery mobile 原来的样式。

.ui-panel {

    width: 10em;

}

.ui-panel-position-left {

    left: -10em;

}

/* positioning: content wrap, fixed toolbars and dismiss */

/* panel left open */

.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: 10em;

    right: -10em;
}

/*左边边展开设置宽度*/

/* animated: panel left open (for reveal and push) */

.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);

}

/*右边展开设置宽度*/

/* animated: panel left open (for reveal and push) */

.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(-10em,0,0);

    -moz-transform: translate3d(10em,0,0);

    transform: translate3d(10em,0,0);
}

需要注意的是有的手机浏览器并不支持translate3d，所以修改之后，有的手机并没有效果，会中间出现一条黑色。