我正在制作一个仅移动的 jqm 元素。
我有两个面板,一组用于插入,另一组用于叠加。一个在左上角,另一个在右上角。
我的问题是可以将右侧面板设置为 100% 宽度(我已经这样做了)并将高度设置为 10-20% (40px-50px)。
这可以在不破坏任何功能的情况下完成吗?可以在 Css 中完成吗?我可以设置宽度但无法设置高度。
提前致谢!
最佳答案
自定义右侧或左侧面板,您需要更改 JQM 设置的 3 个 CSS 类。包含内容的动画、面板和面板的内部部分。更简单的方法是创建自定义叠加框。
演示 https://jsfiddle.net/bz649m86/
HTML
<div class="box"><a class="close">Close</a></div>
CSS
.box {
position:fixed; // a fixed position is used for the box
top:0; // placed at the top of the screen
right:-100%; // with a minus position setting on the right side of the screen so its hidden from view
background-color: blue;
width: 100%; //with a width of the whole screen, but it can be any width
display: block; //displayed in block format
z-index: 999999; // above the header when in view
overflow: hidden; // if you don't require scrolling within the box
height:40px; // the height size required
//the transition settings are not needed but makes the animation of the panel much smoother.
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
Jquery
// animate on click to bring the box in to view
$(document).on("click", ".pannel", function () {
$('.box').animate({
'right': "0%"
}, 300);
})
// and out of view when closed
$(document).on("click", ".close", function () {
$('.box').animate({
'right': "-100%"
}, 300);
})
作为旁注,使用此方法,您可以在屏幕上的任何位置显示自定义面板(覆盖)。
在此演示中,框来自屏幕顶部
关于javascript - jquery mobile 1.4.5 设置面板高度可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29320110/