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>
AngularJS时间轴指令的更多相关文章
- angularjs时间轴
1.炫酷的图片是开端啊 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- AngularJS中的指令全面解析(转载)
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- 使用Angularjs的ng-cloak指令避免页面乱码
在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- angularJS之使用指令封装DOM操作
angularJS之使用指令封装DOM操作 创建指令 指令也是一种服务,只是这种服务的定义有几个特殊要求: 必须使用模块的directive()方法注册服务 必须以对象工厂/factory()方法定义 ...
- AngularJS创建新指令 - 基本功能
指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令. AngularJS原有的指令 ng-init ...
- iOS之TimeLine(时间轴)的实现
这是一个关于OC时间轴的简单实现,我认为重要的是思路. 感谢作者:Cyandev 的文章<iOS 实现时间线列表效果>给的思路.这里先附上Objective-C的代码实现,有时间再去试试S ...
- 08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...
- [原创]首次制作JQueryUI插件-Timeline时间轴
特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...
随机推荐
- Python_Day10_进程、线程、协程
本节内容 操作系统发展史介绍 进程.与线程区别 python GIL全局解释器锁 线程 语法 join 线程锁之Lock\Rlock\ ...
- java打印Jni层log
在eclipse上新建jni工程可以参考:http://www.cnblogs.com/ashitaka/p/5953708.html 要在java层打印c的log必须引入这个头文件的宏定义: #if ...
- 冰球项目日志3-yjw
小组讨论 今天大家讨论了之前各自想的方案的问题,基本确定了寻找击球点的方案,以及击球手运动轨迹规划的方案,这里我只是简单的说下我们的击球点的确定方案. 击球策略方案 方案分析 首先我们建立平面在直角坐 ...
- (Jquery)关于给动态加载的页面元素,绑定事件
如果使用Jquery给元素绑定事件,一般会用bind,或者类似click函数来直接绑定. 但是对于动态生成的元素,会发现常规绑定无法生效,比如: <div class'div'></ ...
- [转]CSS hack大全&详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
- SAP连接电脑串口读数(电子称,磅等数据读取)
这是几年前做的了,一直都不想分享出来,后来想想为了能够给大家点想法,献出来了... 这是一个电脑读称的方法,一般用COMM口连接的电子设备都可参考. 如果是对串口参数不确定的,可以网上找个串口测试工具 ...
- 查找增强出口和BADI程序
*&---------------------------------------------------------------------* *& Report Z_FIND_EX ...
- 编辑美化图片,保存至本地,Adobe出品(支持IOS,android,web调用)免费插件
本例以web调用做为例子,本插件支持主流浏览器,IE要9以上,移动设备,触屏设备也支持,能自适应屏幕大小. 使用效果: 工具还是很丰富的,编辑完成之后,可以保存图片至本地目录. 使用说明: 1,需要在 ...
- Sublime Text 3 使用问题答疑
命令面板/命令模式:ctrl+shift+pctrl+cctrl+v → ctrl+shift+v粘贴时会保持原格式(缩进)ctrl+sctrl+z撤销ctrl+y恢复撤销在当前行下面添加一行:ctr ...
- 转发 XHTML 和 DOCTYPE 切换(MSDN)
使用 Web 标准生成 ASP.NET 2.0 Web 站点 XHTML 和 DOCTYPE 切换 为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式.Internet Explorer.Mo ...