2013-10-22 8 views
0

내 프로젝트는 메뉴 모음으로 구성되어 있으며, 마우스가 각 버튼 (hoverIntent) 위에있을 때 아래에 하위 메뉴가 표시됩니다. Wet-Boew (Web Experience Toolkit) (https://github.com/wet-boew/wet-boew)를 사용하여 이러한 기능을 생성합니다.HoverIntent의 주요 기능을 입력 할 수 없습니다.

내 프로젝트 작업 공간은 jquery.min.js를 호출하고 이후에 hoverintent.js 및 menubar.js를 호출하는 색인 ​​파일을 포함하여 기본 프로젝트 PHP 폴더로 구성됩니다. 다음은

는 hoverintent.js의 시작 :

(function($) { 
     // Alert Point A 
$.fn.hoverIntent = function(f,g) { 
       // Alert Point B 
    // default configuration options 
    var cfg = { 
     sensitivity: 7, 
     interval: 100, 
     timeout: 0 
    }; 
    // override configuration options with user supplied object 
    cfg = $.extend(cfg, g ? { over: f, out: g } : f); 

       etc... 
    }) 

내 문제는 내 코드에서 AI가 가지고있는 첫 번째 ALTER 지점에 도달 할 수 있습니다 (그리고 ALTER 상자를 생성 할 수 있습니다)하지만, 프로그램 원이다 $ .fn.hoverIntent = function (f, g) {...} (두 번째 경고 점 B가있는 곳)을 실행하지 마십시오. 내 menubar.js (코드의 주요 기능이로드되지 않는 곳)와 비슷한 문제가 있습니다.

일반적으로이 문제의 가장 일반적인 원인은 무엇이며이를 수정하는 가장 좋은 방법은 무엇입니까?

이전에이 소프트웨어에 대한 별도의 로그인 프로그램과 관련이있는 다른 PHP 프로젝트 폴더 (프로젝트 작업 공간 내부에 있음)에서 jQuery를 호출합니다. 색인 파일은 기본 내용을 표시하기 위해 색인 문서로 돌아 가기 전에 사용자의 자격 증명을 얻기 위해 로그인 프로그램으로 점프합니다.

나는 이것이 hoverintent.js와 menubar.js보다 먼저 색인 파일에서 참조 된 것과 동일한 jQuery 파일인지 확인했다. 이것이 문제의 원인입니까?

죄송합니다. 죄송합니다. 지금은 코드를 공유하지 않으므로 곧 나머지를 준비하겠습니다. 미리 감사드립니다.

---------------- 업데이트 ----------------------------- -

내 주 색인 파일에는 다음 코드가 포함 된 머리글이 포함되어 있습니다. 참고 "../"습식 boew 프로젝트 폴더는 작업 공간의 메인 프로그램 프로젝트 폴더 (인덱스)에서 별도의 때문에 필요합니다 인덱스의 몸 안에, 또한 아래

<head> 
<script src="../wet-boew-master/build/js/jquery.min.js" type="text/javascript"></script> 

<script async="async" src="../wet-boew-master/build/js/dependencies/outside-min.js"></script> 
<script async="async" src="../wet-boew-master/src/js/dependencies/hoverintent.js"></script> 
<script async="async" src="../wet-boew-master/build/js/dependencies/equalheights-min.js"></script> 
<script async="async" src="../wet-boew-master/build/js/dependencies/resize-min.js"></script> 
<script async="async" src="../wet-boew-master/build/js/i18n/en-min.js"></script> 

<script src="../wet-boew-master/src/js/workers/menubar.js" type="text/javascript"></script> 

<title>Title of the Project</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<link rel="icon" type="image/ico" href="images/icon.ico"> 

<script src="../wet-boew-master/build/js/settings.js"></script> 

<link href="../wet-boew-master/build/grids/css/util-min.css" rel="stylesheet"/> 
<link href="../wet-boew-master/build/js/css/pe-ap-min.css" rel="stylesheet"/> 
<link href="../wet-boew-master/build/.../css/theme-min.css" rel="stylesheet"/> 
<noscript><link rel="stylesheet" href="../wet-boew-master/build/.../css/theme-ns-min.css" /></noscript></head> 

우리가 가지고있는 도구 모음 : 내 도구 모음 옵션 및 해당 하위 메뉴를 가리 킵니다

<body> 
    <div id="wb-body"> 
    <div id="wb-head"> 
     <div id="wb-head-in"> 
     <header> 
      <div id="wu-bnr" role="banner"> 
      <nav role="navigation"> 
       <div id="wu-psnb" > 
       <div id="wu-psnb-in"> 
        <div class="wet-boew-menubar mb-mega" data-load="menubar" role="application" style="min-height: 28px;"> 
        <div> 
         <ul data-ajax-replace="../wet-boew-master/demos/includes/menu-eng.txt" class="mb-menu" role="menubar"> 

하는 같은 표시됩니다 :

<li *class=""* role="presentation"> 
<section role="presentation"> 
    <h3 role="presentation"> 
     <a href="index.php?location=activitiesMenu:index" role="menuitem" class="knav-1-0-0 mb-has-sm" aria-haspopup="true"> 
      <span class="expandicon"> 
       <span class="sublink"><?=$glb_string["activities"]?></span> 
      </span> 
      <span class="wb-invisible">(open the submenu with the enter key and close with the escape key)</span> 
     </a> 
    </h3> 
    <div *class="mb-sm"* role="menu" *aria-expanded="false"* *aria-hidden="true"* **id="myHoverIntent"**> 
     <div class="span-2" role="presentation"> 
      <ul role="presentation"> 
       <li role="presentation"><a href="index.php?location=activitiesMenu:index" role="menuitem" class=" knav-1-0-1" tabindex="-1"><?=$glb_string["views"]?><?=($language_set_variable == 'fr'?:)?></a></li> 
       <li role="presentation"><a href="index.php?location=activitiesMenu:create" role="menuitem" class=" knav-1-0-2" tabindex="-1"><?=$glb_string["create"]?><?=($language_set_variable == 'fr'?':')?></a></li> 
      </ul>   
     </div> 
    </div> 
</section></li> 

이 내 ID = "MyHoverIntent"에 대한 올바른 위치겠습니까 (B 이전 **) 위 코드에서?

위의 기울임 꼴 코드 (*)는 변경되지 않습니다 (menubar 및 hoverIntent 주 기능이 실행 중이 지 않으므로 가정합니다). 이것은 일반적으로 사용자가 각 도구 모음 옵션 위에 마우스를 올리거나 그대로두면 자동으로 업데이트됩니다. Wet-BOEW 폴더에 포함 된 샘플 파일 (메뉴 바 및 hoverIntent가 작동하는)이 완벽하게 작동하는 페이지를 보여 주므로이 변경 사항은 방화 광에서 관찰되었습니다. 어떤 이유로 Firebug는 샘플이 menubar.js를 참조하지 않았 음을 보여 주었지만.

답변

0

코드의 절반 만 가지고 있기 때문에 코드가 작동하지 않는 것을 정확하게 말하면 약간 어렵습니다.하지만 몇 가지 사항이 떠오릅니다.첫째, hoverIntent 기능을 사용하면 실제로 hoverIntent 기능이 실제로 마지막으로 정의되기 전에, 당신이 전달하는을 것을 당신이 일을하지 않는 수 있도록, 그래서

$('#myHoverIntent').hoverIntent(); 

두 번째로 같은 jQuery를 개체에를 호출 할 때 호출되는 것입니다 http://jsfiddle.net/G3vCS/

+0

톰, 나는 위의 지수 내 코드의 더 많은 것을 보여주기 위해 업데이트를 만든 : 당신의 immediately-invoked function expression

window.jQuery 여기에 동작하는 예제의 바이올린입니다. hoverIntent.js에서 나머지 코드 (아래 (window.jQuery);)를 제외하고 나는 $ (function() {$ ('# myHoverIntent'). hovertIntent();})를 사용했다. 방화 광에서 오류가 발생했습니다 : "TypeError : $ (...). hoverIntent가 함수가 아닙니다." 또한 정확한 div 위치에서 id = "myHoverIntent"에 대한 내 참조가 있습니까? 하위 메뉴가 메뉴 모음의 특정 드롭 다운으로 시작되는 곳입니다. – user2905014

+0

hoverintent.js 파일에 들어가는 방법을 알아 냈습니다.하지만 이제는 두 가지 문제가 있습니다. hoverIntent()에 대해 두 가지 매개 변수를 입력해야하는지 잘 모르겠습니다. 일반적으로 $ ("myHoverIntent")입니다. hoverIntent (showNav, hideNav); 하지만 그것들은 제 코드에서 선언되지 않습니다. 나는 무엇을 그들에게 맡길 것인가? 또한 hoverintent.js 함수 안에는 코드에 필수적인 것으로 가정하는 개인 함수를 입력 할 수 없습니다. var track = function (ev) {alert ("I have here3"); cX = ev.pageX; cY = ev.pageY; }; var compare = function (ev, ob) {...} var 지연 = 함수 (ev, ob) {...} 등 ... – user2905014