jQuery 메뉴 위젯을 팝업 메뉴로 사용

내 Web Forms 응용 프로그램에서 jQuery Menu Widget을 사용하려고합니다.jQuery 메뉴 위젯을 팝업 메뉴로 사용

나는 간단한 데모를 던졌으며 위 링크의 예와 똑같이 작동합니다.

하지만 메뉴를 팝업으로 표시하고 싶습니다. 사용자가 다른 곳을 클릭하면 메뉴가 자동으로 닫힙니다. 불행히도 jQuery UI 사이트에서이 문제에 관해 전혀 알 수 없습니다.

누군가 jQuery 메뉴 위젯을 팝업 메뉴로 사용하는 예를 가리킬 수 있습니까?

2012-12-04 Jonathan Wood

이전 스타일의 팝업이 아닌 모달 창을 사용한다고 가정합니다. 메뉴 div에 display: none; 값을 CSS에 넣은 다음 나타나는 스크립트가 있어야하는 이유는 무엇입니까? JQuery와에서는이 같은만큼 쉬운 것입니다 : your_div이 메뉴 DIV의 ID와 "느린"입니다

$("#your_div").fadeIn("slow");

애니메이션의 속도입니다. .fadeOut()은 반대쪽을 달성하기 위해 호출하는 함수입니다 (메뉴가 사라짐).

사용자가 다른 곳을 클릭 할 때 메뉴가 사라지게하려면 화면과 동일한 크기의 투명한 div를 만들고이 invisible div를 클릭하여 .fadeout() 기능이 실행되는지 확인하십시오.

출처

2012-12-04 03:15:23 mastazi

을 정말? 백그라운드 div를 만들어야합니까? 나는 jQuery-UI 메뉴가 이것을 지원하지 않는다는 것에 놀랍니다. 메뉴를 팝업으로 표시하는 첫 번째 사람이 될 수는 없습니다. –

배경 div를 만드는 방법은 백만 가지 방법 중 하나입니다. 원하는대로 fadeOut 함수를 트리거 할 수 있습니다. 그런데 jQuery-UI는 효과가없는 UI 요소 라이브러리입니다. fadeIn 및 fadeOut은 효과이므로 Jquery UI에 포함되지 않고 JQuery에 포함됩니다. 솔직하게 이러한 동작이 UI 라이브러리에 포함되어 있다면 혼란 스러울 것입니다. – mastazi

예, 이것은 기회입니다 - jqueryui를 없애고 jquery + css를 사용하여 메뉴를 만드십시오. 아마도 "솔루션"은 많지만 간단한 문제에 더 많은 레이어를 추가하는 것일뿐입니다. – Julian

우리는 jQuery UI 버튼과 메뉴 위젯을 조립하여 드롭 다운 메뉴를 제공합니다. 데모와 전체 코드는 this fiddle을 참조하십시오. 이 같은 버튼과 중첩 된 목록을 필요로하는 HTML에 대한

<button>Please choose...</button> 

<ul class="accounts"> 
    <li> <a href="#">Bank</a> 

     <ul> 
      <li><a href="#">Lloyds</a> 
      </li> 
      <li><a href="#">Barclays</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Cash</a> 
    </li> 
</ul>

커피 스크립트 메뉴 전환 할 수있는 메뉴 (처음에 숨겨져)와 버튼을 설정합니다 :

select_account_button = $('button') 
accounts_menu = $('.accounts') 

# turn the button into a dropdown that shows/hides the menu 
select_account_button.button 
    icons: 
    secondary: "ui-icon-triangle-1-s" 
.click -> 
    accounts_menu.show().position(
    my: "left top" 
    at: "left bottom" 
    of: this 
) 
    $(document).one "click", -> 
    accounts_menu.hide() 
    false 

# set up the menu (hidden initially) 
accounts_menu.hide() 
.menu 
    select: (event, ui) -> 
    console.log "selected"

출처

2013-08-05 20:19:35 Philipp

jQuery 메뉴 위젯을 팝업 메뉴로 사용

답변

관련 문제