Prototype.jsで要素の表示・非表示を実現
今更な内容ですが書くネタをすぐに見つけられなかったのでtoggleです（笑）
prototype.jsに関しては前回のエントリーを参考にしてください。
今回使用するファイル
- root
- prototype.js
- index.html
HTMLソース
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prototype.jsで表示・非表示</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function Toggle(elements) {
var item = $(elements);
Element.toggle(item);
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="Toggle('MenuList')">表示非表示</a>
<ul id="MenuList">
<li>リストです。</li>
<li>隠さないで！</li>
<li>早く隠して！！</li>
</ul>
</body>
</html>
javascriptソース
function Toggle(elements) {
var item = $(elements);
Element.toggle(item);
}
多少javascriptの知識があればprototype.jsを使うことでちょっとしたwebアプリケーションを作ることができちゃったりします。
今回は要素にonclick="Toggle('表示非表示させたいid')"を入力すればあ～ら簡単（笑）
表示非表示メニューのできあがり。
カテゴリ
使えるAjax関連記事
- noobSlideみたいなのをPrototype.jsとScriptaculousで作ってみた。
- Ajaxで使えるローディングアニメーションGIF ジェネレータメモ
- Prototype.jsのよく使う機能を簡単に使えるよう使いやすくまとめみた。
- png画像を使って実現する透過を使ったデザイン＆Ajax
- オンラインで付箋を貼れる「lino」:1日経過してすごいことになった。
- オンラインで付箋を貼れる「lino」
- Prototype.jsだけで実現するオートコンプリートライブラリ「AutoComp.js RC1」
- 新サイトの制作開始02
- 今さらだけどGoogle Map API日本語版マニュアルがでているそうです。
- 簡易Ajax RSS Readerβ2
- 簡易Ajax RSS Readerβ
- prototype.jsでテキストエリアに絵文字式入力
- Prototype.jsを使った簡単ファイル読み込み
トラックバック(0)
このブログ記事を参照しているブログ一覧: Prototype.jsで要素の表示・非表示を実現
このブログ記事に対するトラックバックURL: http://newflow.heteml.jp/mt4/mt-tb.cgi/175
コメントする