【ハウツー】

ゼロからはじめるYahoo! UI Library - TabView編

1 Yahoo! UI Library - TabViewとは?

 
  • <<
  • <

1/8

今回はYahoo! UI LibraryのUIの1つであるタブ機能について説明します。このタブ機能はHTMLタグに特定のクラスを設定しスクリプトを1行呼び出すだけでUIを作成できます。タブを使って、Webサイトの表示内容を複数に区分したい場合などには最適なライブラリとなるでしょう。

Yahoo! UI Libraryの入手

まず、Yahoo! UI Libraryを入手しましょう(*1)。Yahoo! UI Libraryのダウンロードは以下のURLにある「Download YUI」のボタンをクリックします。

Yahoo! UI Libraryの入手

ダウンロードしたファイルはZIP形式になっているので解凍します。解凍するとbuild, docs, examplesフォルダとREADMEファイルがあります。今回必要になるファイルは下図に示すハイライトされたファイルです。

解凍図

これらのファイルを適当なフォルダに入れて利用します。今回解説しているサンプルは下図のフォルダ構成になっています。

本稿の構成

*1ここではYahoo! UI Libraryの最新版であるバージョン2.4.1で説明します。なお、タブ機能はβ版のエレメント処理を利用しているため、正式版になった場合にはHTMLおよびスクリプトファイル名などを変更する必要があります。
  • <<
  • <

1/8

インデックス

目次
(1) Yahoo! UI Library - TabViewとは?
(2) Tabviewを読み込む
(3) タブを表示させる
(4) 複数タブを表示させる
(5) タブの位置を指定する
(6) スクリプトを使ったタブ作成
(7) イベントと組み合わせる
(8) 1歩先行くタブ生成応用

もっと見る

人気記事

一覧

新着記事

[森川葵]ドラマ「プリンセスメゾン」でNHK初主演 26歳独身の“家買う女”に
[22:50 8/30] エンタメ
赤塚不二夫と過ごしたフジオ・プロの日々、元アシスタントが綴るコミックエッセイ
[22:49 8/30] ホビー
[錦織圭選手]銅メダルの自信をもって“今年の目標”の全米へ
[22:46 8/30] エンタメ
至福の一皿も!山崎童々、グルメマンガ発売イベントでツレヅレハナコと語る
[22:32 8/30] ホビー
「SUPER LOVERS」2期のティザービジュアル公開、公式サイトもリニューアル
[22:29 8/30] ホビー