jack716
71
2017-08-08 16:08:55 작성 2017-08-08 16:11:15 수정됨
3
1116

스프링에서 자바스크립트코드 js파일로 분리했을때 질문있습니다~!~!


코드가 너무 길지만;;

긴 것과 크게 상관 없는 질문일수도 있으니

아래의 질문먼저 읽어주신다면 감사하겠습니다...




//////////////////////////////////////////////////// 자바스크립트 코드 부분//////////////////////////////////////////////////////////////



/* =====================================
 ** Amazon Side Bar Menu- by JavaScript Kit (www.javascriptkit.com)
 ** Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
===================================== */
// Amazon Side Bar Menu- by JavaScript Kit (www.javascriptkit.com)
// Date created: March 15th, 2014
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code


document.createElement("nav") // for IE
var amazonmenu = {


 defaults: {
  animateduration: 100,
  showhidedelay: [100, 100],
  hidemenuonclick: true
 },


 setting: {},
 menuzindex: 1000,
 touchenabled: !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || !!window.Touch || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),


 showhide:function($li, action, setting){
  clearTimeout( $li.data('showhidetimer') )
  if (action == 'show'){
   $li.data().showhidetimer = setTimeout(function(){
    $li.addClass('selected')
    $li.data('$submenu')
     .data('fullyvisible', false)
     .css({zIndex: amazonmenu.menuzindex++})
     .fadeIn(setting.animateduration, function(){
      $(this).data('fullyvisible', true)
     })
    }, this.setting.showhidedelay[0])
  }
  else{
   $li.data().showhidetimer = setTimeout(function(){
    $li.removeClass('selected')
    $li.data('$submenu').stop(true, true).fadeOut(setting.animateduration)
    var $subuls = $li.data('$submenu').find('.issub').css({display: 'none'})
    if ($subuls.length > 0){
     $subuls.data('$parentli').removeClass('selected')
    }
   }, this.setting.showhidedelay[1])
  }
 },


 setupmenu:function($menu, setting){
  var $topul = $menu.children('ul:eq(0)')


  function addevtstring(cond, evtstr){
   return (cond)? ' ' + evtstr : ''
  }


  $topul.find('li>div, li>ul').each(function(){ // find drop down elements
   var $parentli = $(this).parent('li')
   var $dropdown = $(this)
   $parentli
    .addClass('hassub')
    .data({$submenu: $dropdown, showhidetimer: null})
    .on('mouseenter click', function(e){
     amazonmenu.showhide($(this), 'show', setting)
    })
    .on('click', function(e){
     e.stopPropagation()
    })
    .children('a').on('click', function(e){
     e.preventDefault() // prevent menu anchor links from firing
    })
   $dropdown
    .addClass('issub')
    .data({$parentli: $parentli})
    .on('mouseleave' + addevtstring(setting.hidemenuonclick || amazonmenu.touchenabled, 'click'), function(e){
     if ($(this).data('fullyvisible') == true){
      amazonmenu.showhide($(this).data('$parentli'), 'hide', setting)
     }
     if (e.type == 'click'){
      e.stopPropagation()
     }
    })
  }) // end find
  $topul.on('click', function(e){
   if ($(this).data('fullyvisible') == true){
    amazonmenu.showhide($(this).children('li.hassub.selected'), 'hide', setting)
   }
  })
  var $mainlis = $topul.children('li.hassub').on('mouseleave', function(){
   amazonmenu.showhide($(this), 'hide', setting)  
  })
 },


 init:function(options){
  var $menu = $('#' + options.menuid)
  this.setting = $.extend({}, options, this.defaults)
  this.setting.animateduration = Math.max(50, this.setting.animateduration)
  this.setupmenu($menu, this.setting)
 }


}


$(function(){
 amazonmenu.init({
  menuid: 'mysidebarmenu'
 });
});








////////////////////////////////////////////////////////js파일 링크 부분//////////////////////////////////////////////////////////////



<script src="${pageContext.request.contextPath}/resources/js/leftmenu.js">

</script>



////////////////////////////////////////////////////////////////html 부분//////////////////////////////////////////////////////////////


<nav id="mysidebarmenu" class="amazonmenu">
 <ul>
  <li><a href="">xx관리</a>
   <ul>
      <li><a href="">xx개설</a>
      <li><a href="">xx조회</a>
   </ul>
  </li>
  <li><a href="">xx관리</a>
   <ul>
    <li><a href="">xx생성</a></li>
    <li><a href="">xx조회</a></li>
   </ul>

   </li>
 </ul>
</nav>


//////////////////////////////////////////////////////////////css 부분//////////////////////////////////////////////////////////////



 .amazonmenu ul{
 font: normal 12px Verdana;
 list-style: none;
 margin: 0;
 padding: 0;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;


}


