Ivy SOHO.net

jQuery ローディングプラグインwaitMeを配布元サンプルを参考にinputタグで実行できるよう変更しGeeklogでの変更方法を紹介します。

配布元サンプルは、

<button type="button" id="demo">Submit</button>

で実行しますが、ここでは、input type="submit"にて実行するように変更しました。

<input type="submit" value="Go"  id="demo" >

ダウンロード：

ダウンロードしたファイルをテーマ下の/jquery.waitme/にアップロードする。

http://www.jqueryscript.net/loading/jQuery-Plugin-For-Creating-Loading-Overlay-with-CSS3-Animations-waitMe.html

1. テンプレートのheader.thtmlに追加する

<!-- jQuery Plugin For Creating Loading Overlay with CSS3 Animations - waitMe { -->
<link type="text/css" rel="stylesheet" href="{layout_url}/jquery.waitme/waitMe.css">
<!-- } jQuery Plugin For Creating Loading Overlay with CSS3 Animations - waitMe -->

2. テンプレートのfooter.thtmlに追加する

<!-- jQuery Plugin For Creating Loading Overlay with CSS3 Animations - waitMe { -->
<script src="{layout_url}/jquery.waitme/waitMe.js"></script>
<script> 
$(function(){

// none, bounce, rotateplane, stretch, orbit, 
// roundBounce, win8, win8_linear or ios
	var current_effect = 'ios';

	$('#demo').click(function(){
		run_waitMe(current_effect);
	});

	function run_waitMe1(effect){
		$('#container > form').waitMe({
			effect: effect,
			text: 'Please waiting...',
			bg: 'rgba(255,255,255,0.7)',
			color:'#000'
		});
	}
});
</script>
<!-- } jQuery Plugin For Creating Loading Overlay with CSS3 Animations - waitMe -->

3. 本文HTML　#container　.waitMe_ex の例

<div id="container" >
<form>
<input type="submit" value="Go"  id="demo"">
</form>
</div>

参考：

jQuery Plugin For Creating Loading Overlay with CSS3 Animations - waitMe