人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryプラグイン「droppy」をサイトに実装して使用しています。
http://c-brains.jp/blog/wsg/09/02/19-212529.php
しかし1つのサイトに他のプラグインを一緒に実装しようとすると、なぜか必ずdroppyのほうが動作しなくなります。(それぞれ単独であれば動作します)
下記の日付入力用のカレンダーを一緒に実装したくテストしてみたのですが、これも動作しませんでした。
http://www.electricprism.com/aeron/calendar/
droppy使用経験のある方、注意点などはありますでしょうか。
head内のソースコードを載せようと思ったのですが、質問文字数に制限があるため、回答欄にて載せたいと思います。

●質問者: funnywalk_5
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:jQuery カレンダー サイト ソースコード テスト
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● aside
●60ポイント

http://spinnen.jp/index.php?itemid=109

を参考にしてサンプルソースを組み合わせたところ、共存できました


jquery.droppy.js

/*
 * Droppy 0.1.2
 * (c) 2008 Jason Frame (jason@onehackoranother.com)
 */
jQuery.fn.droppy = function(options) {
 
 options = jQuery.extend({speed: 250}, options || {});
 
 this.each(function() {
 
 var root = this, zIndex = 1000;
 
 function getSubnav(ele) {
 if (ele.nodeName.toLowerCase() == 'li') {
 var subnav = jQuery('> ul', ele);
 return subnav.length ? subnav[0] : null;
 } else {
 return ele;
 }
 }
 
 function getActuator(ele) {
 if (ele.nodeName.toLowerCase() == 'ul') {
 return jQuery(ele).parents('li')[0];
 } else {
 return ele;
 }
 }
 
 function hide() {
 var subnav = getSubnav(this);
 if (!subnav) return;
 jQuery.data(subnav, 'cancelHide', false);
 setTimeout(function() {
 if (!jQuery.data(subnav, 'cancelHide')) {
 jQuery(subnav).slideUp(options.speed);
 }
 }, 500);
 }
 
 function show() {
 var subnav = getSubnav(this);
 if (!subnav) return;
 jQuery.data(subnav, 'cancelHide', true);
 jQuery(subnav).css({zIndex: zIndex++}).slideDown(options.speed);
 if (this.nodeName.toLowerCase() == 'ul') {
 var li = getActuator(this);
 jQuery(li).addClass('hover');
 jQuery('> a', li).addClass('hover');
 }
 }
 
 jQuery('ul, li', this).hover(show, hide);
 jQuery('li', this).hover(
 function() { jQuery(this).addClass('hover'); jQuery('> a', this).addClass('hover'); },
 function() { jQuery(this).removeClass('hover'); jQuery('> a', this).removeClass('hover'); }
 );
 
 });
 
};

html

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.droppy.js"></script>
<script type="text/javascript">
jQuery.noConflict()
var j$ = jQuery
</script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('#nav').droppy()
})
window.addEvent('domready', function() { 
myCal1 = new Calendar({ date1: 'Y/m/d' }, { direction: 1, tweak: {x: 6, y: 0} })
})
</script>
<link rel="stylesheet" type="text/css" href="iframe.css" media="screen" />
<link rel="stylesheet" type="text/css" href="calendar.css" media="screen" />
<link rel="stylesheet" type="text/css" href="dashboard.css" media="screen" />
<link rel="stylesheet" type="text/css" href="i-heart-ny.css" media="screen" />
<link rel="stylesheet" type="text/css" href="droppy.css" media="screen" />
</head>
<body>
<input id="date1" name="date1" type="text" />
<ul id='nav'>
 <li><a href='#'>Top level 1</a></li>
 <li><a href='#'>Top level 2</a>
 <ul>
 <li><a href='#'>Sub 2 - 1</a></li>
 <li>
 <a href='#'>Sub 2 - 2</a>
 <ul>
 <li>
 <a href='#'>Sub 2 - 2 - 1</a>
 <ul>
 <li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
 <li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
 <li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
 <li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
 </ul>
 </li>
 <li><a href='#'>Sub 2 - 2 - 2</a></li>
 <li>
 <a href='#'>Sub 2 - 2 - 3</a>
 <ul>
 <li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
 <li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
 <li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
 <li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href='#'>Sub 2 - 3</a></li>
 </ul>
 </li>
</ul>
</body>
◎質問者からの返答

見事に両方とも動作しました!

中身のソースコードを理解するのはなかなか難しそうですが、地道に解読していきたいと思います。

ありがとうございました!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