• AngularJs的UI组件ui-Bootstrap分享(七)——Buttons和Dropdown


    原文地址:http://www.cnblogs.com/pilixiami/p/5636218.html

    在ui-Bootstrap中,Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像,但实际上这两个控件有新的含义。

    先说Buttons,它是一组按钮,用来实现form表单中的单选框和复选框的功能,样式上可以自定义,功能也可以扩展,可以替代单选框和复选框。

    <!DOCTYPE html>
    <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="/Content/bootstrap.css" rel="stylesheet" />
        <title></title>
    
        <script src="/Scripts/angular.js"></script>
        <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
        <script>
            angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ButtonsCtrl', function ($scope) {
                $scope.singleModel = 1;
    
                $scope.radioModel = 'Middle';
    
                $scope.checkModel = {
                    left: false,
                    middle: true,
                    right: false
                };
    
                $scope.checkResults = [];
    
                $scope.$watchCollection('checkModel', function () {
                    $scope.checkResults = [];
                    angular.forEach($scope.checkModel, function (value, key) {
                        if (value) {
                            $scope.checkResults.push(key);
                        }
                    });
                });
            });
        </script>
    
    </head>
    <body>
        <div ng-controller="ButtonsCtrl">
            <h4>复选框</h4>
            <pre>Results: {{checkResults}}</pre>
            <div class="btn-group">
                <label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
                <label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
                <label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
            </div>
            <h4>单选框</h4>
            <pre>{{radioModel || 'null'}}</pre>
            <div class="btn-group">
                <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
                <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
                <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
            </div>
        </div>
    </body>
    </html>

    buttons控件使用uib-btn-checkbox和uib-btn-radio指令,这两个指令可以加在<input >上,也可以加在<button>上,甚至可以加在<lable>上。

    对于复选框,可以设置btn-checkbox-false和btn-checkbox-true表示复选框未选中和选中时的值(默认是false和true)。

    对于单选框,一组单选框需要绑定同一个ng-model,并且使用uib-btn-radio指定单选框选中时的值。

    单选框还有两个可选的属性:

    属性名

    默认值

    备注

    uncheckable

     

    增加这个属性表示单选框选中状态下再次点击时,单选框变为未选中(单选框变成复选框了)

    uib-uncheckable

    null

    为true时效果等于增加uncheckable属性

    再说Dropdown,从外观上看似乎是表单控件<select>

    但是实际上这个控件的主要功能是做导航菜单,因此在模板中使用button和ul元素的组合来表现菜单项。

    <!DOCTYPE html>
    <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="/Content/bootstrap.css" rel="stylesheet" />
        <title></title>
    
        <script src="/Scripts/angular.js"></script>
        <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
        <script>
            angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DropdownCtrl', function ($scope) {
    
            });
        </script>
    
    </head>
    <body>
        <div ng-controller="DropdownCtrl">
            <div class="btn-group" uib-dropdown ng-init="dropdownItems=['第一项','第二项','第三项']">
                <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle >
                    请选择 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu  >
                    <li ng-repeat="item in dropdownItems">
                        <a href="#">{{item}}</a>
                    </li>
                    <li class="divider"></li>
                    <li ><a href="#">其他</a></li>
                </ul>
            </div>
        </div>
    </body>
    </html>

    具体来说,dropdown包括三部分:

    1. uib-dropdown 表示当前元素是一个菜单

    2. uib-dropdown-toggle 一个展开/收起菜单的按钮。这是可选的部分。

    3. uib-dropdown-menu 表示具体的菜单项

    uib-dropdown的属性有:

     

    属性名

    默认值

    备注

    auto-close

    always

    可设置的值有三个:

    1 always,点击菜单后自动关闭

    2 disabled,不自动关闭,使用is-open手动控制。

    3 outsideClick,点击Dropdown外部的元素时关闭。

    dropdown-append-to

    null

    将菜单项(ul部分)放在其他DOM元素中,而不是包含在uib-dropdown所在的元素中

    dropdown-append-to-body

    false

    将菜单项(ul部分)放在body末尾,而不是包含在uib-dropdown所在的元素中

    is-open

    false

    菜单是否展开。uib-dropdown-toggle所在的元素点击时会更改这个值。

    keyboard-nav

    false

    是否允许方向键选择菜单

    on-toggle

     

    菜单展开或收起时触发的方法

    uib-dropdown-menu可以使用template-url来自定义菜单项,比如这样:

    <!DOCTYPE html>
    <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="/Content/bootstrap.css" rel="stylesheet" />
        <title></title>
    
        <script src="/Scripts/angular.js"></script>
        <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
        <script>
            angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DropdownCtrl', function ($scope) {
    
            });
        </script>
    
    </head>
    <body>
        <div ng-controller="DropdownCtrl">
            <div class="btn-group" uib-dropdown ng-init="dropdownItems=['第一项','第二项','第三项']" >
                <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
                    请选择 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu template-url="dropdown.html">
                </ul>
            </div>
            <script type="text/ng-template" id="dropdown.html">
                <ul class="dropdown-menu" uib-dropdown-menu>
                    <li ng-repeat="item in dropdownItems">
                        <a href="#">{{item}}</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">其他</a></li>
                </ul>
            </script>
        </div>
    </body>
    </html>

    其中这两个属性dropdown-append-to和dropdown- append-to-body可以将菜单项放在其他地方,这样设置其样式时会非常方便。这个用法和Datepicker Popup控件的datepicker-append-to-body属性是一样的。但是dropdown-append-to应该怎样设置才可以指定菜 单项迁移到的元素,还没有找到正确的方法,这里存疑。

    另外,Dropdown还可以更改全局配置uibDropdownConfig,uibDropdownConfig的属性有:

    属性名

    默认值

    备注

    appendToOpenClass

    uib-dropdown-open

    当菜单展开并且移至其他dom元素中时所添加的类名

    openClass

    open

    当菜单展开时添加的类名

    更改全局配置的代码:

    <script>
        angular.module('ui.bootstrap.demo', ['ui.bootstrap'])
            .config(['uibDropdownConfig', function (uibDropdownConfig) {
                uibDropdownConfig.appendToOpenClass = 'class1';
                uibDropdownConfig.openClass = 'class2';
            }])
            .controller('DropdownCtrl', function ($scope) {
    
        });
    </script>
  • 相关阅读:
    [bzoj1072][SCOI2007][排列perm] (状态压缩+数位dp+排列去重)
    [bzoj2461][BeiJing2011][符环] (括号配对+记忆化搜索+高维dp)
    [bzoj4027][HEOI2015][兔子与樱花] (树形dp思想+玄学贪心)
    [bzoj1925][Sdoi2010][地精部落] (序列动态规划)
    [bzoj1004][HNOI2008][Cards] (置换群+Burnside引理+动态规划)
    [bzoj1003][ZJOI2006][物流运输] (最短路+dp)
    [spoj104][Highways] (生成树计数+矩阵树定理+高斯消元)
    [bzoj1002][FJOI2007 轮状病毒] (生成树计数+递推+高精度)
    [bzoj 1001][Beijing2006]狼抓兔子 (最小割+对偶图+最短路)
    [模拟赛FJOI Easy Round #2][T3 skill] (最小割+最大权闭合子图(文理分科模型))
  • 原文地址:https://www.cnblogs.com/gongshunkai/p/6752568.html
Copyright © 2020-2023  润新知