jQueryで開発にちょっと便利なツールを作ってみた

この記事は8年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。

扱いやすさから大流行しているjQuery。
装飾からアニメーション、フォームのバリデーションなど、幅広く利用されています。

今回は、このjQueryを使って、自分の開発とかコーディングを助けてくれるツールを作ってみました。
MITライセンスで公開しますので、よろしければ使ってみてください。
改変も自由です。

１）指定要素全てにボーダーを指定してくれるプラグイン

ctrlキー（windows）の2回押下で表示／非表示を切り替えられるようにします。
HTMLコーディング中にレイアウト崩れを直す時などに役立つかと。
ボーダーの分、幅が広がっちゃうけどね。背景色とか変えてみるのもアリかも。

他のキーを割り当てたい場合はこちらのサイトなどでキーコードを調べて変更すると良いです。
下のコードの「e.keyCode==17」の数字部分を該当するキーコードに置き換えればOK。
（2箇所ありますので気をつけてください。）

ダウンロードはこちら。
デモはこちら。

コードは以下。

(function($){
  $.fn.debugline=function(options){
    var c=$.extend({
      classname:"displine"
    }, options);

    var t=this;
    var displine = function(e){
      if(e.keyCode==17){
        t.each(function() {
          target=$(this);
          if(target.attr("class")==c.classname){
            target.removeClass(c.classname);
          }else{
            target.addClass(c.classname);
          }
        });
      }
    }
    $(window).keydown(function(e){
      if(e.keyCode==17){
        $(window).bind("keydown",displine);
        setTimeout(function(){ $(window).unbind("keydown",displine); },500);
      }
    });
  };
})(jQuery);

CSS

.displine{
  border:1px red solid;
}

指定要素に割り当てれば完了。

<script type="text/javascript">
$(function(){
  $("div").debugline();

//	クラス名を引数で渡すこともできる
//	$("div").debugline({classname:"dispback"});
});
</script>

２）input type=”hidden”の値を表示してくれるプラグイン

hiddenの値を見るためだけに、いちいちソース見るのはダルいです。
こちらも同様にctrlキー2回押下で表示／非表示を切り替えられるようにします。
こちらはプラグインではなく、読み込むだけで実行可能。

ダウンロードはこちら。
デモはこちら。

コードは以下。

$(function(){
  var t=$("input[type=hidden]");
  var flag = 0;

  var disp = function(e){
    if(e.keyCode==17){
      if(flag==1){
        t.each(function() {
          target=$(this);
          var val = target.attr("value");
          var name = target.attr("name");

          $(".hiddenVals").remove();
        });
        flag=0;
      }else{
        t.each(function() {
          target=$(this);
          var val = target.attr("value");
          var name = target.attr("name");

          target.after("<div class='hiddenVals'>[name] "+name+"[value] "+val+"</div>");
        }); flag=1; 
      }
    }
  }
  $(window).keydown(function(e){
    if(e.keyCode==17){
      $(window).bind("keydown",disp);
      setTimeout(function(){
        $(window).unbind("keydown",disp);
      },500);
    }
  });
});

CSS

.hiddenVals{
  padding:3px;
  background-color:#FDFF9B;
  border:1px #ccc solid;
  text-align:left;
}

HTMLに、JavaScriptとCSSを読み込んで準備完了です。

 

---

以上です。

こんなコードが欲しい！という要望とかあったらリクエストしてくだされば作るかもしれません。

ではまた。