2009-04-23 40 views
10

使用jQuery为浏览器FF3和IE6/7开发时,在HTML标签上设置自定义属性时是否存在兼容性问题?我可以像HTML数据库记录一样在HTML DOM中存储自定义属性吗?

首先,我知道jQuery的data()功能,它主要是我想要做什么,但数据没有生存clone()功能。这是使用jQuery UI可拖/放插件的问题,因为它在拖放过程中克隆了DOM元素。为了这个问题的目的,我需要一个替代data()

我想在拖放操作之间保存数据。我希望能够将数据注入到拖放操作期间移动的DOM元素中。为此,我可以构建HTML子元素来模拟数据库记录。快速实验表明,Firefox使用任何我想存储数据字段的属性名称都没有问题。但是,HTML 4规范说某些标签只能包含某些属性名称。将DOM填充为非标准属性会导致我提到的浏览器出现不兼容问题?

回答

10

看看这个类似的问题,我问了而后退:Can I just make up attributes on my HTML tags?

个人而言,我不太喜欢将所有数据放入类属性的建议答案。感觉,只是...你知道错了吗?根据我的经验,尽管如果你构成属性,你的页面将不会有效,但我仍然会这样做。在4个主要浏览器中进行测试,如果有效,谁在乎?

我能想到的最好的解决方案是无效的现在,但会在HTML5中,所以这很好。正如在其他问题建议的ms2ger,前缀data-

http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#embedding-custom-non-visible-data

1

缺席您的自定义属性的一些标准的方式在HTML4做到这一点,我会很想创建对应于我的拖动和存储一个隐藏的元素其中的相关数据。将隐藏元素命名为相对于可拖动元素,以便您可以轻松地查找其信息。以下扩展使用隐藏跨度来实现这一点。注意:在测试中,我无法用可拖动的项目复制问题--data()对我来说看起来工作正常,但我没有使用各种插件(只是UI.Draggable)进行测试。

用法:

$('#draggableDiv').externalData('key','data'); 
var d = $('#draggableDiv').externalData('key'); 

jQuery.fn.externalData = function(key, data) { 
    var value = this; 
    this.each(function() { 
     var id = this.id+'_external_data'; 
     var elem = jQuery('#'+id+':first'); 
     if (elem.size() == 0) { 
      elem = $('<span style="display: none;" id="' + id + '"></span>"'); 
      elem.appendTo(document.body); 
     } 
     if (data) { 
      elem.data(key,data); 
     } 
     else { 
      value = elem.data(key); 
      return false; 
     } 
    }); 
    return value; 
}; 
1

这是比较陌生的,但非常有用的党:jQuery Metadata Plugin。它会让你将数据存储在类名中以供检索。它主要用于验证插件,但确实可以适应任何场景。

祝你好运,无论你在做什么。

相关问题