Home

TRASH

スポンサーサイト

上記の広告は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

Content Glider:ボタンクリックで流れるようにコンテンツを切替

今回は、ブログなどの記事の中に、別枠で記事(テキストや画像を入れるコンテンツ)を付け、更にスライドボタンを付けることで動的(URLを変化させることなく)にページをめくることができるTips紹介をしたいと思います。
昨日の記事で紹介した「Content Slider」と仕組みは同じですが、ページをめくる時の挙動に差があります。こちらも格好良かったので紹介したいと思います。違いは以下の通りです。
Content Slider:ページをめくると、切り替わる
Content Glider:ページをめくると、流れるように切り替わる
Content Gliderのサンプルはこちら
1.CSS(contentglider.css)をダウンロード
2.js(contentglider.js)をダウンロード
3.jquery(jquerypack.js)をダウンロード
contentglider.css
contentglider.js
jquerypack.js
4.すべてブログにアップロード
5.<head> ~ </head> に以下を記述
<link rel="stylesheet" type="text/css" href="/file/contentglider.css" />
<script type="text/javascript" src="/file/jquerypack.js"></script>
<script type="text/javascript" src="/file/contentglider.js"></script>
※CSSは、お好みでカスタマイズください

6.適用させたい記事で以下のような記述をする
<script type="text/javascript">
featuredcontentglider.init({
	gliderid: "canadaprovinces", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 500, //Glide animation duration (in milliseconds)
	direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: false, //Auto rotate contents (true/false)?
	autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>

<div id="canadaprovinces" class="glidecontentwrapper">
<div class="glidecontent">
Content 1
</div>
<div class="glidecontent">
Content 2
</div>
<div class="glidecontent">
Content 3
</div>
</div>

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a> 
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>
※青文字は、テキストや画像を入れるスペースです
script:ページの切り替え制御などを実装
div id="canadaprovinces":埋め込み記事の枠組み部分
div class="glidecontent":枠組みに入れる記事内容の部分
div id="p-select":ページナビボタンの部分

このスライドコンテンツは、オートでページをめくることもできます。以下コードの赤文字箇所を「true/false」どちらかに切り替えるだけです。
autorotate: false, //Auto rotate contents (true/false)?
更にこのスライドコンテンツは、上下切り替え以外に左右切り替えもできます。 以下コードの赤文字箇所を「updown/downup/leftright/rightleft」いずれかに切り替えるだけです。
direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"

Home

Recent Comments
Recent Trackback
Feeds

↑Page Top

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