9

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

.ui-panel{width:150px;}

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

4

7 回答 7

16

我想到了！没那么复杂，真的。我自己只是在使用 structure.css，但如果您使用其他 CSS 文件，则可能需要更多自定义。反正...

使用您最喜欢的编辑器，查找并替换“17em”并将其替换为您实际想要的值。左侧面板有样式，右侧面板有样式。我不会急于完成整个过程，因为这里或那里可能有一个不相关的“17em”。只需一分钟...

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

于 2013-03-22T07:06:26.177 回答
11

我自己也遇到了同样的问题，并按照 tylerl 的建议将 17em 替换为我需要的宽度。效果很好，除了我使用 google cdn 加载 css 的事实，所以我不能直接更改它，而且总的来说我不是更改库代码的忠实粉丝。

所以玩了一下我想出了这段代码来重新定义默认的jquery mobile的css https://gist.github.com/geekdevs/5433246

您可以分别配置左侧和右侧边栏的宽度。这是 LESS 代码，但只需将 @left-sidebar-width 和 @right-sidebar-width 替换为您需要的宽度即可使其也适用于纯 CSS。

于 2013-04-22T08:33:37.223 回答
5

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

于 2013-03-11T20:51:50.743 回答
2

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

我必须添加更多样式才能使其正常工作。

这是我修改后的css。（分别用您的左右尺寸替换 10em 和 15 em）

.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)
}
于 2014-02-24T11:16:16.103 回答
1

如果您不想全局编辑大小，请将其添加到您的自定义 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);
}
于 2013-07-16T19:53:01.173 回答
0

我想你打错了。尝试

.ui-panel { width: 150px; }

或者如果您要发布该内联，也许

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

当然，尽管我对 jquery 很陌生，但我可能是错的。

于 2013-03-05T15:06:35.723 回答
0

你需要把下面的CSS（左面板）

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

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

    transform: translate3d(150px,0,0) !important;
}
于 2020-06-20T16:36:23.847 回答