javascript - JQuery plugin developement with multiple functions call -
after initial research figured out way have multiple functions in plugin mentioned in code, not getting required result. candles should displayed in mentioned color , mentioned number of time. can figure out error?
- view page:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>happy diwali</title> <script type="text/javascript" src="/plugin6/scripts/jquery-3.1.0.min.js"></script> <script type="text/javascript" src="/plugin6/scripts/diwali.jquery.js"></script> <link rel="stylesheet" type="text/css" href="/plugin6/scripts/lamp.css"> <script> $(document).ready(function () { $("#show").click(function(){ //window.location.reload(); $(".candle").diwali( 'col....or',{ background : $("#colorlamp").val() }); $(".happydiwali").diwali('repeat',{ x : $("#numberlamp").val() }); }); $("#on").click( function(){ $(".match").diwali('color',{ background : "red" }); }); $("#offl").click( function(){ $(".match").diwali('color',{ background : "white" }); }); }); </script> </head> <body> <form method="post" class="diwali"> enter number of lamps:<input type="number" id="numberlamp" min="1" max="10"> <br></br> enter color of lamps:<input type="color" id="colorlamp"> <br></br> <input type="button" value="show" id="show" > <br></br> <input type="button" value="on" id="on" class="on1" > <input type="button" value="off" id="off" class="off1"> </form> </body> <div class="dom" id="dom" style="display: none"> <div class="happydiwali" id="happydiwali"> <div class="candle"></div> <div id="match" class="match"><a href="#match"> </a></div> <div class="fire" id="fire"><a href="#"></a></div> <div class="light"></div> </div> </div> </html>
- plugin code: diwali.jquery.js
(function($) { $.fn.diwali = function( options ){ if(options == 'validation') validation(); else if(options == 'color') color(); else if(options == 'repeat'){ repeat(); } else{ alert("invalid"); } //to chnage color function color(){ var defaults = { // left: 200, background: "red" }; debugger; var settings = $.extend( {}, defaults, options ); //alert("hello"); var hi = $(".candle"); return hi.css({ background: settings.background }); } //to repeat div function repeat(){ //default settings var defaults1 = { x : 1, left: 200 }; var settings = $.extend( {}, defaults1, options ); left = settings.left; y = settings.x; debugger; initialize(); debugger; /*return this.each(function(){ for (i = 0; < y + 1; i++){ multiple(); } });*/ } function initialize() { (i = 0; < y + 1; i++){ multiple(); } }; function multiple(){ $temp = $("#happydiwali").clone(); $temp.find(".candle").css({left : left}); $temp.find(".match").css({left : left + 25}); $temp.find(".fire").css({left : left}); $temp.find(".light").css({left : left}); $temp.removeattr("id"); $temp.appendto("body"); left = left + 200; } //validation of number function validation(){ if(document.getelementbyid("numberlamp").value > 11) { alert("limit exceeded!"); return false; //stop submission } } }; })(jquery);
Comments
Post a Comment