zoukankan      html  css  js  c++  java
  • AngularJS时间轴指令

    是基于ion.rangeSlider.js,主要代码如下:

    <link rel="stylesheet" type="text/css" href="/css/slider/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="/css/slider/ion.rangeSlider.css"/>
    <link rel="stylesheet" type="text/css" href="/css/slider/ion.rangeSlider.skinModern.css"/>

    <script type="text/javascript" src="/lib/angular.js"></script>
    <script type="text/javascript" src="/lib/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="/lib/ion.rangeSlider.js"></script>
    <script type="text/javascript" src="/lib/ng-underscore.js"></script>

    <script>
        var rangeSliderApp = angular.module('rangeSliderApp',["ngUnderscore"]);

        rangeSliderApp.directive('yearShaft', ["underscore",function(underscore){
            return{
                restrict: "A",
                scope: {
                    years: "=",
                    selectedyear:"="
                },
                link: function (scope,element) {

                    var years = underscore.sortBy(scope.years);
                    var length = years.length;
                    var max = years[length-1];
                    var min = years[0];
                    var initYears = function (years) {
                        if(years.length==1){
                            var year = new Date().getFullYear();
                            if(years[0] == year){
                                max = years[0];
                                min = years[0] - 1;
                                length = 2;
                            }else if(years[0] < year){
                                max = year;
                                min = years[0];
                                length = max - min +1;
                            }
                        }
                        return years;
                    };
                    initYears(scope.years);

                    $(element).ionRangeSlider({
                        hide_min_max: true,
                        prettify_enabled:false,
                        keyboard: true,
                        type:"single",
                        grid:true,
                        step:1,
                        grid_num:length - 1,
                        max:max,
                        min:min,
                        from_fixed:true,
                        from:scope.selectedyear
                   });
               }
          }
    }]);
    </script>

  • 相关阅读:
    117. 填充每个节点的下一个右侧节点指针 II
    116. 填充每个节点的下一个右侧节点指针
    114. 二叉树展开为链表
    9.5 NLP slide: 第二课 语言模型
    165. 比较版本号
    143. 重排链表
    147. 对链表进行插入
    127. 单词接龙
    129. 求根到叶子节点数字之和
    95. 不同的二叉搜索树 II 递归
  • 原文地址:https://www.cnblogs.com/hxb2015/p/4631287.html
Copyright © 2011-2022 走看看