Home > スポンサー広告 > Accordion応用:機能解説とカスタマイズ


スポンサーサイト

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

 Comments:-

2008-07-28 (月) 20:34

このコメントは管理人のみ閲覧できます

universe URL 2008-07-28 (月) 20:36

TomomiXさん、一応非公開でコメントさせて頂きましたがコメント非公開でちゃんと届いてますよね?

TomomiX URL 2008-07-28 (月) 23:08

> universe さん
コメントありがとうございます。
ご指摘の通り、IE6ですと、Font Size Changerがなが~く
伸びてしまうのですよね。
実は調べつつ直そうかと思うのですが、なかなか直らなくて
お盆休みあたりで徹底追求しようかと思ってます。
このブログは結構 IE6で変な表示になっているので早く完全に
直したいところです。。。

TomomiX URL 2008-07-28 (月) 23:25

【追記】
ホバーウィンドウとは何でしょうか?
リンクなどクリックすると、別のブラウザ(ポップアップウィンドウ)で
表示されるものでしょうか?
動作しなくなったタイミングはどこかさかのぼることで解決するかも
知れませんね。
Highslide / Shadowbox 実装後であれば、そこが原因かも知れませんね。
(JavaScriptファイルが競合しているなどの原因で)
確証はないのですが、取り急ぎ思いつきです。

universe URL 2008-07-29 (火) 00:38

