jQuery Mobile 面板宽度答案

【问题标题】：jQuery Mobile panel widthjQuery Mobile 面板宽度
【发布时间】：2013-03-05 14:11:55
【问题描述】：

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

.ui-panel{width:150px;}

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

【问题讨论】：

您是否检查过封装 div 或面板中的任何元素？您可以随时尝试！important。您发布的代码似乎应该可以工作，这让我相信代码中的其他地方有问题。
看来我们需要一些框架级别的破解
查看文档，我认为该缺陷是另一个错字，我们应该在 css 文件中引用 .ui-panel，而不是 ui.panel。如果这是正确的，我会修改我的答案以反映它....
这是来自文档Panels have a fixed width of 17em (272 pixels) which is narrow enough to still show some of the page contents when open to make clicking out to close easy, while still looking good on wider tablet or desktop screens. The styles to set widths on panels are fairly complex but these can be overridden with CSS as needed.
对不起，我错了！我已经尝试了几个div。我也在文档中读到了同样的句子，并被它迷惑了。基本上它说这很难但可能，然后没有给出任何提示如何实现它。

标签： jquery css jquery-mobile

【解决方案1】：

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

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

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

【讨论】：

成功了！ :) 我计算了总共 5 个 CSS 类，我必须将属性从 17em 更改为我的新值。对于我认为应该很容易的事情来说似乎有点复杂！但是感谢您的回答:)，非常感谢！ :)

【解决方案2】：

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

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

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

【讨论】：

谢谢帕维尔！优秀的解决方案:)。我也不喜欢编辑库代码，但遗憾的是在这种情况下我别无选择。但这绝对有帮助！ :)

【解决方案3】：

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

【讨论】：

我也试过了，但同样的事情发生了，面板中的列表视图被调整了大小，并且在列表视图和主页内容之间创建了某种“无人区”

【解决方案4】：

我不想修改库 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)
}

【讨论】：

不管怎样，这似乎在 jQM 1.4.5 中仍然可以完美运行。至少，我还没有遇到任何问题……

【解决方案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);
}

【讨论】：

我试过了，但不幸的是它在 jquery mobile 1.4.1 中不起作用

【解决方案6】：

我想你打错了。试试

.ui-panel { width: 150px; }

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

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

当然，虽然我是 jquery 的新手，但我可能是错的。

【讨论】：

错字，这就是我原来的帖子的意思。这只会调整面板内容的大小，而不是实际面板
文档说“在面板上设置宽度的样式相当复杂，但可以根据需要用 CSS 覆盖这些样式。”不幸的是，它并没有解释复杂性……哈伦夫。 api.jquerymobile.com/panel

【解决方案7】：

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

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

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

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

【讨论】：