jQueryで遊んだ

jQueryなるもので遊んでみました。


jQueryというのは、簡単にいうとすごく短いコードで色々とエフェクトの効いたスクリプトを記述することができるってかんじです。
下にリンク貼ったページに色々とサンプルがあるので、そんなのに比べると非常に中途半端なものなんですけど汗、自分が気に入ったものを色々と合体させてちょっとつくってみました。

ということで、以上のことを実際に実装したテストページはこちら。

【その１】折り畳み式のメニュー的なもの
htmlは以下。<dd>と<dl>を組み合わせた単純なもの。
ちなみにスタイルシートでおしゃれにしてます。

<div>
    <dl id="menu">
        <dt>
            <a href="" id="cat1">
            <font color="white">親カテゴリ１</font> 
            </a>
        </dt>
        <dd>
            <a href="#">サブカテゴリー１</a> 
            <a href="#">サブカテゴリー２</a>
        </dd>
        <dt>
            <a href="" id="cat2">
            <font color="white">親カテゴリ２</font> 
            </a>
        </dt>
        <dd>
            <a href="#">サブカテゴリー１</a>
        </dd>
        <dt>
            <a href="" id="cat3">
            <font color="white">親カテゴリ３</font> 
            </a>
        </dt>
        <dd>
              <a href="#">サブカテゴリー１</a>
              <br>
　　　　<a href="#">サブカテゴリー２</a>
        </dd>
    </dl>
</div>

scriptのほうがちょっとややこしいかもです（たぶんもっといい書き方があるんだろうけど。。。）

<!-- 親カテゴリごとにidを振って動作を独立させる。-->
<!-- slideDownで下に出しslideupでしまう。flagをつくって、-->
<!--下に出ているときにクリックしたらしまう。-->
<!--しまった状態なら下に出す。-->

$(function() {
 var flag=0;
 $('#menu dd').hide();
    $('#cat1').click(function(){    
     if(flag==0){
        $(this).parent().next().slideDown();
        flag=1;
        return false;
     }
        if(flag==1){
        $(this).parent().next().slideUp();
        flag=0;
        return false;
        }
       
    });
    
    var flag2=0;
  $('#menu dd').hide();
     $('#cat2').click(function(){    
      if(flag2==0){
         $(this).parent().next().slideDown();
         flag2=1;
         return false;
      }
         if(flag2==1){
         $(this).parent().next().slideUp();
         flag2=0;
         return false;
         }
        
     });
     
     
     var flag3=0;
   $('#menu dd').hide();
      $('#cat3').click(function(){    
       if(flag3==0){
          $(this).parent().next().slideDown();
          flag3=1;
          return false;
       }
          if(flag3==1){
          $(this).parent().next().slideUp();
          flag3=0;
          return false;
          }
         
      });
});

【その２】文字数カウント
htmlは単純にtextフィールドと文字数をカウントしてくれるものを付け足しました。

<div>
        <table>
            <tr>
                <td>感想を一言</td>
                <td><input type="text" class="focus" 
                value="キーワードを入力" size="50" />
                </td>
                <td></td>
                <td><div id="count">0</div></td>
        </table>
    </div>

scriptのほうは、以下なかんじです。

<!-- val()とはテキストフィールドやドロップダウンメニュー等の
value属性を取得・操作するのに使用-->
<!-- focusとはカーソルが合っているとき。blurは離れているとき。-->
<!-- カーソルが合わせたとき書かれている文字が
「キーワードを入力」なら（つまり初期状態なら）空にする-->
<!-- カーソルが合わせたとき書かれている文字が-->
<!--「空」以外なら初期状態にする-->


$(function(){
    $(".focus").focus(function(){
         if(this.value == "キーワードを入力"){
              $(this).val("").css("color","black");
         }
    });
    $(".focus").blur(function(){
         if(this.value == ""){
              $(this).val("キーワードを入力").css("color","gray");
         }
    });
});

<!-- 字数を数える.30字の上限超えたら赤くする.セーフなら青-->
<!-- val()とはテキストフィールドやドロップダウンメニュー等の-->
value属性を取得・操作するのに使用-->
<!-- ここでは、$(this)、つまり指定したエリアのvalue属性を取得-->
その長さを.lengthで取ってきているということ-->
<!-- そしてその結果をcounterという変数に格納。-->
<!-- その後、countというidが振られた
パラグラフエリア(pタグが振られているところ)に
.textで書き出す-->


$(function () {
    $(".focus").keyup(function(){
         var counter = $(this).val().length;
       $("#count").text(counter);
       if(counter == 0){
           $("#count").text("0");
       }
       if(counter >= 30){
           $("#count").css("color","red");
       } else{$("#count").css("color","blue");}
   });
});

いろいろと参考にさせていただいたのは→少しのコードで実装可能な20のjQuery小技集