jQuery Mobile面板宽度

Question

在新的jQuery mobile中，有一个新的面板选项。我已经实现了这个功能，但我想自定义面板的宽度。标准宽度为272px，对我的使用来说有点大。我已经尝试使用

.ui-panel{width:150px;}

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

- danvdende

---

你有检查过包裹 div 或面板内的任何元素吗？你可以尝试使用 !important。你发布的代码看起来应该能够工作，这让我相信代码的其他地方可能存在问题。 - Rice_Crisp

似乎我们需要一些框架级别的黑客技巧。 - Jay Mayu

查看文档后，我认为这个漏洞是另一个打字错误，在CSS文件中我们应该引用.ui-panel而不是ui.panel。如果是这样的话，我会修改我的答案以反映这一点... - David Navarre

面板的固定宽度为17em（272像素），当打开时仍然可以显示页面内容以使单击关闭更容易，同时在更宽的平板电脑或桌面屏幕上仍然具有良好的外观。设置面板宽度的样式相当复杂，但这些样式可以根据需要使用CSS覆盖。 - Jay Mayu

抱歉，我的错别字。我尝试了几个div。我也在文档中读到了同样的句子，感到困惑。基本上它说这很难但是可能，然后根本没有给出任何提示如何实现它。 - danvdende

使用jQuery Mobile 1.4.5，最初建议的解决方案可行-只需为.ui-panel设置宽度即可获得预期的大小调整行为。 - Andy Lorenz

Answer 1

我弄清楚了！其实这并不复杂。我自己只是使用structure.css，但如果您使用其他CSS文件，则可能需要更多自定义。无论如何...

使用您喜欢的编辑器，查找并替换"17em"，用您实际想要的值进行替换。有左侧面板的样式和右侧面板的样式。我不会在整个过程中匆忙行事，因为可能会有与此无关的" 17em"。这只需要一分钟...

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

- tylerl

---

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

Answer 2

我曾经遇到同样的问题，按照tylerl的建议用所需的宽度替换了17em。这很有效，但是我使用Google cdn加载CSS，因此我无法直接更改它，而且通常我不喜欢更改库代码。

稍作尝试后，我想出了重新定义默认jquery mobile css的这段代码：https://gist.github.com/geekdevs/5433246

您可以单独配置左侧和右侧侧边栏的宽度。这是LESS代码，但是将@left-sidebar-width和@right-sidebar-width替换为所需的宽度也适用于纯CSS。

- Pavel Dubinin

---

谢谢Pavel！非常好的解决方案：）。我也不喜欢编辑库代码，但在这种情况下，我很遗憾没有选择。但这肯定会有所帮助！:) - danvdende

Answer 3

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

- Decko

---

我也尝试过那样做，但是同样的问题仍然存在，面板中的列表视图被调整大小了，而且在列表视图和主页面内容之间出现了某种“无人区”。 - danvdende

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

- Sahil

---

就我所知，这在 jQM 1.4.5 中仍然完美运行。至少，我还没有遇到任何问题... - user909694

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

- aquila421

---

我尝试过这个，但不幸的是它在jquery mobile 1.4.1中无法工作。 - Sahil

Answer 6

我认为你打错了字。请尝试

.ui-panel { width: 150px; }

或者如果你是在行内发出的，也许

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

当然，作为一个新手，我可能是错的。

- David Navarre

---

笔误，这就是我在原帖中的意思。它只调整面板内容的大小，而不是实际面板的大小。 - danvdende

文档中说：“在面板上设置宽度的样式相当复杂，但可以根据需要使用CSS进行覆盖。”不幸的是，它没有解释这些复杂性... 哼。http://api.jquerymobile.com/panel/ - David Navarre

Answer 7

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

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

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

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

- john pispidikis