在新的 jQuery mobile 中有一个新的面板选项。我已经实现了它并且它可以工作,但我想自定义面板的宽度。标准宽度是272px,对我来说有点多。我试过使用
.ui-panel{width:150px;}
CSS 选择器,但这只是调整面板内容的大小。面板本身保持可见并保持相同的宽度。在 Firefox 和 chrome 中使用检查器,我无法找到负责此面板的正确 div。有人可以帮我找到一种以正确方式调整面板大小的方法吗?
在新的 jQuery mobile 中有一个新的面板选项。我已经实现了它并且它可以工作,但我想自定义面板的宽度。标准宽度是272px,对我来说有点多。我试过使用
.ui-panel{width:150px;}
CSS 选择器,但这只是调整面板内容的大小。面板本身保持可见并保持相同的宽度。在 Firefox 和 chrome 中使用检查器,我无法找到负责此面板的正确 div。有人可以帮我找到一种以正确方式调整面板大小的方法吗?
我想到了!没那么复杂,真的。我自己只是在使用 structure.css,但如果您使用其他 CSS 文件,则可能需要更多自定义。反正...
使用您最喜欢的编辑器,查找并替换“17em”并将其替换为您实际想要的值。左侧面板有样式,右侧面板有样式。我不会急于完成整个过程,因为这里或那里可能有一个不相关的“17em”。只需一分钟...
这是一个简单的答案,但我对自己很满意:p
我自己也遇到了同样的问题,并按照 tylerl 的建议将 17em 替换为我需要的宽度。效果很好,除了我使用 google cdn 加载 css 的事实,所以我不能直接更改它,而且总的来说我不是更改库代码的忠实粉丝。
所以玩了一下我想出了这段代码来重新定义默认的jquery mobile的css https://gist.github.com/geekdevs/5433246
您可以分别配置左侧和右侧边栏的宽度。这是 LESS 代码,但只需将 @left-sidebar-width 和 @right-sidebar-width 替换为您需要的宽度即可使其也适用于纯 CSS。
他们在此演示中展示了如何更改面板宽度:http: //jquerymobile.com/demos/1.3.0/docs/examples/panels/panel-styling.html
我不想对库 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)
}
如果您不想全局编辑大小,请将其添加到您的自定义 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);
}
我想你打错了。尝试
.ui-panel { width: 150px; }
或者如果您要发布该内联,也许
<panel style="width: 150px;">
当然,尽管我对 jquery 很陌生,但我可能是错的。
你需要把下面的CSS(左面板)
.ui-panel{
width: 150px!important;
}
.ui-panel-animate.ui-panel-page-content-position-left {
transform: translate3d(150px,0,0) !important;
}