Ajaxでそれなりに時間がかかる非同期処理実行中に、ユーザーに処理が進行中ですよと理解してもらうためのちょっとしたプラグインを作りました。良かったら使ってみてください。ページ最下部からダウンロードできます。
jquery.simpleProgress
jquery.simpleProgress.js
ani.png
HTML
非表示のDIVを作ります。
[html mark=”3,7″]
<html>
<head>
<script type=”text/javascript” src=”jquery.simpleProgress.js”></script>
</head>
<body>
<div id=”spProgress” style=”display:none”></div>
</body>
</html>
[/html]
JavaScript
非同期処理を行うイベントの先頭で、プラグインを起動。非同期処理終了時にセレクターを非表示に。
[js mark=”2,7″]
function 非同期処理イベント(){
$(“#spProgress”).simpleProgress();
$.ajax({
url: “/xxxx/xxxx”,
success: function(json, dataType){
$(“#spProgress”).css(“display”,”none”);
});
}
[/js]
オプション
[js]
//表示座標指定
$(“#spProgress”).simpleProgress({top:100,left:100});
//画像ファイルの相対位置指定
$(“#spProgress”).simpleProgress({relpath:”../../”});
//表示文字列指定
$(“#spProgress”).simpleProgress({message:”処理実行中”});
//タイマー処理感覚指定
$(“#spProgress”).simpleProgress({interval:500});
[/js]
[js]
/*
usage
//html
//start progress
$(“#spProgress”).simpleProgress();
//stop progress
$(“#spProgress”).css(“display”,”none”);
//options
$(“#spProgress”).simpleProgress({message:”updating”,interval:200,top:100,left:100,relpath:”../../”});
*/
(function($){
$.fn.simpleProgress = function(options){
var target = this;
var defaults = {
interval : 100,
message : “Progress”,
top: (screen.height /2),
left: (screen.width /2) ,
relpath: “../”
};
var settings = $.extend(defaults, options);;
var timer = null;
var elementFunc = function(elem){
//init
var cnt = 0;
var init = function (){
$(elem).empty();
$(elem).append(“![](" + settings.relpath + "ani.png)
“);
$(elem).css(“display”,”block”);
$(elem).css(“position”,”absolute”);
$(elem).css(“top”,settings.top);
$(elem).css(“left”,settings.left);
$(elem).css(“z-index”,100);
$(elem).append(““);
$(elem).children(“.pg-message”).css(“display”,”block”);
$(elem).children(“.pg-message”).css(“float”,”left”);
$(elem).children(“.pg-message”).css(“padding”,10);
timer = setInterval(function(){
var wk = “”;
for (var i = 0 ; i < cnt ;i++){
wk += ".";
}
$(elem).children(".pg-message").text(settings.message + wk);
var trf = "transform: rotate(@@@deg);-ms-transform: rotate(@@@deg);-moz-transform: rotate(@@@deg);-webkit-transform: rotate(@@@deg);"
trf = trf.replace(/@@@/g,cnt*45);
$(elem).children("img").attr("style","float:left;" + trf);
cnt++;
if ($(elem).css("display") == "none"){
clearInterval(timer);
}
if (cnt == 8){
cnt = 0;
}
}
,settings.interval);
$(elem).click(function(){
cnt = 0;
});
};
init();
};
var ret = $(this).each(function(){
elementFunc(this);
});
return ret;
}
})(jQuery);
[/js]
jquery.simpleProgress size:2kb
はじめに LMDEにVirtualboxをインストールし、x86Androidな仮想OSを作成し、Androidのデバッグ環境を整えるためのメモです。おそらく debianでもUbuntuでも同じことが可能です。（未確認） virtualboxインストール [bash] $ sudo apt-get install virtualbox [/bash] 上記だけでは不完全なのでKernelモジュールを追加 [bash] $ sudo apt-get install virtualbox-qt virtualbox-dkms [/bash] Virtualbox起動 [bash] $ virtu…
概要 クライアントサイドにjQuery/jQueryUI/jQueryコンポーネントを用い、サーバーとの通信をAjaxで行うインタラクティブなWebアプリケーションです。名前はどうでも良いのですが、SPA（シングルページアプリケーション）といって、一旦ページを表示したら、画面遷移なしにひと通りの処理をこなせてしまうアプリケーションですので、操作性・入力効率が高まります。 （基幹系アプリケーション向きです。） デモ公開 ここで紹介するWebアプリケーションのデモ操作が可能です。下記のURLへアクセスし、ユーザー登録を行ってください。（ゲストユーザー扱いとなるため、フル機能ではありません。） デモ…
概要 HTML5ベースのスマホ・タブレット端末向けのWebアプリケーションです。PC向けとは異なり、タッチデバイスの操作性・多様な解像度に対応したインターフェイス（レスポンシブデザイン）。 データ閲覧、データ入力（追加・更新・削除）ともに可能ですので、基幹系アプリケーションへのアドオンなどとして利用可能です。 デモ公開 ここで紹介するWebアプリケーションのデモ操作が可能です。下記のURLへアクセスし、ユーザー登録を行ってください。PC用の登録画面ですので、若干操作しづらいかと存じます。 （ゲストユーザー扱いとなるため、フル機能ではありません。） ユーザー登録URL http://loveli…
とってもシンプルなプラグインを作ります。ただ、どういう仕組みで動いているかというのを事細かに記載しているサイトは少ないので、そのあたりにこだわって、自分なりの理解を丁寧に解説してみます。 プラグインの完成イメージは、こんな感じです。 Labelタグに対して、プラグインのメソッドを呼び出すと、タイマーで指定した間隔でLabelのTextがカウントアップされていきます。実際に呼び出している部分のHTMLとJavaScriptをご紹介します。 HTML [html] aaa [/html] JavaScript [js] $(“#counter1”).simpleTimer(…
はじめに Webアプリケーションフレームワークで、自動生成可能なページ遷移型のCRUDアプリケーションではなく、一旦ページ表示したら、そのページから移動せず、CRUD処理をすべて完了してしまうようなインタラクティブなWebアプリ（俗に言うSPA）の構築方法についてお話します。今回はクライアントに jQuery/jQueryのグリッドコンポーネントとしてメジャーなjqGridを利用し、通信はjQueryのajax機能を利用します。サーバーサイドはRuby2.0とRails4.0の構成となります。また、記載したソースコードはgithub上のパブリックリポジトリに公開しますので、興味のある方は、ダウ…
ちょっとしたJavaScriptのテクニックのご紹介。 JavaScriptを多用するようなWebアプリケーションを書いていると、よく利用する汎用的な関数なんかが出てくると思います。ただ単にJSファイルに functionを定義してしまうと、グローバルfunctionになってしまいます。小さなサイトならこれで問題ないケースが多いと思うのですが、中規模ぐらいになると名前がバッティングしたりして、問題が発生したりします。 そんなこんなで、JavaScriptで汎用的なコンポーネントを作り、名前のバッティング、グローバルfunctionになるのを避けつつ、便利に使いましょう的なテクニックです。 テス…
Leave a comment