Skip to content

Instantly share code, notes, and snippets.

@matsuda
Created August 16, 2010 08:19
Show Gist options
  • Save matsuda/526616 to your computer and use it in GitHub Desktop.
Save matsuda/526616 to your computer and use it in GitHub Desktop.
Utility methods with 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);
/*
チェックボックスの全て選択/全て選択解除
全てチェックのチェックボックスに 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