jquery menu如何修改成mouseover自動打開?

推到 Twitter!
推到 Plurk!

jquery的menu show效果

demo網址如下:

http://p.sohei.org/stuff/jquery/menu/demo/demo.html

我們以Sample one做例子

原本的行為是onclick時會顯示出childnode，而childnode移入時可以顯示更下一層的結點

要修改的地方其實是onclick變成onmouseover

html的部份如下：


<div class="resultheader">Result:</div>
  <div class="result" style="padding:0;">
    <div style="border-bottom: 1px solid #000;background:#eee;">
      <ul id="menuone" class="menu">
        <li class="menumain">File
          <ul><li>New&nbsp;window</li>
            <li></li>

            <li>Save...</li>
            <li>Print...</li>
            <li></li>
            <li>Exit</li>
          </ul>
        </li>
        <li class="menumain">Edit
          <ul><li>Undo</li>

            <li>Redo</li>
            <li></li>
            <li>Cut</li>
            <li>Copy</li>
            <li>Paste<ul><li>All</li><li>Something</li></ul></li>
            <li>Delete</li>

          </ul>
        </li>
        <li class="menumain">Bookmarks
          <ul><li>Bookmark&nbsp;manager</li>
            <li></li>
            <li>some&nbsp;bookmark</li>
            <li>another&nbsp;bookmark</li>

            <li></li>
            <li>Imported&nbsp;bookmarks
              <ul><li>bookmark&nbsp;one</li>
                <li>bookmark&nbsp;two</li>
                <li>bookmark&nbsp;three</li>
              </ul>

            </li>
          </ul>
        </li>
        <li class="menumain" style="float:right;">Help
          <ul><li>Help&nbsp;index</li>
            <li></li>
            <li>About...
              <ul>
                <li>me</li>

                <li>you</li>
                <li>them</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
      <div style="clear:both;"></div>

    </div>
    <p>..some content..</p>
    <p>..some content..</p>
    <p>..some content..</p>
  </div>

而script部份

需要載入jquery套件

<script type="text/javascript" src="http://p.sohei.org/wp-content/jquery/jquery-1.2.2.pack.js"></script>

而jquery.menu部份修改265行http://p.sohei.org/stuff/jquery/menu/jquery.menu.js

$(this.target).mouseover(function(e){
                        self.onClick(e);
                    }).hover(function(e){
                        self.setActive();

                        if ( self.settings.hoverOpenDelay )
                        {
                            self.openTimer = setTimeout(function(){
                                if ( !self.visible )
                                    self.onClick(e);
                            }, self.settings.hoverOpenDelay);
                        }
                    }

就可以了

延身閱讀

這文章是 八月 17th, 2009 由 yku 編輯 and filed under javascript.
標籤： ,

留下你的留言?

««   ∞   »»