月別アーカイブ: 2013年11月

オブジェクトの追加

今回は指定した Object の前後に Object を追加する方法です。

Object の追加をうまく利用できれば、画像や情報を複数登録するようなフォームでうまく利用できると思います。
とりあえず、やって見ましょう。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('#btn_prepend').click( function () {
                    $('#div_objct').prepend('<div class="div_prepend">Insert Prepend</div>');
                });

                $('#btn_append').click( function () {
                    $('#div_objct').append('<div class="div_append">Add Append</div>');
                });

                $('#btn_before').click( function () {
                    $('#div_objct').before('<div class="div_before">Insert Before</div>');
                });

                $('#btn_after').click( function () {
                    $('#div_objct').after('<div class="div_after">Add After</div>');
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            div {
                margin  : 10px;
                padding : 10px;
            }
            #div_objct {
                border  : 1px #000000 solid;
            }
            .div_prepend {
                border  : 1px #ff0000 solid;
            }
            .div_append {
                border  : 1px #0000ff solid;
            }
            .div_before {
                border  : 1px #888800 dotted;
            }
            .div_after {
                border  : 1px #008888 dotted;
            }
        --></style>
        
    </head>
    <body>

        <div id="buttonArea">
            <button id="btn_prepend">prepend</button>
            <button id="btn_append">append</button>
            <button id="btn_before">before</button>
            <button id="btn_after">after</button>
        </div>

        <div id="divArea">

            <div id="div_objct">
                <p>Div Area</p>
            </div>

        </div>

    </body>
</html>

sample

sampleページでは ボタンを click したときに別のobujectが表示されるようになりました。

ボタンは4個用意してあります。
ボタンによって追加する方法が変わります。

■prepend
 object の内側,先頭に挿入します。

■append
 object の内側,最後に追加します。

■before
 object の外側,直前に挿入します。

■after
 object の外側,直後に追加します。

この 4つを利用すると 直前,直後に Object を追加することができます。
画像を複数枚登録したいけど、枚数分の画像登録欄が表示されるのは見映えが悪いという意見はよく聞きます。
今後はこの方法で対応できると思います。

jQuery はここからダウンロードしてください。

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

前後のオブジェクトを操作する。

今回は Object を Click した時などに、前後の Object を操作する方法です。

たとえば、複数の名称と説明文が存在するときに、click した項目のみの説明文を表示することができます。
とりあえず、やって見ましょう。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('dt').click( function () {
                    $('dd').slideUp('normal');
                    if ($(this).next().is(':hidden')) {
                        $(this).next().slideDown('normal');
                    } else {
                        $(this).next().slideUp('normal');
                    }
                });
                $('dd').slideUp(0);

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            dl, dd, dt {
                margin :20px;
            }
        --></style>
        
    </head>
    <body>

        <div id="dispArea">

            <dl>

                <dt>Sample01 Click!</dt>
                <dd>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                </dd>

                <dt>Sample02 Click!</dt>
                <dd>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                </dd>

                <dt>Sample03 Click!</dt>
                <dd>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                </dd>

                <dt>Sample04 Click!</dt>
                <dd>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                </dd>

                <dt>Sample05 Click!</dt>
                <dd>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                </dd>

            </dl>

        </div>

    </body>
</html>

sample

sampleページでは タイトルを click したときに説明文の領域が表示されるようになりました。

今回は next() を利用しています。
next() は指定した Object の直後の Object を操作しています。
直前の Object を指定する場合には prev() を使用することで可能です。

この 2つを利用すると 直前,直後の Object を操作することができるため、色々と便利になります。
今回の様に説明文を別に表示するだけでも使い勝手はいいのではないでしょうか。

jQuery はここからダウンロードしてください。

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

セレクタについて5(フォームフィルタ)

セレクタシリーズの5回目、最後はフォームフィルタについてです。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $(':input').css('background-color', '#ff0000');
                $(':text').css('background-color', '#00ff00');
                $(':password').css('background-color', '#0000ff');
                $(':radio').css('background-color', '#cc00c');
                $(':checkbox').css('background-color', '#cccc00');
                $(':submit').css('background-color', '#00cccc');
                $(':image').css('background-color', '#cccccc');
                $(':reset').css('background-color', '#660066');
                $(':button').css('background-color', '#006666');
                $(':file').css('background-color', '#660000');
                $(':checked').css('background-color', '#00ff00');

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            div {
                margin :20px;
            }
        --></style>
        
    </head>
    <body>

        <div id="dispArea">

            <h1>Form Input</h1>
            <form>
                <div>
                    <h2>Form Input : Text Box</h2>
                    <input type="text" />
                </div>
                <div>
                    <h2>Form Input : Password Box</h2>
                    <input type="password" />
                </div>
                <div>
                    <h2>Form Input : Radio Button</h2>
                    <label for="radio1"><input type="radio" id="radio1" name="radio" checked="checked" /> radio1</label>
                    <label for="radio2"><input type="radio" id="radio2" name="radio" /> radio2</label>
                </div>
                <div>
                    <h2>Form Input : Check Box</h2>
                    <label for="check1"><input type="checkbox" id="check1" /> checkbox1</label> 
                    <label for="check2"><input type="checkbox" id="check2" checked="checked" /> checlbox2</label> 
                    <label for="check3"><input type="checkbox" id="check3" /> checkbox3</label> 
                </div>
                <div>
                    <h2>Form Input : Submit Button</h2>
                    <input type="submit" value="submit" />
                </div>
                <div>
                    <h2>Form Input : Image Button</h2>
                    <input type="image" src="./icon_jpeg05.jpg" />
                </div>
                <div>
                    <h2>Form Input : Reset Button</h2>
                    <input type="reset" value="reset" />
                </div>
                <div>
                    <h2>Form Input : Normal Button</h2>
                    <input type="button" value="button1"/>
                    <button>button2</button>
                </div>
                <div>
                    <h2>Form Input : File Box</h2>
                    <input type="file" />
                </div>
                <div>
                    <h2>Form Input : Select Box</h2>
                    <select>
                        <option value="1">sample1</option>
                        <option value="2" selected="selected">sample2</option>
                        <option value="3">sample3</option>
                    </select>
                </div>
                <div>
                    <h2>Form Input : Text Area Box</h2>
                    <textarea value="Text Area"></textarea>
                </div>
            </form>

        </div>

    </body>
</html>

sample

セレクタシリーズ最後の地味な sample ページです。
以下に内容を説明させていただきます。

■:input
例) $(‘:input’)
input,textarea,select,buttonが対象となります。
textarea や select は個別のフィルターがないようです。
まぁ、フィルター以外の方法でも対応はできるので問題はありませんが・・・、
逆に textarea,select が対象だと違和感を感じるのは私だけでしょうか。

