• angular 实现modal windows效果(即模态窗口,半透明的遮罩层),以及bootstrap(css,components,js)的初步学习


    废话不说,直接上代码。可直接看效果,对着分析。。今天算是bootstrap 入门了,开心。。

    突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了。

    <html ng-app="app">
    <head>
    
        <script src="../lib/js/angular.js"></script>
        <script src="../lib/js/ui-bootstrap-tpls-0.13.0 (1).js"></script>
        <link href="../lib/bootstrap-3.3.4/css/bootstrap.css"  rel="stylesheet">
    </head>
    <body>
    <div ng-controller="appController">
        <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header">
                <h3>I'm a modal!</h3>
            </div>
            <div class="modal-body">
                <span>Message:{{message}}</span>
                <ul>
                    <li ng-repeat="item in items">
                        <a ng-click="selected.item=item">{{ item }}</a>
                        <!--<a ng-click="test(item);">{{ item }}</a>-->
                    </li>
                </ul>
                Selected: <b>{{ selected.item }}</b>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </script>
    
        <button class="btn btn-default" ng-click="showModal()">Open me!</button>
        <div ng-show="selected">Selection from a modal: {{ selected }}</div>
        <div class="col-xs-6">
            <div class="well well-sm">I start to learn bootstrap css frow now on!!</div>
            <div class="well well-lg">I start to learn bootstrap css frow now on!!</div>
            <div class="well ">I start to learn bootstrap css frow now on!!</div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default panel-primary" >
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default panel-success">
                <div class="panel-heading">
                    <h1 class="panel-title">Panel title</h1>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title">Panel title</h1>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
                <div class="panel-footer">Panel footer</div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">Panel heading</div>
    
                <!-- Table -->
                <ul class="list-group">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">Panel heading</div>
    
                <!-- Table -->
                <ul class="list-group">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">Panel heading</div>
    
                <!-- Table -->
                <ul class="list-group">
                    <li class="list-group-item">
                        <span class="badge">14</span>
                        Cras justo odio
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-xs-6">
                <div class="list-group">
                    <a href="#" class="list-group-item active">
                        Cras justo odio
                    </a>
                    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
                    <a href="#" class="list-group-item">Morbi leo risus</a>
                    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
                    <a href="#" class="list-group-item">Vestibulum at eros</a>
                </div>
        </div>
        <div class="col-xs-6">
            <button type="button" class="btn btn-default" aria-label="Left Align">
                <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
            </button>
    
            <button type="button" class="btn btn-default btn-lg">
                <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> Star
            </button>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">Panel heading</div>
    
                <!-- Table -->
                <table class="table">
                    <tr>
                        <th>#</th>
                        <th>Month</th>
                        <th>Savings</th>
                        <th>Savings</th>
                    </tr>
                    <tr>
                        <th>1</th>
                        <td>January</td>
                        <td>$100</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <th>2</th>
                        <td>January</td>
                        <td>$100</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <th>3</th>
                        <td>January</td>
                        <td>$100</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <th>4</th>
                        <td>January</td>
                        <td>$100</td>
                        <td>$100</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    </body>
    <script>
        angular.module('app', ['ui.bootstrap']).
                service('DataService', ['$rootScope',
                    function($rootScope) {
                        this.data = {};
                        this.data.message = 'This is a message from a service';
                        this.data.items = ['item1', 'item2', 'item3'];
                    }
                ]).
                controller('myModal', ['$scope', '$modalInstance', 'DataService',
                    function($scope, $modalInstance, dataService) {
                        $scope.data = dataService.data;
                        $scope.message = dataService.data.message;
                        $scope.items = dataService.data.items;
    
                        $scope.selected = {
                            item: $scope.items[0]
                        };
                        $scope.test = function(item){
                            $scope.selected.item = item;
                        }
    
                        $scope.ok = function() {
                            $modalInstance.close($scope.selected.item);
                        };
    
                        $scope.cancel = function() {
                            $modalInstance.dismiss('cancel');
                        };
    
                    }
                ]).
                controller('appController', ['$scope', '$modal', '$log',
                    function($scope, $modal, $log) {
    
    //                    $scope.data = dataService.data;
    
                        $scope.showModal = function() {
                            var modalInstances = $modal.open({
                                templateUrl: 'myModalContent.html',
                                controller: 'myModal'
                            });
    
                            modalInstances.result.then(function(selectedItem) {
                                $scope.selected = selectedItem;
                            },function(){
                                $log.info('Modal dismissed at :'+new Date())
                            })
    
                        };
    
                    }
                ]);
    
    </script>
    </html>
    

      

  • 相关阅读:
    Python性能提升小技巧
    算法-第四版-练习1.3.32解答
    算法-第四版-练习1.3.30解答
    算法-第四版-练习1.3.31解答
    算法-第四版-练习1.3.29解答
    PAT (Basic Level) Practise:1030. 完美数列
    PAT (Basic Level) Practise:1010. 一元多项式求导
    PAT (Basic Level) Practise:1012. 数字分类
    PAT (Basic Level) Practise:1038. 统计同成绩学生
    PAT (Basic Level) Practise:1018. 锤子剪刀布
  • 原文地址:https://www.cnblogs.com/oxspirt/p/4536866.html
Copyright © 2020-2023  润新知