スポンサーリンク

Yahoo!UIライブラリのTabViewについて。

YUIのTabViewをつかうと簡単にタブメニューを作ることができます。



使い方

下記 javascriptとcssを読み込む。
<!-- Dependencies -->
<!-- core CSS -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css">

<!-- optional skin for border tabs -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css">

<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js"></script>

<!-- OPTIONAL: Connection (required for dynamic loading of data) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/connection/connection-min.js"></script>

<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js"></script>


タブメニューのhtmlとタブの生成
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</script> 

<div id="demo" class="yui-navset">
    <ul class="yui-nav">
	<li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
	<li><a href="#tab2"><em>Tab Two Label</em></a></li>
	<li><a href="#tab3"><em>Tab Three Label</em></a></li>
    </ul>            
    <div class="yui-content">
	<div><p>Tab One Content</p></div>
	<div><p>Tab Two Content</p></div>
	<div><p>Tab Three Content</p></div>
    </div>
</div>


サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Yahoo! UI Library: AutoComplete</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<!-- Dependencies -->

	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/fonts/fonts-min.css">
	<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js"></script>

	<!-- OPTIONAL: Connection (required for dynamic loading of data) -->
	<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/connection/connection-min.js"></script>

	<!--NOTE: Do not use both of these files together; utilities.js includes everything that is   in yahoo-dom-event.js -->
	<!--aggregate file path for YUI Sam Skin CSS for UI controls-->
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/assets/skins/sam/skin.css">   

	<!-- Source file -->
	<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js"></script>
	<!-- core CSS -->
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css">

	<!-- optional skin for border tabs -->
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css">
</head>

<body class="yui-skin-sam">
	<div id="menu" class="yui-navset">
		<ul class="yui-nav">
			<li class="selected"><a href="#tab1"><em>one</em></a></li>
			<li><a href="#tab2"><em>two</em></a></li>
			<li><a href="#tab3"><em>three</em></a></li>
		</ul>
		<div class="yui-content">
			<div id="tab1"><p>Tab content : one</p></div>
			<div id="tab2"><p>Tab content : two</p></div>
			<div id="tab3"><p>Tab content : three</p></div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var myTabs = new YAHOO.widget.TabView ("menu");
	var tabView = new YAHOO.widget.TabView('demo');
</script>
</html>

デモ

http://paranoid.dip.jp/dev/yahoo/yui/tabview.html


ドキュメント
http://developer.yahoo.com/yui/tabview/

スポンサーリンク
スポンサーリンク
 
いつもシェア、ありがとうございます!


もっと情報を探しませんか?

関連記事

最近の記事

人気のページ

はてなの人気のブックマーク

スポンサーリンク
 

過去ログ

2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12

サイト

Vim入門

C言語入門

C++入門

JavaScript/Node.js入門

Python入門

FreeBSD入門

Ubuntu入門

セキュリティ入門

パソコン自作入門

ブログ

トップ


プライバシーポリシー