■:text
例) $(‘:text’)
input type = text が含まれる要素が対象となります。

■:password
例) $(‘:password’)
input type = password が含まれる要素が対象となります。

■:radio
例) $(‘:radio’)
input type = radio が含まれる要素が対象となります。

■:checkbox
例) $(‘:checkbox’)
input type = checkbox が含まれる要素が対象となります。

■:submit
例) $(‘:submit’)
input type = submit が含まれる要素が対象となります。

■:image
例) $(‘:image’)
input type = image が含まれる要素が対象となります。

■:reset
例) $(‘:reset’)
input type = reset が含まれる要素が対象となります。

■:button
例) $(‘:button’)
input type = button が含まれる要素が対象となります。

■:file
例) $(‘:file’)
input type = file が含まれる要素が対象となります。

■:hidden
例) $(‘:hideden’)
input type = hidden が含まれる要素が対象となります。
その他にも非表示項目が対象となります。
表示/非表示フィルタでも同じ内容がありましたね。

■:enabled
例) $(‘:enabled’)
使用可能の要素が対象となります。

■:disabled
例) $(‘:disabled’)
使用不可の要素が対象となります。

■:checked
例) $(‘:checked’)
チェックされた要素が対象となります。

■:selected
例) $(‘:selected’)
選択された要素が対象となります。

以上、今回にて「セレクタシリーズ」は終了となります。

セレクタによって、色々な方法でのオブジェクト選択が可能な為非常に便利です。
今までは jQuery を含む全ての Javascript で操作する要素には、全て ID を追記していました。
今後は Javascript のためだけの ID や Class は減らすことが出来そうです。

できることが段々増えていくような気分で非常に楽しいですね。
まさに、「やればやるほど面白い」の状態です。
この他にも、next(),prev() など調べていくと色々便利になるんだろうなと思います。

jQuery はここからダウンロードしてください。

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

セレクタについて4(コンテントフィルタ)

セレクタシリーズの4回目、今回はフィルタ機能についてです。

今回はコンテントフィルタを調査しました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('#ul_1 li:contains(TextData)').css('color', '#ff0000');
                $('#ul_1 li:has(p)').css('color', '#0000ff');
                $('#ul_1 li:empty').text('EmptyData');
                $('#ul_1 li span:parent').css('color', '#00ff00');

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            ul {
                margin :20px;
            }
        --></style>
        
    </head>
    <body>

        <div id="dispArea">

            <ul id="ul_1">
                <li>1. data</li>
                <li>2. data</li>
                <li>3. data TextData</li>
                <li>4. data</li>
                <li><p>5. data</p></li>
                <li>6. data TextData</li>
                <li>7. data TextData</li>
                <li><span>8. data</span></li>
                <li>9. data</li>
                <li></li>
                <li></li>
                <li></li>
            </ul>

        </div>

    </body>
</html>

sample

引き続き地味な sample ページです。
まぁ、基本について説明させていただきます。

