Question

在新的jQuery mobile中有一个新的面板选项。我实现了它并且它可以工作，但我想自定义面板的宽度。标准宽度为272px，这对我的使用有点多。我尝试过使用

.ui-panel{width:150px;}

CSS选择器，但这只是调整面板内容的大小。面板本身保持可见并保持相同的宽度。使用firefox和chrome中的检查器我无法找到负责此面板的正确div。有人能帮我找到一种以正确方式调整面板大小的方法吗？

Answer 1

我明白了！真的，这并不复杂。我自己只是使用structure.css，但如果你正在使用其他CSS文件，可能还有更多的自定义。总之...

使用您喜欢的编辑器，进行查找＆amp;替换“17em”并将其替换为您实际想要的值。左侧面板采用造型设计，右侧面板采用造型设计。我不会急于完成整个过程，因为这里或那里可能存在无关的“17em”。这只需要一分钟......

这是一个简单的答案，但我对自己很满意：p

Answer 2

我自己也有同样的问题，并按照tylerl的建议用我需要的宽度替换17em。哪个效果很好，除了我使用google cdn加载css的事实，所以我无法直接更改它，一般来说我不是更改库代码的忠实粉丝。

因此，我想了解一下这个代码，重新定义了默认的jquery mobile＆＃c; https://gist.github.com/geekdevs/5433246

您可以分别配置左侧和右侧边栏的宽度。这是一个很少的代码，但只需用你需要的宽度替换@ left-sidebar-width和@ right-sidebar-width就可以使它适用于纯CSS。

Answer 3

他们将演示如何在此演示中更改面板宽度：http://jquerymobile.com/demos/1.3.0/docs/examples/panels/panel-styling.html

Answer 4

我不想对库css文件进行修改，所以我尝试了上面的补丁，但没有一个在 jquery mobile 1.4.1上运行

我必须添加更多样式才能让它发挥作用。

这是我修改过的CSS。（分别用你的左右尺寸替换10em和15em）

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

Answer 5

如果您不想全局修改尺寸，请将其添加到自定义css中，在必要时添加ID，将 23em 更改为所需的宽度：

注意：这仅适用于左侧。

.ui-panel {
    width: 23em;
}
.ui-panel-position-left {
    left: -23em;
}
/* 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: 23em;
    right: -23em;
}
/* 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(23em,0,0);
    -moz-transform: translate3d(23em,0,0);
    transform: translate3d(23em,0,0);
}

Answer 6

我认为你犯了一个错字。尝试

.ui-panel { width: 150px; }

或者如果你发布内联，也许是

<panel style="width: 150px;">

当然，我和jquery一样新，我可能是错的。

Answer 7

您需要放置以下CSS（左侧面板）

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

.ui-panel-animate.ui-panel-page-content-position-left {

    transform: translate3d(150px,0,0) !important;
}

jQuery Mobile面板宽度

7 个答案: