- ベストアンサー
複数のjQueryを設置する方法
- 複数のjQueryを効果的に設置する方法を知りたいです。
- 特定のサイトに複数のjQueryを設置すると表示がうまくいかない問題があります。
- 質問内容がわかりにくいかもしれませんが、回答をお願いします。
- muuu2525
- お礼率100% (2/2)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
それぞれのデモサイトのソースをコピペでつなげただけですが、一応、以下で動作しているみたいですけれど…?（スクリプト、CSSのuriは調整してください） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="css/lavalamp_test.css" type="text/css" media="screen"> <style type="text/css"> <!-- #commentForm { padding:0 10px 30px; } #commentForm dt { font-weight: bold; margin-bottom: 5px; } #commentForm dd { margin-bottom: 10px; } #commentForm input { width: 250px; border: 1px solid #CCC; padding: 2px; } #commentForm textarea { border: 1px solid #CCC; padding: 2px; overflow:auto; } .updnWatermark { color: #999; padding: 2px; } //--> </style> <script type="text/javascript" src='js/jquery-1.5.2.min.js'></script> <script type="text/javascript" src="js/jquery.easing.min.js"></script> <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script> <script type="text/javascript" src="js/jquery.updnWatermark.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($) { $("#navi").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); $.updnWatermark.attachAll(); }); //--> </script> </head> <body> <div> <strong>Bottom Style</strong> <ul class="lavaLampBottomStyle" id="navi"> <li><a href="#">ホーム</a></li> <li><a href="http://weboook.blog22.fc2.com/blog-category-2.html">javascript</a></li> <li><a href="http://weboook.blog22.fc2.com/blog-category-2.html">Google API</a></li> <li><a href="http://weboook.blog22.fc2.com/blog-category-7.html">カスタマイズ</a></li> </ul> </div> <form action="#"> <h3>post your comment</h3> <dl id="commentForm"> <dt><label for="author">name</label></dt> <dd><input type="text" id="author" name="author" title="name (required)"></dd> <dt><label for="email">mail address</label></dt> <dd><input type="text" id="email" name="email" title="mail address (required)"></dd> <dt><label for="url">URL</label></dt> <dd><input type="text" id="url" name="url" title="url"></dd> <dt><label for="text">comment※</label></dt> <dd><textarea rows="12" cols="60" id="text" name="text" title="message"></textarea></dd> </dl> </form> </body> </html>
お礼
ありがとうございます。 fujillinさんのお教え頂いた通りで一部を修正することで動作しました。 本来はfujillinさんのお教え頂いた通りで動作するのでしょうが、これはMovable Typeの何かが邪魔をしていたのでは？と思っています・・・。 下記のようにすることで偶然動作するようになりましたが本当に謎です。笑 jQuery(document).ready(function($) { $("#navi").lavaLamp({ ←#naviを#1, #2, #3に修正 fx: "backout", speed: 700, click: function(event, menuItem) { return false; ←falseをtrueに修正 } });