・コンテントフィルタ
■:contains(text)
例) $(‘#sample:contains(text)’)
指定した文字列が含まれる要素が対象となります。

■:has(selector)
例) $(‘#sample:has(selector)’)
指定した要素を含む要素のみ全て対象となります。

■:empty
例) $(‘#sample:empty’)
空の状態の要素が対象となります。

■:parent
例) $(‘#sample:parent’)
空ではないの状態の要素が対象となります。
今回は「$(‘#ul_1 li span:parent’)」を対象としています。
この場合は、spanタグの中に「8. data」が存在するため「空では無い」となります。

今回の「コンテンツフィルタ」はこんな感じですね。
う~ん・・・、ちょっと項目が少ないですね。
追加で「表示/非表示フィルタ」と「子要素フィルタ」も調査しておきます。

・表示/非表示フィルタ
■:hidden
例) $(‘#sample:hidden’)
非表示状態の要素が対象となります。
また、form項目の場合、hidden属性の要素が対象となります。

■:visible
例) $(‘#sample:visible’)
表示状態の要素が対象となります。

・子要素フィルタ
■:nth-child
例) $(‘#sample:nth-child(index)’)
親要素に対してn番目、偶数、奇数、n個おきの指定をした子要素が対象となります。
 index
  指定番数の要素
 even
  偶数番号の要素
 odd
  奇数番号の要素
 equation
  指定数ごとの要素

■:first-child
例) $(‘#sample:first-child’)
親要素に対して最初の子要素が対象となります。

■:last-child
例) $(‘#sample:last-child’)
親要素に対して最後の子要素が対象となります。

■:only-child
例) $(‘#sample:only-child’)
各親要素が1つだけ子要素を持つ場合に、その子要素を選択する。
親要素に対して1つだけの子要素の場合に子要素が対象となります。

今回の「フィルタ」はこんな感じですね。
今回書いていませんが「属性フィルタ」もありますが、いままで当サイトでもよく使っていた
「$(“input[name=’type_1′]”)」などなので説明は省きます。

次は「フォームフィルタ」ですかね。
「フォームフィルタ」が終わればセレクター調査は完了です。

jQuery はここからダウンロードしてください。

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

セレクタについて3(基本フィルタ)

セレクタシリーズの3回目、今回からはフィルタ機能についてです。

今回は基本フィルタを調査しました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('#ul_1 li:even').css('color', '#ff0000');
                $('#ul_1 li:odd').css('color', '#0000ff');

                $('#ul_2 li:eq(4)').css('color', '#ff00ff');
                $('#ul_2 li:gt(4)').css('color', '#ffff00');
                $('#ul_2 li:lt(4)').css('color', '#00ffff');
                $('#ul_2 li:first').css('color', '#cccc00');
                $('#ul_2 li:last').css('color', '#00cccc');

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            ul {
                margin :20px;
            }
        --></style>
        
    </head>
    <body>

        <div id="dispArea">

            <ul id="ul_1">
                <li>1. data</li>
                <li>2. data</li>
                <li>3. data</li>
                <li>4. data</li>
                <li>5. data</li>
                <li>6. data</li>
                <li>7. data</li>
                <li>8. data</li>
                <li>9. data</li>
            </ul>

            <ul id="ul_2">
                <li>1. data</li>
                <li>2. data</li>
                <li>3. data</li>
                <li>4. data</li>
                <li>5. data</li>
                <li>6. data</li>
                <li>7. data</li>
                <li>8. data</li>
                <li>9. data</li>
            </ul>

        </div>

    </body>
</html>

sample

前々回の「属性セレクタ」に引き続き地味な sample ページです。
まぁ、基本について説明させていただきます。

■:first
例) $(‘#sample:first’)
最初の要素が対象となります。

■:last
例) $(‘#sample:last’)
最後の要素が対象となります。

■:not(selector)
例) $(‘#sample:not(selector)’)
指定した要素以外が全て対象となります。

■:even
例) $(‘#sample:even’)
偶数の要素が対象となります。

■:odd
例) $(‘#sample:odd’)
奇数の要素が対象となります。

■:eq(index)
例) $(‘#sample:eq(index)’)
指定したインデックス番号の要素が対象となります。

■:gt(index)
例) $(‘#sample:gt(index)’)
指定したインデックスより後の要素が対象となります。

■:lt(index)
例) $(‘#sample:lt(index)’)
指定したインデックスより前の要素が対象となります。

■:header
例) $(‘#sample:header’)
h1,h2 などヘッダ要素が対象となります。

■:animated
例) $(‘#sample:animated’)
アニメーション中の要素が対象となります。

「基本フィルタ」はこんな感じですね。
正直「:header」とかは、使うぐらいならセレクタ使えばいいんじゃないかなぁ・・・
そう思うところもありますが「:first」や「:last」などの非常に便利なものもありますね。

個人的には「:eq」をうまく使っていきたいですね。
いままではfor文を使っていましたが、「:eq」があれば色々楽になりそうです。
まぁ、私の場合は(:animated)を使うことが多くなりそうですけどね。

jQuery はここからダウンロードしてください。

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