JQueryの処理共通化メモ
※モバイルでも利用可能です。
js, CSSファイルの一元管理
共通して読み込みたいjsやcssなどを記述、少し改良すればmeta情報の書き出しなども可能
loader.js
// 画面動作に必要な外部ファイル
(function() {
var htmlRoot = 'view';
var jsRoot = '/js';
var cssRoot = '/css';
var reg = new RegExp('^(.+?)://(.+?):?(/.*)?$');
var s = reg.exec(location.href);
var url = s[3];
url = url.slice(1);
url = url.slice(0, url.indexOf('/'));
url = s[1] + '://' + s[2] + '/' + url;
var baseDir = jsRoot + '/lib';
var jsfiles = [
url + baseDir + '/jquery.js',
url + baseDir + '/transparency.min.js',
url + baseDir + '/underscore.min.js',
url + baseDir + '/backbone.min.js',
url + baseDir + '/require.min.js',
url + jsRoot + '/app/base/base.js',
],
css = [
url + cssRoot + '/common.css',
];
/**
* CSSファイルの書き出し
*/
css.forEach(function(path) {
document.write('<link media="all" rel="stylesheet" href="' + path + '" />');
});
/**
* jsファイルの書き出し
*/
jsfiles.forEach(function(jsfile) {
document.write('<script src="' + path + '"></script>');
});
}());
JQuery#Ajax()のWait処理の一元化
ajax.wait.js
// JQuery.ajaxをオーバーライド
$(function() {
var _ajaxFunction = $.ajax;
$.ajax = function() {
$.blockUI({
message : '<div><img src="ajax-loader.gif"></div>',
css : { border: 'none', background: 'none' }
});
return _ajaxFunction.apply($, arguments).always(function(){ $.unblockUI(); });
}
});
実装側は通常と同じに利用してwaitがかかります。
<script src="jquery.js" />
<script src="jquery.blockUI.js" />
<script src="ajax.wait.js"></script>
<script>
$(function() {
$.ajax('http://test.com',{
success : function(){},
error : function(){}
});
});
</script>
wait画像はこちらで自動で作成できます。
http://ajaxload.info/
yahooトップページにあるようなサイトテーマの変更
まず、こちらでテーマを作成
http://jqueryui.com/themeroller/
次に先ほどのloader.jsを追記します。
loader.js( functionの中に追記 )
// テーマの設定(リクエストパラメータ、cookie、デフォルトの順番で取得します)
var default = 'blitzer';
var themes = location.href;
if (themes.indexOf('themes=') > -1) {
themes = themes.slice(themes.indexOf('themes='));
themes = themes.slice(themes.indexOf('=') + 1);
} else {
themes = document.cookie;
if (themes.indexOf('themes=') > -1) {
var position = themes.lastIndexOf('themes');
var startIndex = position + 'themes='.length;
var endIndex = themes.length;
themes = themes.slice(startIndex, endIndex);
if (themes.indexOf(';') > -1) {
position = themes.indexOf(';');
startIndex = position;
endIndex = themes.length;
themes = themes.slice(0, startIndex);
} else {
// default
themes = default;
}
} else {
// default
themes = default;
}
}
document.cookie = ('themes=' + themes + ';expires=Tue, 31-Dec-2030 23:59:59;');
document.write(cssTagWrite(url + '/themes/' + themes + '/jquery-ui.min.css', time));
document.write(cssTagWrite(url + '/themes/' + themes + '/jquery.ui.theme.css', time));
document.write(cssTagWrite(url + '/css/lib/loadingbar/loadingbar.start.css', time));
function cssTagWrite(path, time) {
return '<link media="all" rel="stylesheet" href="' + path + '" />';
}
テーマを変更する場合はURLパラメーターにテーマを指定する
<a href="#themes=blitzer" class="theme"><div></div></a>
テーマはcookieに保存します。
※スクラッチする箇所については、cssをjquery UIに準拠して実装してください。
(ui-**** のcss Chromeなどで「要素の検証」でcssをみれば簡単です)
エンタープライズ向けJavascriptについて
独自でエンタープライズ向けのJavascriptフレームワーク(Backbone.jsベース)を作成しましたので、今度はそちらをUPします。