「return」「false」「true」などをいじってみましたが、どうもうまくいかないので助言がいただきたいのです。よろしくお願いします。
http://www.cmehappy.jp/websitetips/expander.html
横レスですが…、
http://phpspot.org/blog/archives/2006/11/javascriptcooki.html
で紹介されているサンプルとライブラリを流用してはいかがでしょう?
http://www.cmehappy.jp/websitetips/expander.html
のサンプルと合体させるなら以下のような感じで…。
------------------------------------------------------------------------
index.html
------------------------------------------------------------------------
<html>
<head>
<script language="javascript" src="./prototype.js"></script>
<script language="javascript" src="./cookiemanager.js"></script>
<script type="text/javascript" src="expander.js"></script>
<script type="text/javascript">
//★☆★☆★☆追加★☆★☆★☆
//Cookieを読み込む
function test1(){
var manager = new CookieManager();
var URI = manager.getCookie("memo");
if (URI == "") {
URI = "#";
}
expand(URI,'subjoinder','expander');
}
//★☆★☆★☆追加★☆★☆★☆
</script>
</head>
<body onload="test1();"><!--ページ読み込み時に上の関数を呼び出す-->
</script>
<p id="expander">
<a href="#expander"
onclick="expand('#','subjoinder','expander');return false;"
onkeypress="expand('#','subjoinder','expander');return false;">
続きを表示する
</a>
</p>
<div id="subjoinder" style="display:none">
<p id="collapser" >
<a href="#expander"
onclick="expand(0,'subjoinder','expander');return false;"
onkeypress="expand(0,'subjoinder','expander');return false;">
折りたたむ
</a>
</p>
~折りたたみたい内容を自由に記述~
</div>
</body>
</html>
------------------------------------------------------------------------
expander.js
------------------------------------------------------------------------
function expand(URI,SUB,EXP){
if(document.getElementById) {
if(document.getElementById(SUB).style.display) {
//★☆★☆★☆追加★☆★☆★☆
//Cookieに書き込む
var manager = new CookieManager();
manager.setCookie("memo", URI);
//★☆★☆★☆追加★☆★☆★☆
if(URI != 0) {
document.getElementById(SUB).style.display = "block";
document.getElementById(EXP).style.display = "none";
} else {
document.getElementById(SUB).style.display = "none";
document.getElementById(EXP).style.display = "block";
}
} else {
location.href = URI;
return true;
}
} else {
location.href = URI;
return true;
}
}
設定の保持というのは、ページをリロードしたりしても折りたたみの状態が保持されるようにしたいということでしょうか?
でしたらクリック時に Cookie に展開情報が保存されるようにしておき、ページロード時に Cookie から展開情報を取得してその状態になるようexpand関数を実行してやるコードを書くのが普通かと思います。
返信をありがとうございます。
仰せの通りリロードしたときに状態を保存したいと考えています。
当方まだまだプログラムのスキルが足りないため、
Cookieから関数を利用する方法ついての参考URLがあれば是非教えてください。
よろしくお願いいたします。
横レスですが…、
http://phpspot.org/blog/archives/2006/11/javascriptcooki.html
で紹介されているサンプルとライブラリを流用してはいかがでしょう?
http://www.cmehappy.jp/websitetips/expander.html
のサンプルと合体させるなら以下のような感じで…。
------------------------------------------------------------------------
index.html
------------------------------------------------------------------------
<html>
<head>
<script language="javascript" src="./prototype.js"></script>
<script language="javascript" src="./cookiemanager.js"></script>
<script type="text/javascript" src="expander.js"></script>
<script type="text/javascript">
//★☆★☆★☆追加★☆★☆★☆
//Cookieを読み込む
function test1(){
var manager = new CookieManager();
var URI = manager.getCookie("memo");
if (URI == "") {
URI = "#";
}
expand(URI,'subjoinder','expander');
}
//★☆★☆★☆追加★☆★☆★☆
</script>
</head>
<body onload="test1();"><!--ページ読み込み時に上の関数を呼び出す-->
</script>
<p id="expander">
<a href="#expander"
onclick="expand('#','subjoinder','expander');return false;"
onkeypress="expand('#','subjoinder','expander');return false;">
続きを表示する
</a>
</p>
<div id="subjoinder" style="display:none">
<p id="collapser" >
<a href="#expander"
onclick="expand(0,'subjoinder','expander');return false;"
onkeypress="expand(0,'subjoinder','expander');return false;">
折りたたむ
</a>
</p>
~折りたたみたい内容を自由に記述~
</div>
</body>
</html>
------------------------------------------------------------------------
expander.js
------------------------------------------------------------------------
function expand(URI,SUB,EXP){
if(document.getElementById) {
if(document.getElementById(SUB).style.display) {
//★☆★☆★☆追加★☆★☆★☆
//Cookieに書き込む
var manager = new CookieManager();
manager.setCookie("memo", URI);
//★☆★☆★☆追加★☆★☆★☆
if(URI != 0) {
document.getElementById(SUB).style.display = "block";
document.getElementById(EXP).style.display = "none";
} else {
document.getElementById(SUB).style.display = "none";
document.getElementById(EXP).style.display = "block";
}
} else {
location.href = URI;
return true;
}
} else {
location.href = URI;
return true;
}
}
返信をありがとうございます。
丁寧な説明をいただき納得する動作が出来ました。
折りたたむ記事を複数設定しているのですが、
例)
記事1、subjoinder、expander
記事2、subjoinder2、expander2
記事2にも同じ動作をさせるにはどのようにすればいいのでしょうか?
また外部ファイルを1つにまとめたのですが、
これはあまりいいことではないのでしょうか?
よろしくお願いします。
私も現在JavaScriptを勉強中なので、がんばってサンプルを
作ってみました。
id属性は、expander_1,expander_2…
のように、アンダーバーを入れてください。
無限に増殖可能、だと思います。
サンプル内の部品をコピーしていってください。
サンプルを公開している場所
http://www.geocities.jp/toumin_m7/sample_cookie/
サンプルを一括ダウンロード(ZIP形式)
http://www.geocities.jp/toumin_m7/sample_cookie/sample_cookie.zi...
外部jsファイルをひとつにまとめるのは難しいでしょうね。
全て自分で書き起こすことになるんじゃないでしょうか…。
ただ、クッキーを操作するのはけっこう簡単ですよ。
明日時間があれば、僕も挑戦してみます。
返信をありがとうございます。
わざわざサンプルを作っていただいたようで恐縮です。
ただダウンロードのページがリンク切れとなっていてアクセスできないようです。
クリックするとカチッと音がするのはJavaScript特有なものですか?
Ajaxを利用するのが今後の主流なのでしょうか・・
返信をありがとうございます。
丁寧な説明をいただき納得する動作が出来ました。
折りたたむ記事を複数設定しているのですが、
例)
記事1、subjoinder、expander
記事2、subjoinder2、expander2
記事2にも同じ動作をさせるにはどのようにすればいいのでしょうか?
また外部ファイルを1つにまとめたのですが、
これはあまりいいことではないのでしょうか?
よろしくお願いします。