本文探讨了使用jQuery UI插件时遇到的问题，包括dialog组件的显示与定位、与DataTable插件结合使用时的兼容性问题及解决方案。此外，还讨论了如何在不同浏览器环境下正确应用jQuery UI的position方法。
1. dialog第二次不显示：
$(xxx).dialog()会改变对象的层级关系；比如
<body>
<div class="dialog-message"></div>
</body>
$("body > div.dialog-message").dialog();
在首次执行上面的语句时，可正常显示出对话性；但是，当关闭对话框再次执行上面的语句时，则不会有对话框显示。不显示的原因是因为$("body > div.dialog-message")没有查询到元素。解决办法是仅使用#和.选择符，如$("div.dialog-message")。
当然，和jquery ui常规相同，在显示对话框的时候，$("body > div.dialog-message")的class会被动态更改，直至对话框关闭才会恢复为原来的class。
dialog保证，源元素的class和title在对话框显示前后保持相同。
2. dialog不居中：
首先要排除选项的设置（默认为居中）。
解决办法：
在文件头部增加一行：<!doctype html>，即：
<!doctype html>
<html>
<head>
...
3. dataTable在使用sDom后，bJQueryUI: true选项失效：
var oTable = $("#myTable").dataTable({
bJQueryUI: true,
sDom: "<'#toolbar.ui-widget-header ui-corner-all'>lfrtip"
});
如果使用上面的sDom选项初始化dataTable，则会发现bJQueryUI: true选项对表格信息（每页显示多少条记录、搜索、分页等）无效。
正确做法如下：
var oTable = $("#MainForm").dataTable({
bJQueryUI: true,
sDom: "<\"#toolbar.ui-widget-header ui-corner-all\"><\"H\"lfr>t<\"F\"ip>"//参考jquery.dataTables.js源码
});
4. jquery.ui.position:将当前选中元素相对于of元素的at位置（是一个点）进行对齐。
- my：要被对齐的元素的相对于目标点的位置。
- at：目标元素上的目标点。
如：{my:"left top", at:"right bottom", of:‘#xx’}，表示将当前元素的左上角移动到xx的右下角。
在IE中，对同一个元素多次执行position，如果发现该元素向右下角偏移，则应当在执行position之前将元素的left和top设置为0。
参考：http://forum.jquery.com/topic/position-keeps-adding-original-left-and-top-to-current-values-in-ie-8
扫一扫
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
