今日の人気記事

  1. レスポンシブなパンくずナビを作成する「rCrumbs」
  2. テーブルをレスポンシブ対応に「rt Responsive Tables」
  3. 背景画像や色をランダムに変更「RandomBackground」
  4. 英数字がパラパラめくれるボードを実装「Flight Board」

指定した要素を更新(変更)する「Refreshing an element at a set time interval」

スポンサーリンク

指定した要素を更新(変更)するjQueryプラグイン「Refreshing an element at a set time interval」を紹介します。

スポンサーリンク

jQueryプラグイン「Refreshing an element at a set time interval」

Refreshing an element at a set time intervalは、その名の通り! ある指定した要素をセットした時間間隔で更新(変更)するjQueryプラグインです。

jQueryからPHPファイルを呼び出して文字を5秒間隔で変更する仕様になっています。

「Refreshing an element at a set time interval」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="Simple Time Interval Page Element Refreshのデモでーす。">
<title>Simple Time Interval Page Element Refresh - jQuery Plugin Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="js/jquery.timers-1.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   var j = jQuery.noConflict();
	j(document).ready(function()
	{
		j(".refreshMe").everyTime(5000,function(i){
			j.ajax({
			  url: "refresh-me.php",
			  cache: false,
			  success: function(html){
				j(".refreshMe").html(html);
			  }
			})
		})
	});
   j('.refreshMe').css({color:"red"});
});
</script>
</head>
<body>
<h1>Simple Time Interval Page Element Refreshのデモでーす。</h1>
<p>▼5秒間隔で文字が変わるよ!</p>
<div class="refreshMe">ここに注目してね。</div>
</body>
</html>


スポンサーリンク

関連記事(一部広告含む)