プラグインの作成基礎

今回は Plugin の作成の基礎です。
最初は Blig の題材として、無名関数などの調べて見ようかと思っていたんですが
いろいろ調べていると、jQuery ではプラグイン作成をすることが多いようです。

折角なんで Plugin の基礎部分を確認してみました。

<!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 type="text/javascript"><!--

            (function($){

                $.fn.sumpleFunction = function ( option ) {

                    var defInit = {
                        text: 'Default Messeage'
                    };

                    var setMessage = $.extend( defInit, option );
                    $('#disp_div').html( setMessage.text );

                    return(this);

                };

            }(jQuery));

            $(function(){

                $('#click_btn1').click( function () {
                    var setText = $('#set_text').val();
                    $('#click_btn1').sumpleFunction({
                        text: setText
                    });
                });

                $('#click_btn2').click( function () {
                    $('#click_btn2').sumpleFunction({});
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input type="text" id="set_text" value="Input Text">
            <button id="click_btn1">Disp Input Text</button>
            <button id="click_btn2">Disp Default Text</button>
        </div>

        <div id="disp_area">
            <div id="disp_div"></div>
        </div>

    </body>
</html>

sample

sample に Button が 2個あります。
「Disp Input Text」を Click すると Text に入力された文字列が、
「Disp Default Text」を Click するとこちらで設定した内容が、
それぞれ表示される形になります。

今までは同じような処理をする場合、1つのファイルにまとめてはいるものの
Plugin の作成はしていなかったのですが、今後はまとめても良いかも・・・

なお、本来なら Plugin に関しては別ファイルに切り分けるのですが、
今回は1つのファイルにて作業しています。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です