Jqueryを使ったタブ
Jqueryをつかったタブは下記の様にする
参考：http://5am.jp/jquery/jquery_ui_tabs/
<head>
<!-- jQuery -->
<script type="text/javascript" src="/jquery-1.####.min.js"></script>
<!-- ui tabs.js -->
<script type="text/javascript" src="/ui.core.js"></script>
<script type="text/javascript" src="/ui.tabs.js"></script>
<link href="/ui.tabs.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } });
});
</script>
</head>
<div id="ui-tab">
<ul>
<li><a href="#fragment-1"><span>タブ1</span></a></li>
<li><a href="#fragment-2"><span>タブ2</span></a></li>
<li><a href="#fragment-3"><span>タブ3</span></a></li>
</ul>
<div id="fragment-1">
<p>タブ1の内容</p>
</div>
<div id="fragment-2">
<p>タブ2の内容</p>
</div>
<div id="fragment-3">
<p>タブ3の内容</p>
</div>
</div>
jquery で要素をカウント
<!-- エラー重複処理 -->
<script type="text/javascript">
// <![CDATA[
//郵便番号
$(function(){
//"div.categoryの要素毎に処理する
$(".errorZip").each(function () {
//"div.categoryの要素内のliの数をカウント
var num = $(this).find('p').length;
//alert (num);
//"div.category内のul.catlist liが0件だったら
if(num >= 2){
$('.errorZip00').css('display','block');
$('.errorZip01').css('display','none');
$('.errorZip02').css('display','none');
}
});
});
// ]]>
</script>
jQueryでテキストの初期値をフォーカス時に消す方法
jQueryでテキストの初期値をフォーカス時に消すには、
下記タグで実現できる
<ul> <li><input type="text" value="ユーザー名" /></li> <li><input type="text" value="メールアドレス" /></li> </ul>
input {
color: #ccc;
}
input .textFocus {
color: #333333 !important;
}
jQuery(document).ready(function(){
// textBox は テキストボックス全てを指定。
var textBox = jQuery("input:text");
// 条件は テキストボックスにフォーカスされたら。
textBox.focus(function(){
// class名 "textFocus" を追加。（文字色を濃くする）
jQuery(this).addClass("textFocus");
// if条件は HTMLで設定した初期値（value）のままかどうか
if(this.value == this.defaultValue){
// trueなら テキストボックスを 空 にする
jQuery(this).val('');
}
// 逆に テキストボックスからフォーカスが失われたとき。
}).blur(function(){
// if条件は テキストボックスの数値が 空（０文字）のとき
if(jQuery(this).val() == ''){
// テキストボックスの中身を 元の初期値（value）にする
// classも外す（文字色を元の薄い色に戻す）
jQuery(this).val(this.defaultValue).removeClass("textFocus");
}
});
});
jQueryでプラグインなしでモーダルウィンドウを実装
表示するコンテンツを増やす場合にはコピー&ペーストでwd2,wd3…と任意の数にしてください。
■jQuery
$(function(){
$('.btns').click(function(){
wn = '.' + $(this).attr('data-tgt');
var mW = $(wn).find('.modalBody').innerWidth() / 2;
var mH = $(wn).find('.modalBody').innerHeight() / 2;
$(wn).find('.modalBody').css({'margin-left':-mW,'margin-top':-mH});
$(wn).fadeIn(500);
});
$('.close,.modalBK').click(function(){
$(wn).fadeOut(500);
});
});
■HTML
<div class="modal wd1"> <div class="modalBody"> <p class="close">×close</p> <p>…..</p> </div> <div class="modalBK"></div> </div> <div class="modal wd2"> <div class="modalBody"> <p class="close">×close</p> <p>…..</p> </div> <div class="modalBK"></div> </div> <div class="modal wd3"> <div class="modalBody"> <p class="close">×close</p> <p>…..</p> </div> <div class="modalBK"></div> </div> <p data-tgt="wd1" class="btns">1</p> <p data-tgt="wd2" class="btns">2</p> <p data-tgt="wd3" class="btns">3</p>
■css
.modal{display:none;}
.modalBody{position: fixed; z-index:1000; background: #000; width:690px; left:50%; top:50%; height: 400px}
.modalBK{position: fixed; z-index:999; height:100%; width:100%;background:#000; opacity: 0.9;filter: alpha(opacity=90);-moz-opacity:0.90;}
.btns{font-size: 80px; width:150px; background:#111; height: 150px; line-height:150px; text-align:center; font-family: arial; color: #fff; float: left; margin:10px; cursor: pointer}
.close{cursor: pointer;}
.modal{width:690px; color: #eee;}
.modal p{font-size:12px; text-align:justify;}
.modal h1{font-weight:bold; font-size: 30px;}
.modalBody{padding: 10px;}
jQuery でスムーズなページ内リンク
jQuery でスムーズなページ内リンクは、
jqueryを読み込んだ上、
下記javascriptを記述
<script type="text/javascript">
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
var body = 'body';
if (navigator.userAgent.match(/MSIE/)){
body = 'html';
}
$(body).animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
jqueryでアコーディオン
下記がとても参考になる
参考ページ
■html部分
<div>
<h3 class="accordion_head">アコーディオンのトリガー部分</h3>
<p>アコーディオンする部分。</p>
</div>
■スクリプト部分
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.accordion_head').click(function() {
$(this).next().slideToggle();
}).next().hide();
});
</script>
■詳細
まずページを表示させるとscript部分6行目の.next().hide();が実行されます。
「トリガー(.accordion_head)の次の要素(next)を隠す(hide)」という命令ですね。
これでアコーディオンしたい部分が隠されて表示されるわけです。
次にトリガークリックで実行される部分。5行目の$(this).next().slideToggle();
このとき$(this)にはクリックしたトリガーが入っています。
「トリガー(.accordion_head)の次の要素(next)をスライド(slideToggle)する」ってことですね。
こう書いておくことで同じページに何個もアコーディオンがあっても、クリックしたトリガーだけ実行されます。
slideToggleなのでクリックで表示非表示を交互に実行します。
slideToggle()の中に’slow’（遅い）、’nomal’（普通（指定なしと同じ））、’fast’（早い）を入れるとスライドスピードも変えられます。
超シンプルなコードなので色々カスタマイズできそうですね。
（classを足して開いているアコーディオンだけ色変えたりとか、一個表示してるときは他のアコーディオンは隠すとか。。。）
■一括開閉にチャレンジ！
$('.accordion_all_head').click(function() {
$('.accordion_head').next().slideToggle();
});
■一番最初だけ開いた状態にチャレンジ！
$('.accordion_head:first').next().show();
■つのアコーディオンを開くと他は閉まるにチャレンジ！
$(document).ready(function(){
$('.accordion_head').click(function() {
$('.accordion_head').next().slideUp(); //←ここ追記
$(this).next().slideToggle();
}).next().hide();
});
■開いているアコーディオンの色を変えるにチャレンジ！
$(document).ready(function(){
$('.accordion_head').click(function() {
//ここから
if($(this).is(".selected")){
$(this).removeClass("selected");
}else {
$(this).addClass("selected");
}
//←ここまで追記
$(this).next().slideToggle();
}).next().hide();
});
.selected {
background:選択中の色;
}
.selected + * {
background:選択中の色;
}
jqueryのスタイリッシュなカウントダウンタイマー”jquery-countdown”
jqueryの見た目がきれいなカウントダウンです。
〔必要なjavascript〕
<script src="/js/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">
$(function(){
$('#counter').countdown({
image: '/images/digits.png',
startTime: '01:12:12:00'
});
});
</script>
〔必要なcss〕
<style type="text/css">
br { clear: both; }
.cntSeparator {
font-size: 54px;
margin: 10px 7px;
color: #000;
}
.desc { margin: 7px 3px; }
.desc div {
float: left;
font-family: Arial;
width: 70px;
margin-right: 65px;
font-size: 13px;
font-weight: bold;
color: #000;
}
</style>
〔必要なhtml〕
</p> <div id="counter"> </div> <div class="desc"> <div>Días</div> <div>Horas</div> <div>Minutos</div> <div>Segundos</div> </div> <p>
Días
Horas
Minutos
Segundos
jQuery の Cycle で、フェードイン・フェードアウト切替のスライドショー
ホームページの案件で
「画像をFlashを使って切り替えて表示させたい。」
という要望が結構多い。
もちろん、Flashを使って画像をフェードイン＆フェードアウトさせても良いのだが、
なんだFlashのソフトを立ち上げて、画像を読み込んで・・・
など、作成するのにある程度の時間を要するし、メンテナンスなんかの時も大変。
そこで、jQueryを使って画像を簡単にフェードイン＆フェードアウトして切り替える方法をメモしておきます。
〔サンプル例〕
5つの画像を、フェードイン・フェードアウトのアニメーションで、順番に表示する。
1つの画像の表示時間は、２秒。
フェードイン・フェードアウトのアニメーション動作時間は、3秒。
1.それぞれのjavascriptを読み込む
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.cycle.all.js"></script>
2.javascriptのコードを記載
<script>
<!--
jQuery( function() {
jQuery( '#jquery-cycle' ) .cycle( {
fx: 'fade',
speed: 3000,
timeout: 2000
} );
} );
// -->
</script>
【fx】
スライドが切り替わるアニメーションの種類を指定するオプション。 フェードイン・フェードアウトのアニメーションにするには、「fade」を指定。
【speed】
スライドが切り替わるアニメーション動作速度を指定するオプション。 3000ミリ秒を指定した。
【timeout】
スライド1つ1つの表示時間を指定するオプション。 2000ミリ秒を指定した。
3.htmlに画像を記載
</p> <div id="jquery-cycle"><img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /></div> <p>
以上。