TomomiXさん、Layout settingの件、ご存知だったんですね(^^;m(__)m
ホバーウィンドウとは、うーん、数年前に流行ったもので
HPなどで上からwindowが落ちてくる様なものです。
なんと言いましょうか。説明がうまく出来なくて申し訳ありません<m(__)m>。
URLとしましては、以下(自分のブログですm(__)m)です。(記録の為残しておいた物です)
http://universe.blog2.fc2.com/blog-entry-162.html
ドロップウィンドウとも言うみたいです。
大元としましては、以下を参考にしました。
http://yakibuta.blog14.fc2.com/blog-entry-13.html
ホバーウィンドウで、検索すると以下ですm(__)m
http://www.google.co.jp/hws/search?hl=ja&client=fenrir-sub&channel=selection&adsafe=off&safe=off&lr=lang_ja&q=%E3%83%9B%E3%83%90%E3%83%BC%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6
長文ですみません_(._.)_
もし、お分かりであれば教てく頂けますと幸いです。

TomomiX URL 2008-07-29 (火) 13:28

> universe さん
ホバーウィンドウが動作されない件、わかりました。
(ただし解決方法はまだわかりません。。)
やはりShadowboxと競合しているようです。
<head>間で
<script type="text/javascript" src="/file/yui-utilities.js"></script>
<script type="text/javascript" src="/file/shadowbox-yui.js"></script>
<script type="text/javascript" src="/file/shadowbox.js"></script>
<script type="text/javascript" src="/file/drop.js"></script>
という順(ホバーウィンドウを後に読み込む)ですと、ホバーウィンドウが動作し、
Shadowboxが動作しなくなり、
<script type="text/javascript" src="/file/drop.js"></script>
<script type="text/javascript" src="/file/yui-utilities.js"></script>
<script type="text/javascript" src="/file/shadowbox-yui.js"></script>
<script type="text/javascript" src="/file/shadowbox.js"></script>
という順(Shadowboxを後に読み込む)ですと、Shadowboxが動作し、
ホバーウィンドウが動作しなくなりました。

universe URL 2008-07-29 (火) 23:43

TomomiXさん、度々本当にありがとうございますm(__)m。
検証までして頂いて本当に感謝です。
競合ですかぁ・・・。
javaの事がよくわからないので、競合と言う事実がわかっただけでも幸せですm(__)m
TomomiXさんも以前ブログでgrayboxが動作しない・・・。みたいな事記述されていたかと思うのですが、それと同じと考えてよいのでしょうか?
http://blackcat13numbers.blog31.fc2.com/blog-entry-187.html

(こちらの記事です)
javaでも競合とかあるんですね(´;ェ;`)ウゥ・・・

2008-07-30 (水) 02:27

このコメントは管理人のみ閲覧できます

TomomiX URL 2008-07-31 (木) 01:20

> universe さん
私もJavaScriptの競合は最近知りました;
しかも対処方法もわからないので基本はあきらめてしまうか
別のサイトやブログを検索して探してはいます。
Greyboxも正にその通りです。確かHighslide入れた後だったような。。。

TomomiX URL 2008-07-31 (木) 01:22

> 非公開さん
あ、申し訳ないのですが、インストールしてないのですよね。
現在自宅には個人PCがなく、会社PCで基本ブログ更新したり
していますので。。。

TT URL 2008-08-01 (金) 14:45

TomomiXさん、こんにちは。以前コメントさせていただいたTTです。
Accordion実装手順3項に記載されているJavaScriptの
> toggleclass: ["closedlanguage", "openlanguage"], 
> togglehtml: ["prefix", "+", "-"],
について少し分かったことがあるので書いておきます。

タイトルヘッダのHTMLは詳細に書くと以下のようになっていると思われます。多分・・・

-----------------------------------------------------------------------------------------------------------------
<div class="technogogy">

<div class="closedlanguage / openlanguage"> 
→ // accordion.jsにより書き換えられる

<span> タイトルヘッダマーク </span> タイトル
</div>
</div>
-----------------------------------------------------------------------------------------------------------------

上記にしたがいCSSの設定を行うとヘッダテキストとヘッダマークの色を個別に指定することもできます。

div.technology // タイトルヘッダ全体を包

コンテンツが開いている状態
div.openlanguage // タイトルヘッダテキスト
div.openlanguage span // タイトルヘッダマーク

コンテンツが閉まっている状態
div.closedlanguage // タイトルヘッダテキスト
div.openlanguage span // のタイトルヘッダマーク

もし間違いがあったらすいません。

TomomiX URL 2008-08-02 (土) 12:36

> TT さん
こんにちわ。補足ありがとうございます。
CSSで "closedlanguage" "openlanguage" に
span を付加したりすれば、わけられました。
カスタマイズする場合、とても参考になります。
このブログのコメント欄は編集できないので恐縮ですが、
ひとつ open/closed が逆になっていました。

あと、
> togglehtml: ["prefix", "+", "-"],
ですが、"+" "-" 部分を画像にしたい場合ですと、
"<img src='/file/hoge1.jpg'>" "<img src='/file/hoge2.jpg'>" のように
ダブルクォート内に画像パスをシングルクォートで囲めばできますね。

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/227-72a9be4b
Listed below are links to weblogs that reference
スポンサーサイト from TRASH

Home > スポンサー広告 > Accordion応用:機能解説とカスタマイズ

Home > FC2blog Tips > Accordion応用:機能解説とカスタマイズ


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
→ // 調査中...
}
})
実際変更したりしての動作で確認しました。変化が見られない、わからないものは調査中にしてしまいました。解説不足ですみませんが、追々調べてみます。
スポンサーサイト

 Comments:12

2008-07-28 (月) 20:34

このコメントは管理人のみ閲覧できます

universe URL 2008-07-28 (月) 20:36

TomomiXさん、一応非公開でコメントさせて頂きましたがコメント非公開でちゃんと届いてますよね?

TomomiX URL 2008-07-28 (月) 23:08

> universe さん
コメントありがとうございます。
ご指摘の通り、IE6ですと、Font Size Changerがなが~く
伸びてしまうのですよね。
実は調べつつ直そうかと思うのですが、なかなか直らなくて
お盆休みあたりで徹底追求しようかと思ってます。
このブログは結構 IE6で変な表示になっているので早く完全に
直したいところです。。。

TomomiX URL 2008-07-28 (月) 23:25

【追記】
ホバーウィンドウとは何でしょうか?
リンクなどクリックすると、別のブラウザ(ポップアップウィンドウ)で
表示されるものでしょうか?
動作しなくなったタイミングはどこかさかのぼることで解決するかも
知れませんね。
Highslide / Shadowbox 実装後であれば、そこが原因かも知れませんね。
(JavaScriptファイルが競合しているなどの原因で)
確証はないのですが、取り急ぎ思いつきです。

universe URL 2008-07-29 (火) 00:38

TomomiXさん、Layout settingの件、ご存知だったんですね(^^;m(__)m
ホバーウィンドウとは、うーん、数年前に流行ったもので
HPなどで上からwindowが落ちてくる様なものです。
なんと言いましょうか。説明がうまく出来なくて申し訳ありません<m(__)m>。
URLとしましては、以下(自分のブログですm(__)m)です。(記録の為残しておいた物です)
http://universe.blog2.fc2.com/blog-entry-162.html
ドロップウィンドウとも言うみたいです。
大元としましては、以下を参考にしました。
http://yakibuta.blog14.fc2.com/blog-entry-13.html
ホバーウィンドウで、検索すると以下ですm(__)m
http://www.google.co.jp/hws/search?hl=ja&client=fenrir-sub&channel=selection&adsafe=off&safe=off&lr=lang_ja&q=%E3%83%9B%E3%83%90%E3%83%BC%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6
長文ですみません_(._.)_
もし、お分かりであれば教てく頂けますと幸いです。

TomomiX URL 2008-07-29 (火) 13:28

> universe さん
ホバーウィンドウが動作されない件、わかりました。
(ただし解決方法はまだわかりません。。)
やはりShadowboxと競合しているようです。
<head>間で
<script type="text/javascript" src="/file/yui-utilities.js"></script>
<script type="text/javascript" src="/file/shadowbox-yui.js"></script>
<script type="text/javascript" src="/file/shadowbox.js"></script>
<script type="text/javascript" src="/file/drop.js"></script>
という順(ホバーウィンドウを後に読み込む)ですと、ホバーウィンドウが動作し、
Shadowboxが動作しなくなり、
<script type="text/javascript" src="/file/drop.js"></script>
<script type="text/javascript" src="/file/yui-utilities.js"></script>
<script type="text/javascript" src="/file/shadowbox-yui.js"></script>
<script type="text/javascript" src="/file/shadowbox.js"></script>
という順(Shadowboxを後に読み込む)ですと、Shadowboxが動作し、
ホバーウィンドウが動作しなくなりました。

universe URL 2008-07-29 (火) 23:43

TomomiXさん、度々本当にありがとうございますm(__)m。
検証までして頂いて本当に感謝です。
競合ですかぁ・・・。
javaの事がよくわからないので、競合と言う事実がわかっただけでも幸せですm(__)m
TomomiXさんも以前ブログでgrayboxが動作しない・・・。みたいな事記述されていたかと思うのですが、それと同じと考えてよいのでしょうか?
http://blackcat13numbers.blog31.fc2.com/blog-entry-187.html

(こちらの記事です)
javaでも競合とかあるんですね(´;ェ;`)ウゥ・・・

2008-07-30 (水) 02:27

このコメントは管理人のみ閲覧できます

TomomiX URL 2008-07-31 (木) 01:20

> universe さん
私もJavaScriptの競合は最近知りました;
しかも対処方法もわからないので基本はあきらめてしまうか
別のサイトやブログを検索して探してはいます。
Greyboxも正にその通りです。確かHighslide入れた後だったような。。。

TomomiX URL 2008-07-31 (木) 01:22

> 非公開さん
あ、申し訳ないのですが、インストールしてないのですよね。
現在自宅には個人PCがなく、会社PCで基本ブログ更新したり
していますので。。。

TT URL 2008-08-01 (金) 14:45

TomomiXさん、こんにちは。以前コメントさせていただいたTTです。
Accordion実装手順3項に記載されているJavaScriptの
> toggleclass: ["closedlanguage", "openlanguage"], 
> togglehtml: ["prefix", "+", "-"],
について少し分かったことがあるので書いておきます。

タイトルヘッダのHTMLは詳細に書くと以下のようになっていると思われます。多分・・・

-----------------------------------------------------------------------------------------------------------------
<div class="technogogy">

<div class="closedlanguage / openlanguage"> 
→ // accordion.jsにより書き換えられる

<span> タイトルヘッダマーク </span> タイトル
</div>
</div>
-----------------------------------------------------------------------------------------------------------------

上記にしたがいCSSの設定を行うとヘッダテキストとヘッダマークの色を個別に指定することもできます。

div.technology // タイトルヘッダ全体を包

コンテンツが開いている状態
div.openlanguage // タイトルヘッダテキスト
div.openlanguage span // タイトルヘッダマーク

コンテンツが閉まっている状態
div.closedlanguage // タイトルヘッダテキスト
div.openlanguage span // のタイトルヘッダマーク

もし間違いがあったらすいません。

TomomiX URL 2008-08-02 (土) 12:36

> TT さん
こんにちわ。補足ありがとうございます。
CSSで "closedlanguage" "openlanguage" に
span を付加したりすれば、わけられました。
カスタマイズする場合、とても参考になります。
このブログのコメント欄は編集できないので恐縮ですが、
ひとつ open/closed が逆になっていました。

あと、
> togglehtml: ["prefix", "+", "-"],
ですが、"+" "-" 部分を画像にしたい場合ですと、
"<img src='/file/hoge1.jpg'>" "<img src='/file/hoge2.jpg'>" のように
ダブルクォート内に画像パスをシングルクォートで囲めばできますね。

Comment Form

 Trackback+Pingback:0

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/227-72a9be4b
Listed below are links to weblogs that reference
Accordion応用:機能解説とカスタマイズ from TRASH

Home > FC2blog Tips > Accordion応用:機能解説とカスタマイズ

Recent Comments
Recent Trackback
Feeds

↑Page Top

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