我在我的一个项目中使用jQuery布局插件和jqGrid插件,除了一些小问题外,它们工作得很好......
我希望jqGrid完全填满包含它的窗格(jQuery布局窗格).调整窗格大小应该调整jqGrid的大小,关闭窗格应该隐藏jqGrid等等.
jqGrid和jQuery Layout都提供回调,但是当我使用它们时,页面布局可怕地破坏.
有没有人有任何经验混合jqGrid与jQuery布局？
我无法设法获取jquery-layout插件的选项.默认呈现正确,但选项不正确.我尝试在文件准备好时设置可调整大小和可滑动,但是当我警告可调整大小时,它返回false.谁能发现这里出了什么问题？
JS:
$(document).ready(function() {
var myLayout = $('body').layout({
west: {
resizable: true,
resizeWhileDragging: true,
slidable: true
}
});
alert(myLayout.options.west.resizable); //returns false
});
HTML:
<body>
<div class="ui-layout-center">Center
<div id="board">
</div>
<button onclick="set_board();">New Game!</button>
<button onclick="execute_turn();">Turn!</button>
</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>
我使用JQuery布局并仅定义北,西和中间窗格.在左侧(西部窗格)我正在构建一个CSS弹出菜单.随着网络上大量的CSS弹出菜单,我可以毫不费力地使用它.我面临的问题是弹出菜单与中心窗格不重叠.您可以在我的JSfiddle示例中看到此行为.我试过设置,overflow: visible; z-index: 10001;但没有解决任何问题.我接下来可以尝试什么？
我有以下问题:我将Slickgrid与jquery布局结合使用.可以使用此插件调整窗格大小.当我调整Slickgrid窗格的大小时,会出现一个水平滚动条,一开始就不存在,我无法一直滚动到底部.
我创建了一个jsfiddle来演示:http: //jsfiddle.net/uNMRT/2/
重现步骤:
我已经在调整大小时执行了resizeCanvas:
center__onresize: function(pane, $pane, state, options) {
myGrid.resizeCanvas();
}
这显然还不够.有任何想法吗？
我正在使用jQuery UI布局.我想将布局应用于容器,而不是整个主体.
工作时我做的$('body').layout();.
http://jsfiddle.net/JPEaa/216/
添加容器div时失败了$('.myDiv').layout();.
http://jsfiddle.net/JPEaa/217/
我错误地选择或应用我的容器了吗？
我正在尝试使用Chosen插件和其他一些插件,如jQuery Layout和jqgrid
没有选择我的选择框看起来像这样:
http://i.stack.imgur.com/x8qQv.png
并选择:
http://i.stack.imgur.com/XlSMz.png
它与jQuery Layout重叠.
有没有办法让Chosen始终站在前面？
我玩了两个插件的不同CSS设置,但无济于事.帮助请弄清楚该怎么做.
HTML:
<div class="ui-layout-center"></div>
<div class="ui-layout-north">
<div style="width: 250px; position:relative; z-index:99999">
<select id="picker" style="width: 250px">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
</select>
</div>
</div>
<div class="ui-layout-south"></div>
<div class="ui-layout-east"></div>
<div class="ui-layout-west"></div>
jQuery的:
$('#picker').chosen();
$('body').layout(
{ applyDefaultStyles: true }
);
链接到JSFiddle:小提琴
我将Angularjs typeahead指令与jquery布局插件结合使用.这是我正在处理的应用程序的链接.当我在输入框中键入地址时,自动完成结果列表会隐藏在缩放器后面.我已经尝试更改自动完成列表以及窗格大小调整器的z-index属性,但似乎没有任何工作.解决这个问题的最佳方法是什么？
.ui-layout-resizer-open {
z-index: 1;
}
.dropdown-menu {
z-index: 2;
}
早上好,
在调用sizePane()之后,jQuery UI Layout似乎正在重置我的选项.当我将以下内容加载到FireFox中,然后单击"调整大小"按钮时,北窗格突然变得可调整大小,并且突然再次启用热键.我做错了吗？或者这是一个错误？
<html>
<head><title>Layout Test</title></head>
<link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script>
<script language="JavaScript">
jQuery(document).ready(documentReady);
function documentReady(){
jQuery('body').layout({
defaults: {
applyDefaultStyles: true
},
north: {
enableCursorHotkey: false,
closable: false,
resizable: false
},
center: {
}
});
}
</script>
<body>
<div class="ui-layout-north">
North Pane
</div>
<div class="ui-layout-center">
Center Pane
<input type="button" value="Resize" onclick="jQuery('body').layout().sizePane('north',100);" />
</div>
</body>