ページを読み込んでからアンカー移動

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条件は テキストボックスの数値が 空(0文字)のとき
	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;}

引用:http://zxcvbnmnbvcxz.com/jquery-easy-modalwindow/

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">&nbsp;</div>
<div class="desc">
	<div>D&iacute;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つの画像の表示時間は、2秒。

フェードイン・フェードアウトのアニメーション動作時間は、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>

 

 

以上。

参照元:http://alphasis.info/2011/07/jquery-cycle-fade/

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress