QHMの新タイプHAIKの活用と実験、オープンソースの活用

[ JQuery ]

• 2013-11-12 <script src="./jquery/js/jquery-1.9.1.js"></script> <script src="./jquery/js/jquery-ui-1.10.3.custom.js"></script> <script type="text/javascript"> $(function () { create_menu100(); $(".textArea").slideUp(); $(".clickArea").click(function (){ menuid = "#"+this.id+"_menu"; $(menuid).slideToggle(); }); }); </script> <style type="text/css"> <!-- .clickArea{ width:250px; padding:5px; color:#fff; background-color:#09C; } .textArea{ width:250px; padding:5px; color:#666; background-color:#ddd; } --> </style> <script type="text/javascript"> function create_menu100() { html = ""; for(i=1; i<=100; i++) { html += "<div class='clickArea' id='ca"+i+"'>click me. メニュー"+i+"</div>\n"; html += "<div class='textArea' id='ca"+i+"_menu'>\n"; html += "<ul>\n"; for (j=0; j<11; j++) { html += "<li>メニュー"+ i +"-"+j+"</li>\n"; } html += "</ul>\n"; html += "</div>\n"; html += "<br>\n"; } $("#sample100").html(html); } </script> <div id="sample100">１００個のメニューはここへ表示されます。</div>

for文でループしてメニュー部分の数字の部分を変化させながら100セット分のHTMLを作っています。出来たHTMLを<div id="sample100">〜</div>で表示する位置を準備しておいて、ここへ

$("#sample100").html(html);

で表示しています。最初のhtmlはメソッド(関数)で、括弧内のhtmlは変数です。基本ですので、問題ないですね。
これを分かりやすく、「function create_menu100() 」で定義しておいて、
HTMLを作る部分が、実行されるように、「$(function () { から })」;内でこの関数を「create_menu100();」で呼び出しています。

こんな事はないと思いますが、こういったサンプルを作ってみるのが案外よい練習になります。