jQuery UI 及插件注意事项

来源：互联网发布：淘宝新店在哪里推广编辑：程序博客网时间：2024/04/30 08:01

1. dialog第二次不显示：

$(xxx).dialog()会改变对象的层级关系；比如

<body>

</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