CSSが得意な渋谷のウェブデザイナーのウェブ開発メモ

[PR] Another American Dictionary Spanglish with us!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQuery でタブ切り替えコンテンツ

スマホサイトでもよく使うjQueryです。CSSはおこのみでどうぞ。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Loremのイプサムの嘆きがAMET座る、consectetur adipiscing ELIT、eiusmod労働と肥満ように、temporと活力んsedの。長年にわたり、私はそれから、学区nostrudのaliquipの利点を行使してはならない人、来るが、動作させるためになります。 Duisは1 irureがcillumのdolore EUは何の結果を生成しない逃げるように欲望の痛みの喜びで批判されています。 Excepteur cupidatatブラックは、うまくいけば、あなたは罪のQUIのofficiaで、つまり、私の労苦、suntを女々しいとその精神を放棄されていません

html

<ul class="tabs">
	<li class="active"><a href="#tab1">ラテン語</a></li>
	<li class=""><a href="#tab2">日本語</a></li>
</ul>
<div id="tab1" class="content">
コンテンツA
</div>
<div id="tab2" class="content">
コンテンツB
</div>

javascript

<script type="text/javascript"> 
$(document).ready(function() {
	$(".content").hide(); 
	$("ul.tabs li:first").addClass("active").show(); 
	$(".content:first").show(); 
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); 
		$(this).addClass("active");
		$(".content").hide();
		var activeTab = $(this).find("a").attr("href"); 
		$(activeTab).fadeIn();
		return false;
	});
});
</script>
スポンサーサイト

jQuery トグル開閉

開閉ボタン

Lorem ipsum dolor sit amet, saepe impetus malorum eum in, mei cu tale reprimique. Est equidem vituperata ei. Vel alienum urbanitas ad. At omnis velit sed.

Ex prima brute veritus cum, nec no periculis referrentur. Ei legendos honestatis dissentiet his, eligendi dissentiunt ut pro. Molestiae intellegat ei eam, ferri ceteros sit ei, mea ne ferri signiferumque. In nominavi mandamus has, eu assentior efficiantur vel. Ut paulo consetetur nam, nec ex errem disputationi.

Quis graece aperiam in quo. Duo odio dolorem ei, molestiae definiebas ea sea, usu vidit tempor cu. No vim officiis accusata moderatius, enim zril qui te, ea sed congue vulputate. Quo ex eros feugait. Timeam delicata quaerendum et nam, quo ad illum expetenda imperdiet. Quot senserit cotidieque usu et, ne pri graeci impetus facilisi, ea nam corpora omittantur.

Vix putent vituperatoribus et, at semper feugait sapientem quo, ea mei ridens vocent appetere. Veri dictas inciderint his ad. Stet deleniti eu sed, te his homero deseruisse. Verear feugiat officiis pro ad, eos ei quot quidam, verear appetere vel cu. No quo sapientem ocurreret reprehendunt.

Vel cu legere deserunt, idque aeque epicurei mea id, stet veritus definitionem te sit. Ut essent mediocrem ius. Eos et placerat liberavisse, ponderum intellegam eos ut. Invidunt quaestio adipiscing sit ex, est case eruditi fabulas at. Vero graeco cu sed.

javascript

スピードは5行目数字で調節

<script type="text/javascript">
$(function(){
	$("div.triger").click(function(){
		$(this).toggleClass('on');// ←class="on"を追加/削除
		$(this).next("div.togglecontent").slideToggle(90);// トグル表示/非表示
	});
});
</script>

HTML

<div class="triger">開閉ボタン</div>
<div class="togglecontent">開閉の中身</div>

CSS

ページロード時に非表示するためのCSS。javascript でもできるがjsの読み込みが遅いとロード時に一瞬表示されてしまうのでCSSで処理する。

.togglecontent{
	display: none;
}

jQuery: ページの読み込み時にフェードイン

今では便利なjQueryです。たったこれだけでフェードイン! 速度を数字で調節する際はカッコのなかの""は不要。jquery.jsを加えるのも忘れずに。
<script type="text/javascript">
	$(document).ready(function() {
		$('#wrapper').fadeIn("slow");
	});
</script>
html
<div id="wrapper">
	ここにコンテンツ
</div>
css
#wrapper{
	display: none;
}
追記【2012/7/19】:Flash部分には反映されないようです。

jQuery で target="_blank" を使わず別ウィンドウ

厳密な xhtml ではtarget="_blank"はなしとされています。
最近のウェブブラウザではタブでウィンドウを開くことができるので別ウィンドウで開く意味はますますなくなります。

どうしても別ウィンドウでリンクさせたい場合は以下のJavaScriptを使います。
$(document).ready(function(){
  $("._bank").click(function(){
    window.open(this.href,'_blank');
      return false;
    });
});


newwindow.jsと名前をつけてjsフォルダにアップしたら、以下の2行を<head>のなかにコピペ
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/newwindow.js"></script>


htmlの書き方
<a href="http://jquery.com/" class="_blank">jQuery</a>

target の代わりに class で別ウィンドウリンクさせることができます。
最新バージョンのjQueryはhttp://jquery.com/
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。