前回に引き続きプラグインに関してです。
この Blog では見やすさを優先するため File を分けることは余り無いと思います。
まぁ、とりあえずは今回のみかもしれませんが調べてみたいと思います。
■ HTML File
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script src="./jquery.sample1663.js"></script> <script type="text/javascript"><!-- $(function(){ $('#click_btn1').sumpleFunction({ disp_id : 'disp_div', input_id : 'input_text', question : 'to continue ?', }); $('#click_btn2').sumpleFunction({ disp_id : 'disp_div', question : 'clear?', }); }); --></script> <link rel="stylesheet" href="reset.css" type="text/css"> <style type="text/css"><!-- div { margin : 10px; } div#disp_area { border : 1px #000000 solid; } --></style> </head> <body> <div id="main_area"> <input type="text" id="input_text" value="Please enter a message."> <button id="click_btn1">Input Disp Text</button> <button id="click_btn2">Clear Disp Text</button> </div> <div id="disp_area"> <div id="disp_div"></div> </div> </body> </html>
■ Plugin File【jquery.sample1663.js】
(function($){ $.fn.sumpleFunction = function ( option ) { this.click( function( eObj ) { // Set Init var defInit = { disp_id : '', input_id : '', question : 'continue the process ?', message : '', }; var setInit = $.extend( defInit, option ); // Confirm Check if ( !confirm( setInit.question ) ) { eObj.preventDefault(); return this; } // Message Set if ( setInit.input_id.length ) { setInit.message = $('#' + setInit.input_id).val(); } // Message Disp $('#' + setInit.disp_id).html( setInit.message ); return this; }); }; }(jQuery));
sample の「Input Disp Text」を Click すると処理を進めるかの Dialog が出ます。
「Ok」を押すことで Text に入力された内容が表示されます。
Plugin の処理を利用して Crear の処理も作成してあります(笑)
Plugin の処理を流用すると中々便利にはなりそうですね。
ちなみに Click と Plugin の発動をどのようにすれば良いか悩んでいました、
とりあえず今回のような処理方法で良いのかなぁ。