Change the width of the JQM panels

问题

I ma trying to figure out how to change the width of the JQM panel animation. I can change the width of the content in the panel, but the animation still opens in a predefined width I don't know how to change.

Here is what I have tried and which changes the content.

.ui-panel {
    width: 150px;
}

I have looked through the JQM docs but havent found the solution. Hoping for help :-)

EDIT

Well, actually, I found this script which does the work, but... Only if I change all the @left-panel-width with an actual width like 150px? Why wont the @left-panel-width work?

@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
    }
}

Thanks in advance ;-)

回答1:

Working example: http://jsfiddle.net/Gajotres/7GvX4/

When working with jQuery Mobile if you want to override original CSS you must use !important. Also because jsFiddle don't support CSS variables everything is hardcoded.

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;
    }
}

回答2:

Check this page http://demos.jquerymobile.com/1.3.0/docs/examples/panels/panel-styling.html#demo-page -- look at the source... it says, "

Panel styling

    <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>

The top of the source code of the page has specific instructions. They worked for me.

来源：https://stackoverflow.com/questions/17488525/change-the-width-of-the-jqm-panels