タブ

ASCII.jpさんで

◆Web制作会社が作った！超使えるJavaScriptライブラリ

の記事でミツエーリンクスさんがつくった「MJL（MITSUE-LINKS JavaScript Library）」が紹介されてた。

こんど使ってみようと思い引用メモ。

特徴

「必要最小限」の機能のみ実装

MJLは「必要最小限」と判断された、次の6機能を実装しています。

• 画像のロールオーバー
• Adobe Flashオブジェクト埋め込みの機能拡張
• 新規ウインドウの作成
• スタイルスイッチャの実装
• タブインターフェイスの実装
• 要素の高さ揃え

他ライブラリ非依存＆共存・併用可能

MJLは他ライブラリに一切依存しません。
また、他ライブラリとの共存・併用が可能になっています。

一般的な特徴

次の特徴も持っています。

• クロスプラットフォーム（Mozilla Firefox、Apple Safari、Opera、Internet Explorerのサポート）
• 他ライブラリ非依存
• 他ライブラリとバッティングしない名前空間
• 生成コード・内部利用仕様のWeb標準準拠

…続きを読む >>

Popularity: 36% [?]

JavaScriptを使って表示内容を切り替えるサンプルがKANTENNA.COMさんで掲載されていたので引用メモ。
getElementById()を使って指定IDのオブジェクトにアクセス。

■<a>タグで内容表示切替サンプル

・SW1 ・SW2

■コードは以下です。

<script language="javascript" type="text/javascript">
function Display(no){

　if(no == "no1"){

　　document.getElementById("SW1").style.display = "block";
　　document.getElementById("SW2").style.display = "none";

　}else if(no == "no2"){

　　document.getElementById("SW1").style.display = "none";
　　document.getElementById("SW2").style.display = "block";

　}
}
</script>

<a href="javascript:void(0);" onclick="Display('no1')">SW1</a>
<a href="javascript:void(0);" onclick="Display('no2')">SW2</a>

<div id="SW1">
<p>これはSW1のエリアです。上記SW2をクリックすると消えます。</p>
</div>

<div id="SW2" style="display:none;">
<p>これはSW2のエリアです。上記SW1をクリックすると消えます。</p>
</div>

<div>の中の<p>要素を表示非表示の切り替えをしてますね。

■<a>タグで内容表示切替サンプル２

こちらは、<p>タグの内容もJSに入れて切り替える方法です。
■コードは以下です。

…続きを読む >>

Popularity: 66% [?]

これからページのタブ表示は必須かなと感じてる中、タブ表示をシンプルかんたんに実装できるサイトがありました。
jQuery UIの「Tabs」というウィジェットを使って、ページをタブに分ける方法らしく、
Web上でデザインを選んだり、カスタマイズできるみたいです。

ここのサイトに載ってたので、引用メモ。

シンプル・便利な「jQuery UI Tabs」を使ってみよう
長?いページもスッキリ！jQueryでタブ表示

Tabsをダウンロードしてみよう

jQueryには、ユーザーインターフェース関連の基本的なライブラリを集めた「UI」（User Interface）があります。その中の1つに「Tabs」というウィジェットがあります。Tabsは、Webページを複数のタブに分割して、切り替え られるようにするものです。

jQuery UI Tabsを使うには、まずこのJavaScriptファイルをダウンロードします。ダウンロードページに接続すると、ダウンロードするモジュールを選ぶページが表示されますので、「UI Core」と「Tabs」のチェックをオンにしてダウンロードします（下の画面を参照）。その際に、JavaScriptのコードを圧縮してサイズを小さくすることもできます。

…続きを読む >>

Popularity: 71% [?]