Home > 2008年07月


2008年07月

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Accordion応用:機能解説とカスタマイズ

前回実装手順を解説したAccordionの機能詳細解説とカスタマイズ方法を紹介したいと思います。Accordion形式でテキスト・コンテンツを表現させる方法は以下をご参照ください。
Accordion実装手順
Accordion実装手順3項に記載されているJavaScriptに着目します。これらが各設定となり、変更することで、コンテンツの表示方法をカスタマイズすることができますので、ひとつひとつ解説していきたいと思います。
ddaccordion.init({
headerclass: "technology",
→ // CSSの名前と紐付いています
contentclass: "thelanguage",
→ // CSSの名前と紐付いています
revealtype: "click",
→ // コンテンツの開閉を設定できます "click" か "mouseover"
collapseprev: false,
→ // 同時に開閉できるか設定できます true か false
defaultexpanded: [],
→ // 初回からコンテンツを開くか設定できます 未記入で全部閉じています
onemustopen: false,
→ // 初回からコンテンツを開くか設定できます true か false
animatedefault: false,
→ // 調査中...
persiststate: false,
→ // 調査中...
toggleclass: ["closedlanguage", "openlanguage"],
→ // 調査中...
togglehtml: ["prefix", "+", "-"],
→ // 開閉するタイトルヘッダにマークを設定できます この例だと、タイトルヘッダ前に「+」「-」を付けますという意味
animatespeed: "fast",
→ // 開閉速度の設定ができます "fast" か "normal" か "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
→ // 調査中...
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
→ // 調査中...
}
})
実際変更したりしての動作で確認しました。変化が見られない、わからないものは調査中にしてしまいました。解説不足ですみませんが、追々調べてみます。

Accordion実装手順

今回は、タイトルヘッダーなどの箇所をクリックすると、アコーディオン形式でコンテンツエリアが開閉して記事が見れたり隠せたりできるJavaScript/CSSの紹介・実装方法を紹介したいと思います。

サンプルは以下の通りです。
すべて閉じる | すべて開く
JavaScript
JavaScript(ジャバスクリプト、ジャヴァスクリプト、略称:JS)はスクリプト言語である。主にWebブラウザ上で動作し、HTMLの動的書き換えや入力フォームの自動補完など、ウェブページの使用感向上を目的として使用されたり、リッチクライアントアプリケーションの構築に使われる。(引用元:Wikipedeia)
HTML
HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ、略称:HTML)は、ウェブ上のドキュメントを記述するためのマークアップ言語である。 ウェブの基幹的役割を持つ技術の一つで、HTMLでマークアップされたドキュメントはほかのドキュメントへのハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などの高度な表現力を持つ。(引用元:Wikipedeia)
CSS
Cascading Style Sheets(CSS、段階スタイルシート、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する仕様であり、W3Cによる勧告の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。(引用元:Wikipedeia)

実装方法は以下の通りです。
1.以下のJavaScriptをダウンロードし、サーバにアップロード
もちろん、各自のサーバにアップロードしてください。
accordion.js
jquery-1.2.2.pack.js
2.<head> ~ </head> に以下を記述
各自のサーバにアップロードしたURLを記述し、スクリプトファイルを呼び出す。
Select All
3.<head> ~ </head> または記事ごとに以下を記述
これはスクリプトの設定なので、気にせず中身を統一させたいのであれば、2項と同様でヘッダ間に記述するだけで大丈夫です。毎回記述ごとに設定を変えたい場合、5項とセットで毎回記述ください。
Select All
4.CSS編集で以下を記述
Select All
5.記事に以下を記述
Select All

Select All:テキストエリアの文字を選択するJavaScript

結構私のブログでもカスタマイズ情報を掲載してきて、必要なコード(HTML/CSS/Script)を公開していますが、長い構文だとコピペもスクロールが大変ですし、今後はこのようなコード掲載方法にしようかと思います。
Select All

このようなボタンを押すとテキストエリア内が選択できるので、コピーのショートカットを使うだけで、コードなどを簡単にコピペすることができます。 また、テキストエリアなので、その中のコードを編集・書込みすることができます。自分のブログ環境に合わせた(URL/画像パスなど)状態にしてコピーすることが便利だと思います。 適用方法は以下の通りです。

1.JavaScriptを <head> ~ </head> に
Select All
2.本文に以下を記述
Select All
必要あれば、テキストエリアのレイアウトをブログに合わせてください。以下のCSSを設定することでデザインを変えることができますよ。textarea項目のclass内容を以下のように記述して編集すれば良いということですね。
.codecontainer {
    width: テキストエリアの幅
    margin: テキストエリア外側の余白
    padding: テキストエリア内側の余白
    border: 枠線
    background: 背景
    font-family: フォント
    font-size: フォントサイズ
    line-height: 行間
}

Home > 2008年07月

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。