• 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>

  • 相关阅读:
    Spring中使用Log4j记录日志
    Spring MVC异常处理实例
    Spring MVC静态资源实例
    Spring MVC页面重定向实例
    Spring MVC表单实例
    Eclipse4.6安装Tomcat插件时报错:Unable to read repository at http://tomcatplugin.sf.net/update/content.xml. Received fatal alert: handshake_failure
    Graphviz--图形绘制工具
    使用Maven+Nexus+Jenkins+Svn+Tomcat+Sonar搭建持续集成环境
    MySQL在并发场景下的问题及解决思路
    MIT KIT OpenID Connect Demo Client
  • 原文地址:https://www.cnblogs.com/hxb2015/p/4631287.html
Copyright © 2020-2023  润新知