jQuery Mobile 面板宽度

jQuery Mobile panel width

提问by danvdende

In the new jQuery mobile there is a new panel option. I have implemented this and it works, but I would like to customize the width of the panel. The standard width is 272px, which is a bit much for my use. I have tried using the

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

.ui-panel{width:150px;}

CSS selector, but this simply resizes the contents of the panel. The panel itself stays visible and remains the same width. Using the inspectors in firefox and chrome I have not been able to find the correct div responsible for this panel. Could anybody help me find a way to resize the panel in the correct manner?

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

回答by tylerl

I figured it out! It's not that complex, really. I myself am just using structure.css but if you're using other CSS files there MAY be more to customize. Anyway...

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

Using your favorite editor, do a find & replace for "17em" and replace that with the value you actually want. There's styling for left panels and styling for right panels. I wouldn't rush through this whole process as there could be an unrelated "17em" here or there. It just takes a minute...

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

It's a simple answer but I'm happy with myself :p

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

回答by Pavel Dubinin

I had same issue myself and followed tylerl's advice to replace 17em with the width I needed. Which worked well, except for the fact that I was using google cdn to load css, so I could not change it directly and in general I am not a big fan of changing library code.

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

So playing around with it a little I came up with this code for redefining default jquery mobile's css https://gist.github.com/geekdevs/5433246

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

You can configure width for left and right sidebars separately. This is LESS code, but simply replacing @left-sidebar-width and @right-sidebar-width with the width you need will make it work for plain CSS as well.

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

回答by Decko

They show how to change the panel width in this demo: http://jquerymobile.com/demos/1.3.0/docs/examples/panels/panel-styling.html

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

回答by aquila421

If you don't want to globally edit the size, add this to your custom css adding IDs where necessary, changing 23emto your desired width:

如果您不想全局编辑大小，请将其添加到您的自定义 css 中，并在必要时添加 ID，将23em更改为您想要的宽度：

Note:This is only for the left side.

注意：这仅适用于左侧。

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

回答by Sahil

I didn't wanted to make modifications to the library css file so I tried above patches but none of them worked on jquery mobile 1.4.1

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

I had to add few more styling to get it to work.

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

Here is my modified css. (replace 10em and 15 em with your left and right size respectively)

这是我修改后的 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)
}

回答by David Navarre

I think you've made a typo. Try

我想你打错了。尝试

.ui-panel { width: 150px; }

or if you're issuing that inline, perhaps

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

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

Of course, new as I am to jquery, I could be wrong.

当然，对于 jquery 来说，我是新手，我可能是错的。