めも。
beforeunloadイベントに同期ajax処理をかませればOK。
$(window).bind('beforeunload', function(event) {
$.ajax({
async: false
});
});
上記の通り、ajaxのasyncパラメーターをfalseにすれば正常にajax通信を完了してから画面遷移を開始してくれる。
ここでasyncがtrue、または未指定になっている場合、ajax通信が完了する前に画面遷移が行われてしまうので注意されたし。
メモ。
$(window).bind('beforeunload', function(event) {
return '確認メッセージ';
});
めも。
alert($.fn.jquery);
めも。
function getAllEvents(element) {
var result = [];
for(var key in element) {
if(key.indexOf('on') === 0) {
result.push(key);
}
}
return result.join(' ');
}
上記関数を下記のようにして用いる。
$('selector').bind(getAllEvents($('selector')[0]), function(e) {
// 任意の処理
});
これでon…という名のイベント全てに同一の挙動を適用することができる。
指定したタグを除外したい時。
:notセレクタを用いて下記のように指定すればok。
// 子要素の中でbr, hr, img, meta, input要素以外のものを取得する。
var nodes = parent.children(':not(br, hr, img, meta, input)');
といった感じ。
下記リンクにめちゃくちゃ便利でシンプルなプラグインがおいてあったのでメモ。
http://www.laktek.com/2011/01/07/jquery-isblank/
jQueryにisBlank()関数を追加する。
(function($){
$.isBlank = function(obj){
return(!obj || $.trim(obj) === "");
};
})(jQuery);
実行結果は下記の通り。
$.isBlank(" ") //true
$.isBlank("") //true
$.isBlank("\n") //true
$.isBlank("a") //false
$.isBlank(null) //true
$.isBlank(undefined) //true
$.isBlank(false) //true
$.isBlank([]) //true
ふぉぉぉぉい！めっちゃ便利！！
jQueryプラグインにしてみた。といってもそんなにたいそうなことはしていない。
一応重複ロード機能付き。
(function($) {
$.loadCss = function(href) {
var links = $('head > link');
$.each(links, function(key, elem) {
if($(elem).attr('href') == href) {
return false;
}
});
$('<link>', {
rel: 'stylesheet',
type: 'text/css',
href: href
}).appendTo('head');
}
})(jQuery);
まずリストタグでメニューを定義。
var tabMenu = $('<ul>', {class: 'tab-menu'});
tabMenu.append($('<li>', {class: 'active'}).append($('<a>', {href: '#'}).html('タブ1')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ2')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ3')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ4')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ5')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ6')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ7')));
次に各タブのコンテンツ要素を定義
var tabContent = $('<div>', {class: 'tab-content'});
tabContent.append($('<div>').html('コンテンツ1'));
tabContent.append($('<div>').html('コンテンツ2'));
tabContent.append($('<div>').html('コンテンツ3'));
tabContent.append($('<div>').html('コンテンツ4'));
tabContent.append($('<div>').html('コンテンツ5'));
tabContent.append($('<div>').html('コンテンツ6'));
tabContent.append($('<div>').html('コンテンツ7'));
最後に挙動実装。
var tabs = tabMenu.children();
var contents = tabContent.children();
$.each(contents, function(key, elem) {
if(key != 0) {
$(elem).hide();
}
$(tabs[key]).click(function() {
var that = this;
var index = 0;
$.each(tabs, function(key) {
if(this == that) {
index = key;
}
});
$.each(contents, function(key) {
if(index == key) {
$(this).show();
$(tabs[key]).addClass('active');
} else {
$(this).hide();
$(tabs[key]).removeClass('active');
}
});
return false;
});
});
完了！！うん！！簡単だね！！