Nastaviti

by Osman Salihovic

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div class="hilight { background: 'red', foreground: 'white' }">
 D1
</div>
<div class="hilight { foreground: 'orange' }">
  D2
</div>
<div class="hilight2 {foreground: 'green' }">
  D3
</div>

JavaScript

(function($){

		$.fn.myplugin = function(options){
	 
			var defaults = {
				myval: 1,
				mycolor: 'blue',
				storeValue: '#myInput'
			},
			settings = $.extend({}, defaults, options);
	 
	 
			return this.each(function(){
				$(this).click(function(){
					doSomething();
				});
			});
	 
	 
			function doSomething(){
				$(settings.storeValue).val(settings.mycolor);
			}
		   
		};
	 
	 
	})(jQuery);

$(document).ready(function(){
	$('#button1').myplugin({storeValue: '#textbox1', mycolor: 'red'});
	$('#button2').myplugin({storeValue: '#textbox2', mycolor: 'green'});
	$('#button3').myplugin({storeValue: '#textbox3', mycolor: 'yellow'});
});

----------------------------

// create closure
      //
      (function($) {
        //
        // plugin definition
        //
        $.fn.hilight = function($$options) {
          ;;; _debug(this);
         console.log($$options);
				 $$options=(typeof($$options)==='undefined') ? $.fn.hilight.defaults : $$options;
				 
          // build main options before element iteration
          var $settings = $.extend({}, $.fn.hilight.defaults, $$options);
         
          // iterate and reformat each matched element
          return this.each(function() {
            var $this = $(this);
            // build element specific options
            var o = $.meta ? $.extend({}, $settings, $this.data()) : $settings;
            // update element styles
            $this.css({
              backgroundColor: o.background,
              color: o.foreground
            });
            var $markup = $this.html();
            // call our format function
            $markup = $.fn.hilight.format($markup);
            $this.html($markup);
          });
        };
       
        //
        // private function for debugging
        //
        function _debug($obj) {
          if (window.console && window.console.log)
            window.console.log('hilight selection count: ' + $obj.size());
        };
       
        //
        //...