- ベストアンサー
ボタンの入れ替えについて
- script.aculo.usを使ったページ作成でブライドダウン効果を使っているが、開くボタンを押すと一瞬で閉じて再度開くという動きになってしまう
- ユーザーが自然な操作ができるように、開くボタンがクリックされた際にスライドさせながら開くボタンを閉じるボタンに切り替えたい
- ファンクションを使ってボタン画像と呼び出し先をクリックする度に変える方法を試しているが上手くいかない
- gutchi4786
- お礼率80% (4/5)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
状態を覚えておく変数flagを使います。 このことをフラグを立てる、といいます。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Combination Effects Demo in scriptaculous wiki</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css/script.aculo.us.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/application.css" type="text/css" media="screen" /> <script src="js/global.js" type="text/javascript"></script> <script src="js/prototype-1.6.0.2.js" type="text/javascript"></script> <script src="js/scriptaculous.js" type="text/javascript"></script> <script type="text/javascript"><!-- var flag=false; function DownUp(b) { if (!flag) { new Effect.BlindDown(document.getElementById('demo-all')); b.value="閉じる BlindDown/BlindUp"; } else { new Effect.BlindUp(document.getElementById('demo-all')); b.value="開く BlindDown/BlindUp"; } flag = !flag; } // --> </script> </head> <body> <input type="button" onclick="DownUp(this)" value="開く BlindDown/BlindUp" /> <hr/> <div id="PageLeft"> <div id="content"> <br /> <span class="altlink" onclick="new Effect.BlindDown(document.getElementById('demo-all'))">Click for Effect.BlindDown demo</span> <br /> <span class="altlink" onclick="new Effect.BlindUp(document.getElementById('demo-all'))">Click for Effect.BlindUp demo</span> <br /> <div class="demo" style="width: 120px; height: 120px;"> <div class="example" id="demo-all" style="float: none;"> <div style="height: 120px;"> <img src="http://script.aculo.us/images/demo-logo.gif" alt="" /> <span>Click on one of the above to see the effect</span> </div> </div> </div> <div style="cursor: pointer" onclick="javascript:new Effect.Appear(document.getElementById('demo-all'));"> Click here to reset box </div> <br /> <br /> </div> </div> </body> </html>
その他の回答 (1)
- auty
- ベストアンサー率58% (284/486)
画像demo-logo.gifは、当方で準備したものではありません。ホームページscript.aculo.us様の物をそのまま使わさせていただいています。それで、 http://script.aculo.us/images/demo-logo.gif の形になっているわけです。これを取得したいときは、ブラウザで画像を右クリックするかこのURLをブラウザでアクセスします。 ＞＞＞ それ自体はうまく動いてくれるのですが ということなので、準備の仕方を述べませんでしたが、私の提示したままでは動きません。 ご質問者様と環境が違っているからです。修正するところは、 ------------------------------------------------------------ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css/script.aculo.us.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/application.css" type="text/css" media="screen" /> <script src="js/global.js" type="text/javascript"></script> <script src="js/prototype-1.6.0.2.js" type="text/javascript"></script> <script src="js/scriptaculous.js" type="text/javascript"></script> ------------------------------------------------------------ のファイルを指定する部分です。たとえば href="css/script.aculo.us.css" を自分用に合わせます。 またたとえば、ファイルscript.aculo.us.cssのダウンロードは、ブラウザで http://wiki.script.aculo.us/stylesheets/script.aculo.us.css にアクセスします。prototype.jsは http://wiki.script.aculo.us/javascripts/prototype.js という具合です。これは、 http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo のHTMLソースコードを解析して分かります。 ダウンロードせず、そのまま使うときは、 <link rel="stylesheet" href="http://wiki.script.aculo.us/stylesheets/script.aculo.us.css" type="text/css" media="screen" /> と書いてもいいわけです。 ただ、cssは最終的には自分で用意するものですから、最初からご自身で準備されても良いかと思います。
お礼
ありがとうございます。 なんとか動かす事ができました。 その後、ボタンイメージでやや躓きましたが、試行錯誤の上、解決にいたりました。 大変参考になりました。 丁寧なアドバイスありがとうございました。
お礼
ありがとうございます。 丁寧にスクリプトまで書いて下さった上で、イメージ画像まで用意して頂いたようで本当に感謝しております。 記載して頂いたタグを実際に貼り付けて表示してみました。 表示そのものは問題ありませんでしたが、スクリプトが動かないようです。 念の為、サーバーにも上げて見ましたが動かないようです。 画像URLのみであれば問題なく表示したのですが・・ flag変数や、書いていただいたスクリプトを元に色々と調べて見たいと思いますが、出来ましたら動いている物を見てみたいとも思います。 お手数ですが、よろしくお願いいたします。