结构-行为-样式-AngularJs--指令实现 手动触发响应到页面指定位置
最近工作需要增强用户体验,项目经理说下拉框架用户体验太差,于是乎我开始想了如下指令。这个指令可以让用户点击的时候把下拉或者其他的响应显示的东西不会因为屏幕的滚动而看不见,也就是让用户看见他想看见的。
define(['angular'], function(){
var commonDirectives = angular.module("commonDirectives", []);
commonDirectives.directive("toLocate", function () {
return {
restrict: "AE",
scope:{
tid:"@",
pscope:"@"
},
link: function (scope, element, attrs) {
element.bind("click", function (event) {
event.stopPropagation();
var scroll_offset = $("#"+scope.tid).offset();
if(scope.pscope == undefined){
$("body,html").animate({
scrollTop: scroll_offset.top
}, 1000);
}else{
$("."+scope.pscope).animate({
scrollTop: scroll_offset.top
}, 1000);
}
})
}
}
})
})
结构-行为-样式-AngularJs--指令实现 手动触发响应到页面指定位置的更多相关文章
- 结构-行为-样式-angularJs 指令实现滚动文字
最近在做XX项目的大屏展示页面,有一个表格需要用到这个滚动效果,于是就写了个指令,记录下,共同学习. Html代码: <td word-roll tword="item"&g ...
- 结构-行为-样式-angularJs 指令解决IE下无PlaceHolder的问题
最近项目开发的时候遇到一个头疼的问题,在测试IE兼容性的时候,发现placeholder在IE下无效.查网上说也是有各种解决方案,但是都不是我想要的,于是决定自己写一个.思路:placeHolder是 ...
- 结构-行为-样式-angularJs笔记
0.关于Ng-app 通过ngApp指令来引导Angularjs应用是一种简洁的方式 ,适合大多数情况.在高级开发中,例如使用脚本装载应用,您也可以使用Bootstrap手动引导AngularJs ...
- 结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽
新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功 ...
- 结构-行为-样式-angularJs ngAnimate(Js实现)
声明 页面 Js 注意事项 官方链接 一.声明 注意animate的版本要与Angular的一致. <script src="jquery.1.9.1.min.js"> ...
- AngularJs指令(一)
AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...
- AngularJS 指令生命周期 complie link
AnguarJS指令从解析到生效一共会经历Inject.Compile.Controller加载.Pre-link.Post-link这几个主要阶段. 一.AngularJS指令执行过程 1.加载An ...
- AngularJS 指令解析(二)
AngularJS 指令解析(二) 第一篇我们讲过了作用域(scope)这块内容,现在我们进入正题,讲AngularJS的指令. 什么是指令? 这里我们引用官方的一句话: Custom directi ...
- AngularJS 指令解析(一)
AngularJS 指令解析(一) 前言 笔者AngularJS接触时间差不多是两年多,虽然这两年多AngularJS版本日新月异,但是笔者的版本是比较老的1.4.3,一方面是自己对这个版本比较熟悉, ...
随机推荐
- CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
- MySQL之 ALTER vs CHANGE vs MODIFY COLUMN
1.ALTER COLUMN 用于设置或者移除某一列的默认(缺省)值, 1.1用法 ALTER TABLE MyTable ALTER COLUMN foo SET DEFAULT 'bar'; AL ...
- C#:判断当前程序是否通过管理员运行
原文:C#:判断当前程序是否通过管理员运行 public bool IsAdministrator() { WindowsIdentity current = WindowsIdentity.GetC ...
- Knockout应用开发指南
Knockout应用开发指南 第一章:入门 2011-11-21 14:20 by 汤姆大叔, 20799 阅读, 17 评论, 收藏, 编辑 1 Knockout简介 (Introductio ...
- 【转】 Android用于提示等待的ProgressDialog
原文地址:http://blog.csdn.net/wleing/article/details/6086321 为了安抚用户等待的焦急心情,我们用ProgressDialog.它的用法书上有例子,就 ...
- 输出,变量的使用,子查询,逻辑语句,循环,case..when..then..end多分支语句,Exists(判断存在)
--------------输出----------------print 'hello world'--以文本形式输出select 'hello world'--以网格形式输出,也可以设置成以文本形 ...
- 简单的三层asp.net webForm使用Ninject实现Ioc
简单的三层asp.net webForm使用Ninject实现Ioc 在asp.net webform下使用Ninject的简单过程. 首先建立个项目,如下图,简单三层(PS:UI层要同时引用BLL. ...
- 排序算法学习,python实现
原创博文,转载请注明出处 利用周六周末的时间把几种基本的排序方法用python实现了一下,废话少说,直接上代码. 本文不注重基础知识的讲解,只做大致的描述,大家如果不清楚概念,自行查找资料. 直接插入 ...
- Day3:T1数论+高精 T2搜索
T1:数论+高精(水~) 根据题意可知,从除的数越大越好(在0~9中) 所以我们只要用到高精除然后再模拟一下就可以了 //MARK:但是要注意0-9这个特殊值需要特判,因为题目要求输出的数至少是两位数 ...
- 基于认证的代理平台搭建配置squid-20130730
基于认证的代理平台搭建配置squid-20130730 功能:通过squid代理实现 (1)基于用户名密码认证的出口ip路由选择 (2)基于client源ip的出口ip路由选择 (3)基于连接本机ip ...