Schwarz Lanzenreiter forward

Open and close an element dynamically

要素を動的に開閉させる

IE4+, NN6+, Gecko, Opera7+


DownLoad

[ DownLoad ]

Sample

▼ Separate structure and presentation
HTML has its roots in SGML which has always been a language for the specification of structural markup. As HTML matures, more and more of its presentational elements and attributes are being replaced by other mechanisms, in particular style sheets. Experience has shown that separating the structure of a document from its presentational aspects reduces the cost of serving a wide range of platforms, media, etc., and facilitates document revisions.
▼ 構造とプレゼンテーションの分離(邦訳)
HTMLは、常に構造的マーク付けを規定するところのSGMLをルーツに持っている。 HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、 文書の改訂も容易になるということが、経験的に知られている。

引用元 : 原文 | 邦訳

動的なサンプル
開く方向
縦方向
横方向
位置
通常
位置指定 ( position : absolute ;)
  • X : 左からの位置
  • Y : 上からの位置
決定

使い方

基本

まず<HEAD>〜〜</HEAD> 間に以下を記述します。(必要に応じてパス、ファイル名を変更のこと)

<script type="text/javascript" src="opclz.js"></script>

次に閉じたり開いたりさせたい要素に一意なIDを付けます。

e.g.
<p id="testID">開いたり閉じたりするんだな</p>

次にトリガーにする要素に

e.g.
<button onclick="opnClz('testID');">何が起こるかというと</button>

というように

onclick="opnClz('ここにターゲットのID');"

・・・を入れます。あとは opclz.js 内に ID を登録します。

var idList = new Array( "testID" );

複数登録する時は , コンマで区切りる

// example;
var idList = new Array( "testID" , "sample" , "sample2" );

これで完了。

開いたり閉じたりするんだな

横に開かせる

デフォルトで開く方向は縦です。これを横方向にするには

onclick="opnClz('ターゲットのID' , 'x');"

・・と、アルファベットの小文字で x という引数を渡します。 (省略された場合や x 以外のときは全て縦方向になります)

任意の場所に展開する

任意の場所で開閉させたい場合はページ、上、左からの位置を単位を付けて渡します。

onclick="opnClz('ターゲットのID' , 'x', '50px' , '1000px');"

例でいうところの'50px'が左からの位置、'1000px'が上からの位置(絶対位置)になります。 そして px , % , em , pt , mm , in ....等、必ず単位をつけてください。

例では横方向に展開させる x が引数で渡されていますが、縦方向の場合は空を渡してください。 (詳しく説明すると x 以外は全て縦方向になります)

onclick="opnClz('ターゲットのID' , '', 'X方向' , 'Y方向');"

ありがちなミス

引数は全てクヲートで括ります。 しかし、シングルクヲート、ダブルクヲートの使い方によってはエラーとなります。

ダブルクヲートの中でダブルクヲートは使えない

onclick="opnClz("ターゲットのID" , "x", "X方向" , "Y方向");"

ダブルクヲートの中ではシングルクヲートを使う

onclick="opnClz('ターゲットのID' , 'x', 'X方向' , 'Y方向');"

シングルクヲートの中でシングルクヲートは使えない

onclick='opnClz('ターゲットのID' , '', 'X方向' , 'Y方向');'

シングルクヲートの中ではダブルクヲートを使う

onclick='opnClz("ターゲットのID" , "", "X方向" , "Y方向");'

使用上の注意

  1. このスクリプトはページの読み込み完了後に登録された要素の初期状態が視覚的に消えるように変更します。 そこで注意してほしいことは 「このスクリプトが走るブラウザでの見栄えを前提にレイアウトを考えない」 ということです。NN4x 、Opera6x 等古いブラウザでも意図した見栄えになるよう、スクリプトは最後に導入してください。

  2. 前述にもある通り「ページの読み込み完了後」に要素が初期状態として消えます。 この為重いページでは妙なタイミングで消えます。これを回避したいという場合は opclz.js の読み込みを <HEAD>〜〜</HEAD> 間には記述せず、操作したい要素が出きった後

    exsample;
    <div id="sample00">sample 0</div>
    <div id="sample01">sample 1</div>
    <script type="text/javascript" src="opclz.js"></script>
    

    というように <BODY>〜〜</BODY> 間に記述し opclz.js 中のソースを変更します。

    onload = init;
    
    // という一行を
    
    init();

    と書き換えます。

  3. 操作する要素によって度々実行結果が変わります。

    例えば IMG 要素を操作する場合

    その1
    <img id="sample05" src="*" alt="*" width="*" height="*">

    その2
    <p id="sample04"><img  src="*" alt="*" width="*" height="*"></p>

    違いを体験できたと思います。これは IMG 要素を直接操作する場合と親要素である P 要素というブロック要素を操作する場合との違いです。

    もう少し問題解決のための説明をします。以下は横方向に展開させる例です。

    その3
    <div id="sample06">〜〜</div>

    Before the advent of style sheets, authors had limited control over rendering. HTML 3.2 included a number of attributes and elements offering control over alignment, font size, and text color. Authors also exploited tables and images as a means for laying out pages. The relatively long time it takes for users to upgrade their browsers means that these features will continue to be used for some time. However, since style sheets offer more powerful presentation mechanisms, the World Wide Web Consortium will eventually phase out many of HTML's presentation elements and attributes.

    ちょっとアカン! というかんじです。「その4」では width を指定することでこれを解決している例です。

    その4
    <div id="sample07"><div style="width : 500px">〜〜</div></div>

    スタイルシートが現れるまで、HTML著者がレンダリングを制御することに限界があった。HTML 3.2は、配置、フォントサイズ、テキスト色への制御能力を提供する多くの属性や要素を含んでいた。著者はまた、表や画像を、ページレイアウトのための道具に流用していた。利用中のブラウザをユーザがアップグレードするのに比較的長い時間がかかるということは、スタイルシートに拠らないレンダリング制御手法がしばらく使いつづけられるであろうことを意味する。しかしながら、より強力なプレゼンテーション機構をスタイルシートが提供するため、World Wide Web Consortium は、HTMLのプレゼンテーション関連要素・属性を、段階的に縮小させていくこととする。

    引用元 : 原文 | 邦訳


[PageTop] [Back]

Copyright(C) 2002-2004 kerry.