HTML 5的数据属性为jQuery插件选项格式

Question

除了jQuery插件选项，我想重写使用HTML5数据属性的值。

---

这是optionis所需的格式：

var defaults = { 
    text: { 
     color: 'red', 
     opacity: 0.5 
    }, 
    button: { 
     width: 100, 
     height: 30 
    } 
} 

我想格式化数据属性是这样的：

<div data-text="color:'red', opacity: 0.5"></div> 

...但是你不会能够读取这个数据o.text.color，因为它根本不存在。然而，o.text内有数据。

我怎么能格式化数据属性，这样我可以取得与o.text.color价值？

Answer 1

只是通过格式化像一个JSON字符串到属性的对象，和jQuery数据将解析它。

<div class="test" data-test='{ "test1":"Lorem","test2":"Ipsum" }'></div> 

另见updated fiddle

Answer 2

这个心不是很干净，在HTML让我想起的onclick事件。为什么不把它们分离出来data-test1 =“Lorem”& data-test2 =“Ipsum”？

插件可能是这样的（扩展jQuery插件样板）：

function Plugin(element, options, objD) { 
    this.element = element; 
    this.options = $.extend({}, defaults, options, objD); 
    this._defaults = defaults; 
    this._name = pluginName; 
    this.init(); 
} 

$.fn[pluginName] = function (options) { 
    return this.each(function() { 
    if (!$.data(this, "plugin_" + pluginName)) { 
     var objD = $(this).data(); 
     $.data(this, "plugin_" + pluginName, new Plugin(this, options, objD)); 
    } 
    }); 
}; 

林没有大师，但很适合我