Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Example</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  body {
    font-family: sans-serif;
  }
</style>
</head>
<body>
  <input type="button" id="theButton" value="Click Me">
  <div id="ctrl1">ctrl1</div>
  <div id="ctrl2">ctrl2</div>
</body>
</html>
 
setOption(function ($) {
    var defaults = {
        msg1: "(msg1)",
        msg2: "(msg2)"
    };
    $.fn.doSomething1 = function()
    {
        alert(getOption(this, "msg1"));
        return this;
    };
    $.fn.doSomething2 = function()
    {
        alert(getOption(this, "msg2"));
        return this;
    };
    $.fn.myHtmlControl = function(options) {
        this.data("myHtmlControl", $.extend({}, defaults, options));
        return this;
    };
    function getOption(inst, name) {
        var obj = inst.data("myHtmlControl");
        return (obj || defaults)[name];
    }
    function setOption(inst, name, value) {
        var obj = inst.data("myHtmlControl");
        if (!obj) {
            obj = $.extend({}, defaults);
            inst.data("myHtmlControl", obj);
        }
        obj[name] = value;
    }
})(jQuery);
jQuery(function($) {
  
    $("#theButton").click(function() {
        $('#ctrl1').myHtmlControl({msg1: "abc"});
        $('#ctrl2').myHtmlControl({msg2: "123"});
        alert("about to do ctrl1");
        $('#ctrl1').doSomething1().doSomething2();
        alert("about to do ctrl2");
        $('#ctrl2').doSomething1().doSomething2();
    });
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers