実行結果
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設定サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/seekAttention.jquery.js"></script>
<script type="text/javascript">
$(function(){
/* 例1 */
$("#button1").click(function(){
$('#input1').seekAttention();
});
$("#button2").click(function(){
$('#content2').seekAttention({
container:'body'
});
});
$("#button3").click(function(){
$('.important').seekAttention({
paddingTop:5,
paddingBottom:5,
paddingLeft:5,
paddingRight:5,
opacity:0.7
});
});
$("#button4").click(function(){
$('#para4').seekAttention({
/* 点滅なし */
pulse:false
});
});
$("#button5").click(function(){
$('#para5').seekAttention({
color:$('#select_color').val()
});
});
$("#button6").click(function(){
$('#para6').seekAttention({
paddingTop:15,
paddingBottom:15,
paddingLeft:15,
paddingRight:15
});
});
$("#button7").click(function(){
$('#para7').seekAttention({
/* ゆっくり点滅 */
pulseSpeed:800
});
});
$("#button8").click(function(){
$(this).next().next('img:eq(0)').seekAttention({
container: $(this).parent()
});
});
$("#button9").click(function(){
$('h1').seekAttention({
paddingTop:15,
paddingBottom:15,
paddingLeft:15,
paddingRight:15
});
});
});
</script>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://enhance.qd-creative.co.uk/demo/seekAttention/'>seekAttention v.1 jQuery plugin</a></p>
<!-- CODE -->
<h2>例1</h2>
<p>
<input id="button1" value="入力フィールドに適用" type="button" />
<input id="input1" class="text" type="text" />
</p>
<h2>例2</h2>
<div id="content2" style="padding:10px;">
<p>
<input id="button2" value="body要素内のこのボックスに適用" type="button" />
</p>
</div>
<h2>例3</h2>
<p>
<input id="button3" value="重要なリンク要素に適用" type="button" />
</p>
<blockquote>
<p>AjaxはAsynchronous （エイシンクロナス、非同期）<a href="http://ja.wikipedia.org/wiki/JavaScript" class="important">JavaScript</a> + XMLの略で、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrett氏により名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax">Ajax 出典: フリー百科事典『ウィキペディア（Wikipedia）』</a></cite>
</blockquote>
<h2>例4</h2>
<p>
<input id="button4" value="下記の段落に適用" type="button" />
</p>
<p id="para4" style="width:500px;min-height:75px;height:auto!important;height:75px;background:transparent url(http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_t.jpg) no-repeat 10px 10px; padding:15px 10px 10px 120px;">
サザンテラスのイルミネーションはきれいですねー。17:00～24:00まで点灯タイムだそうです。「ブリリアント・ブレス・テラス」というのがテーマだそうです。木々がブルーライトでドレスアップされていて、とっても幻想的です★
</p>
<h2>例5</h2>
<p>
<input id="button5" value="下記の段落に適用（色指定)" type="button" />
</p>
<p>
<select id="select_color">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="orange">orange</option>
<option value="purple">purple</option>
</select>
</p>
<p id="para5" style="width:500px;min-height:75px;height:auto!important;height:75px;background:transparent url(http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_t.jpg) no-repeat 10px 10px; padding:15px 10px 10px 120px;">
サザンテラスのイルミネーションはきれいですねー。17:00～24:00まで点灯タイムだそうです。「ブリリアント・ブレス・テラス」というのがテーマだそうです。木々がブルーライトでドレスアップされていて、とっても幻想的です★
</p>
<h2>例6</h2>
<p>
<input id="button6" value="下記の段落に適用（余白指定）" type="button" />
</p>
<p id="para6" style="width:500px;min-height:75px;height:auto!important;height:75px;background:transparent url(http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_t.jpg) no-repeat 10px 10px; padding:15px 10px 10px 120px;">
サザンテラスのイルミネーションはきれいですねー。17:00～24:00まで点灯タイムだそうです。「ブリリアント・ブレス・テラス」というのがテーマだそうです。木々がブルーライトでドレスアップされていて、とっても幻想的です★
</p>
<h2>例7</h2>
<p>
<input id="button7" value="下記の段落に適用（点滅速度指定）" type="button" />
</p>
<p id="para7" style="width:500px;min-height:75px;height:auto!important;height:75px;background:transparent url(http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_t.jpg) no-repeat 10px 10px; padding:15px 10px 10px 120px;">
サザンテラスのイルミネーションはきれいですねー。17:00～24:00まで点灯タイムだそうです。「ブリリアント・ブレス・テラス」というのがテーマだそうです。木々がブルーライトでドレスアップされていて、とっても幻想的です★
</p>
<h2>例8</h2>
<div style="padding:10px;">
<input id="button8" value="このボックス内の画像に適用" type="button" /><br>
<img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" width="240" height="180" alt="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge" />
</div>
<h2>例9</h2>
<p>
<input id="button9" value="このページのH1要素に適用" type="button" />
</p>
<!-- / CODE -->
</div>
</body>
</html>
