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)); 
    } 
    }); 
}; 

林沒有大師，但很適合我