修改

Question

我试图弄清楚如何更改JQM面板动画的宽度。我可以更改面板中内容的宽度，但动画仍会以预定义的宽度打开，我不知道如何更改。

以下是我尝试过的内容以及更改内容的内容。

.ui-panel {
    width: 150px;
}

我查看了JQM文档但未找到解决方案。希望得到帮助： - ）

修改

嗯，实际上，我发现这个脚本可以完成这项工作，但是......只有当我用@ 150px的实际宽度更改所有@左面板宽度时？为什么@左面板宽度不起作用？

@left-panel-width: 100px;
@right-panel-width: 100px;

.ui-panel {
    width: @left-panel-width;
}

.ui-panel.ui-panel-position-right {
    width: @right-panel-width;
}

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

.ui-panel-position-left {
    left: -@left-panel-width;
}

.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(-@left-panel-width, 0, 0);
    -moz-transform: translate3d(-@left-panel-width, 0, 0);
    transform: translate3d(-@left-panel-width, 0, 0)
}

.ui-panel-position-right {
    right: -@right-panel-width
}

.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(@right-panel-width, 0, 0);
    -moz-transform: translate3d(@right-panel-width, 0, 0);
    transform: translate3d(@right-panel-width, 0, 0)
}

.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: @left-panel-width;
    right: -@right-panel-width
}

.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(@left-panel-width, 0, 0);
    -moz-transform: translate3d(@left-panel-width, 0, 0);
    transform: translate3d(@left-panel-width, 0, 0)
}

.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-right.ui-panel-content-wrap-open, .ui-panel-dismiss-position-right.ui-panel-dismiss-open {
    left: -@left-panel-width;
    right: @right-panel-width
}

.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(-@right-panel-width, 0, 0);
    -moz-transform: translate3d(-@right-panel-width, 0, 0);
    transform: translate3d(-@right-panel-width, 0, 0)
}

@media (min-width:55em) {
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
        margin-right: @right-panel-width
    }

    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
        margin-left: @left-panel-width
    }
}

提前致谢; - ）

Answer 1

工作示例：http://jsfiddle.net/Gajotres/7GvX4/

使用jQuery Mobile时，如果要覆盖原始 CSS ，则必须使用！important 。另外，因为 jsFiddle 不支持 CSS 变量，所有内容都是硬编码的。

<强> CSS：

.ui-panel {
    width: 50px !important;
}

.ui-panel.ui-panel-position-right {
    width:  50px !important;
}

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

.ui-panel-position-left {
    left: 50px !important;
}

.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(50px, 0, 0) !important;
    -moz-transform: translate3d(50px, 0, 0) !important;
    transform: translate3d(50px, 0, 0) !important;
}

.ui-panel-position-right {
    right: 50px !important;
}

.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(50px, 0, 0) !important;
    -moz-transform: translate3d(50px, 0, 0) !important;
    transform: translate3d(50px, 0, 0) !important;
}

.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: 50px !important;
    right: 50px !important;
}

.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(50px, 0, 0) !important;
    -moz-transform: translate3d(50px, 0, 0) !important;
    transform: translate3d(50px, 0, 0) !important;
}

.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-right.ui-panel-content-wrap-open, .ui-panel-dismiss-position-right.ui-panel-dismiss-open {
    left: 50px !important;
    right: 50px !important;
}

.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(50px, 0, 0) !important;
    -moz-transform: translate3d(50px, 0, 0) !important;
    transform: translate3d(50px, 0, 0) !important;
}

@media (min-width:55em) {
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
        margin-right: 50px !important;
    }

    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
        margin-left: 50px !important;
    }
}

Answer 2

查看此页面http://demos.jquerymobile.com/1.3.0/docs/examples/panels/panel-styling.html#demo-page - 查看来源......它说，“

面板样式

    <p>In this demo we show you how to:</p>

    <ul>
        <li>Change the width of a panel.</li>
        <li>Create a panel navmenu with listviews and collapsibles.</li>
        <li>Change the shadow of a reveal menu so it is on top of the list items.</li>
        <li>Set a background image for a page that contains a panel.</li>
        <li>Give the page a responsive layout with CSS columns.</li>
    </ul>

页面源代码的顶部有特定说明。他们为我工作。

更改JQM面板的宽度

修改

2 个答案:

面板样式