【问题标题】:Create a jQueryUI 1.8 Button menu创建一个 jQueryUI 1.8 按钮菜单
【发布时间】:2010-04-14 21:04:08
【问题描述】:

现在 jQueryUI 1.8 已经发布,我浏览更新时发现了新的Button widget,尤其是带有SplitButton with a dropdown 的演示之一。该演示似乎表明 Button 小部件可用于在此处创建下拉菜单。

作为讨论问题,我想知道有什么方法可以使用这个新的 Button 小部件创建下拉菜单。

干杯。

【问题讨论】:

    标签: jquery jquery-ui button drop-down-menu contextmenu


    【解决方案1】:

    您必须在按钮下方放置一个列表,其方式类似于此处为自动完成提供的演示:http://jqueryui.com/demos/autocomplete/

    基本上,您可以将button demo 中显示警报“可能显示带有选定操作的菜单”的代码替换为执行此操作的代码。这段代码可以触发许多 jQuery Menu 插件之一,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();
    });
    

    【讨论】:

      【解决方案2】:

      您也可以告诉它使用内置按钮事件创建菜单:

      //...
      <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>  
      

      【讨论】:

        【解决方案3】:

        值得注意的是,我决定使用Bootstrap button dropdowns

        【讨论】:

        • 我偶然发现了这篇文章。我感谢您发布此链接!哇!!!引导摇滚!
        • 上面的链接显示的是旧版本的 Bootstrap。更新后的网址是getbootstrap.com
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2019-09-22
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多