jQueryプラグイン「droppy」をサイトに実装して使用しています。

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

回答の条件
  • 1人5回まで
  • 登録:2009/07/22 11:58:22
  • 終了:2009/07/29 12:00:03

回答(1件)

id:aside No.1

aside回答回数339ベストアンサー獲得回数312009/07/22 13:24:52

ポイント60pt

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>
id:funnywalk_5

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

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

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

2009/07/22 14:41:17

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません