Created
August 16, 2010 08:19
-
-
Save matsuda/526616 to your computer and use it in GitHub Desktop.
Utility methods with jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
チェックボックスの全て選択/全て選択解除 | |
全てチェックのチェックボックスに 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment