matsuda
8/16/2010 - 8:19 AM

Utility methods with jQuery

Utility methods with jQuery

/*
  チェックボックスの全て選択/全て選択解除
  全てチェックのチェックボックスに class="checkall"
  全てチェックの対象範囲に class="checkall-fields"
  <div class="checkall-fields">
    <input type="checkbox" class="checkall">全て選択
    <input type="checkbox">Macintosh
    <input type="checkbox">Windows
  </div>
*/
(function($){
  $(document).ready(function(){
    $('.checkall').click(function(){
      $(this).parents('.checkall-fields').find(':checkbox').attr('checked', this.checked);
    });
  });
})(jQuery);

/*
  チェックボックスの全て選択/全て選択解除
  checkbox : チェックされたチェックボックス
  field_name : 全てチェックの対象範囲(クラス名)
  <form class="search_form">
    <input type="text">
    <input type="checkbox">
    <input type="radio">
    <select type="radio">
      <options value="1">Macintosh</options>
      <options value="2">Windows</options>
    </select>
    <input type="button" onclick="checkAll($(this), 'search_form')">
  </form>
*/
function checkAll(checkbox, field_name) {
  (function($){
    checkbox.parents('.'+field_name).find(':checkbox').attr('checked', checkbox.attr('checked'));
  })(jQuery);
}
/*
  フォームに設定されている値ををリセットする
  button_id : リセットボタン
  <form>
    <input type="text">
    <input type="checkbox">
    <input type="radio">
    <select type="radio">
      <options value="1">Macintosh</options>
      <options value="2">Windows</options>
    </select>
    <input type="button" id="reset">
  </form>
*/
function clearForm(button_id) {
  (function($) {
    $('document').ready(function(){
      $('#'+button_id).click(function(evt){
        $(this).parents('form').find("input,select").each(function(){
          var type = this.type;
          switch(type) {
            case 'text':
            case 'password':
            case 'textarea':
              $(this).attr('value', '');
              break;
            case 'checkbox':
            case 'radio':
              $(this).removeAttr('checked');
              break;
            case 'select':
            case 'select-one':
              $(this).attr("selectedIndex", 0);
              break;
          }
        });
      });
    });
  })(jQuery);
}
/*
  フォームに設定されている値ををリセットする
  Railsの form_for を利用したモデルを対象としたフォーム
  button_id : リセットボタン
  scope : リセットする対象となるフォーム部品のプレフィックス
  <form class="scope">
    <input type="text" id="scope_text">
    <input type="checkbox" id="scope_checkbox">
    <input type="radio" id="scope_radio">
    <select type="radio" id="scope_select">
      <options value="1">Macintosh</options>
      <options value="2">Windows</options>
    </select>
    <input type="button" id="reset">
  </form>
*/
function clearFormWithScope(button_id, scope) {
  (function($) {
    $('document').ready(function(){
      $('#'+button_id, '#'+scope).click(function(evt){
        $(this).parents('form').find("input[id*='"+scope+"_'],select[id*='"+scope+"_']").each(function(){
          var type = this.type;
          switch(type) {
            case 'text':
            case 'password':
            case 'textarea':
              $(this).attr('value', '');
              break;
            case 'checkbox':
            case 'radio':
              $(this).removeAttr('checked');
              break;
            case 'select':
            case 'select-one':
              $(this).attr("selectedIndex", 0);
              break;
          }
        });
      });
    });
  })(jQuery);
}

/*
  どこにもフォーカスが当たっていない状態で エンターキーを押された場合に HTML上先にあるものがsubmit対象となるのを制御
  <form class="block_enter">
    <input type="image" src="back.jpg" name="back" id="form_back">
    <input type="image" src="submit.jpg" name="submit">
  </form>
*/
(function($){
  $(document).ready(function(){
    es = $('input[type!="textarea"]', '.block_enter').each(function(){
      $(this).bind('keypress', function(evt){
        evt = (evt) ? evt : event;
        var charCode = (evt.charCode) ? evt.charCode : ((evt.which) ? evt.which : evt.keyCode);
        // var charCode = evt.keyCode;
        // var charCode = evt.which;
        if (Number(charCode) == 13 || Number(charCode) == 3) {
          var backElement = document.getElementById('form_back');
          backElement.name = '';
        }
      });
    });
  });
})(jQuery);
(function($){
  // force focus() using timer because focus() is not working in IE
  // jQuery('#focus-element').focusForce();
  $.extend($.fn, {
    focusForce: function() {
      var self = this;
      setTimeout( function() { $(self).focus(); }, 100);
    }
  });
})(jQuery);