jQueryUI 1.8 버튼 메뉴 만들기

jQueryUI 1.8이 출시되었으므로 업데이트를 탐색하면서 새로운 Button widget과 특히 SplitButton with a dropdown의 데모 중 하나를 발견했습니다. 이 데모는 버튼 위젯을 사용하여 여기에 드롭 다운 메뉴를 만드는 것이 좋습니다.jQueryUI 1.8 버튼 메뉴 만들기

이 새로운 Button 위젯을 사용하여 드롭 다운 메뉴를 만드는 방법에 대해 궁금합니다.

건배.

출처

2010-04-14 Brian M. Hunt

그것은있을 수 있습니다 :이 코드는 like this one.

<div class="demo"> 

    <div> 
     <button id="rerun">Run last action</button> 
     <button id="select">Select an action</button> 
    </div> 

</div> 

<script type="text/javascript"> 
$(function() { 
    $("#rerun").button().click(function() { 
     alert("Running the last action"); 
    }) 
    .next() 
    .button({ 
     text: false, 
     icons: { 
      primary: "ui-icon-triangle-1-s" 
     } 
    }) 
    .click(function() { 
     // Code to display menu goes here. <<<<<<<<<<<< 
    }) 
    .parent() 
    .buttonset(); 
});

출처

2012-07-13 18:29:48

나는이 포스트를 발견했다. 그리고이 링크를 게시 해 주셔서 감사합니다! 와우!!! 부트 스트랩 바위! – skel625

위의 링크는 이전 버전의 부트 스트랩을 보여줍니다. 업데이트 된 URL은 http://getbootstrap.com/입니다. – wolfstevent

자동 완성 : http://jqueryui.com/demos/autocomplete/에 제공된 데모와 비슷한 방식으로 버튼 아래에 목록을 드롭해야합니다.

기본적으로 button demo의 코드에서 "선택한 동작이있는 메뉴를 표시 할 수 있습니다"라는 경고를 표시하는 코드 만 바꾸면됩니다.

//... 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#yourButtonsID").click(function(){ 
     $("#yourDropDown").show();  
    }); 
}); 
</script> 
</head> 

<body> 
<button id="leftButtonSection">Do Something</button> 
<button id="yourButtonsID">Open Menu</button> 
<div id="yourDropDown"> 
    <ul> 
     <li>Option One</li> 
     <li>Option Two</li>  
    </ul> 
</div> 
</body>

출처

2010-04-14 21:09:20

당신은 또한 내장 된 버튼 이벤트를 사용하여 메뉴를 만들 그것을 말할 수있는, 거기에 많은 jQuery를 메뉴의 플러그인 중 하나를 해고 할 수 나는 Bootstrap button dropdowns을 사용하기로 마음 먹었다.

출처

2010-05-17 06:56:26 Trafalmadorian

jQueryUI 1.8 버튼 메뉴 만들기

답변

관련 문제