.amazonmenu ul li{
 position: static; /* menu li items should have position set to static */
}


.amazonmenu > ul{
 background: white;
 border: 1px solid gray;
 border-radius: 5px;
 width: 200px; /* width of main menu */
 height: 400px; /* height of main menu */
 position: relative;
}


.amazonmenu > ul li a{
 color: black;
 display: block;
 overflow: auto;
 padding: 10px 0;
 position: relative;
 text-decoration: none;
 text-indent: 10px;
}


.amazonmenu > ul li.hassub > a::after{ /* Arrow to indicate this item has sub menu (LI elements with sub menus have a ".hassub" class). */
 border: 5px solid transparent;
 border-left-color: gray; /* Default color of arrow */
 content: '';
 height: 0;
 position: absolute;
 right: 5px;
 top: 35%;
 width: 0;
}


.amazonmenu > ul li.hassub.selected > a::after{ /* Style of arrow when corresponding sub menu is open (LI element has a "selected" class during this state */
 border-left-color: red;
}


.amazonmenu ul li a:hover, .amazonmenu ul li.hassub.selected > a{ /* style of hover and selected menu item links */
 background: lightblue;
 color: navy;
}


.amazonmenu ul li > div, .amazonmenu ul li > ul{ /* Sub menus (Could be a DIV or UL wrapper) style */
 background: white;
 border: 1px solid gray;
 border-radius: 0 8px 8px 0;
 box-shadow: 2px 2px 2px gray;
 display: none;
 font-weight: normal;
 width: 300px;
 height: 400px; /* height of sub menu */
 left: 100%;
 padding: 10px;
 position: absolute;
 top: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 z-index: 1000;
}



@media screen and (max-width: 480px){ /* When screen size is 480px */
 .amazonmenu ul li > div, .amazonmenu ul li > ul{
  left: 30px; /* Stack the sub menus so they take up less space */
 }


 .amazonmenu > ul li.hassub.selected::after{ /* Add "veil" to parent menus */
  background: #eee;
  content: '';
  height: 100%;
  left: 0;
  opacity: .8;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
 }
}





위의 자바스크립트 코드는 위의 html부분의 좌측 메뉴를

마우스오버시에 메뉴가 세부적으로 나타나는 계층구조로 만들어주는 코드입니다...

코드가 너무 길어서 js파일로 뺐는데요..

링크가 잘 된것은 확인했습니다.



궁금한것은

js파일 링크해주는 코드를 아래와같이 해봤었는데요..

아래처럼 하면 제대로 작동하지 않았습니다.

그래서 메서드 호출부분을 js파일에 포함시켜서 분리했더니 제대로 작동을 했습니다.

jsp파일에 나와있는 것과 분리된 파일에 들어가 있는 것이 작동하는데에 영향을 주는 건지 궁금합니다.


<script src="${pageContext.request.contextPath}/resources/js/leftmenu.js">

$(function(){
 amazonmenu.init({
  menuid: 'mysidebarmenu'
 });

</script>




0
0
  • 답변 3

  • ktsedd
    6k
    2017-08-08 16:18:06

    메뉴js 인클루드 부분에 스크립트 코딩까지해서 그런것같습니다

    시점이 달라서 못불러오는거같네여


    <script src="${pageContext.request.contextPath}/resources/js/leftmenu.js"/>

    <script language="javascript">

    $(function(){
     amazonmenu.init({
      menuid: 'mysidebarmenu'
     });

    </script>

    이렇게 해보심이..

    0
  • jack716
    71
    2017-08-08 19:17:08

    ktse님 감사합니다. 많이 도움이 됐습니다.


    <script src="${pageContext.request.contextPath}/resources/js/leftmenu.js"></script>

    <script lang="javascript">
    $(document).ready(function(){
     $(function(){
       amazonmenu.init({
        menuid: 'mysidebarmenu'
       });
     });
    });
    </script>


    코드를 링크거는 곳에서 바로 메서드를 호출하면 시점이 겹쳐서 안됐던 것인가보네요 ... ?

    아직 정확히는 모르겠지만,, 이렇게 아래처럼 해도 안되는 것을 보니...


    <script src="${pageContext.request.contextPath}/resources/js/leftmenu.js">

    $(document).ready(function(){ 

         amazonmenu.init({

        menuid: 'mysidebarmenu'

      });
    });

    </script>


    링크거는 곳에는 코드를 작성하면 안되겠네요 ㅎㅎ

    0
  • ktsedd
    6k
    2017-08-09 08:48:06

    네 그래서 보통 src 로 외부 참조하는 구문과

    스크립트 코딩을 따로둡니다 그냥 규칙같은것 외에 그런이유도 있겠죠

    원래 그렇게 해와서 정확한 답변은 못드리겠네요

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.