结构-行为-样式-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,一方面是自己对这个版本比较熟悉, ...
随机推荐
- OCP-1Z0-051-题目解析-第5题
5. Which SQL statements would display the value 1890.55 as $1,890.55? (Choose three .) A. SELECT TO_ ...
- 怎样在Upstart机制下的系统中加入upstart事件型的任务
/********************************************************************* * Author : Samson * Date ...
- VS2015集成新潮工具4
VS2015集成新潮工具(四) 本课程来源与微软connect视频教程,Modern Web Tooling in Visual Studio 2015 本课程主要讲下当下流行的前端工具 bowe ...
- 基于EF+WCF的通用三层架构及解析
分享基于EF+WCF的通用三层架构及解析 本项目结合EF 4.3及WCF实现了经典三层架构,各层面向接口,WCF实现SOA,Repository封装调用,在此基础上实现了WCFContext,动态服务 ...
- javascript立即调用的函数表达式N种写法(第二篇)
原文:javascript立即调用的函数表达式N种写法(第二篇) 上一篇博客我谈到将函数声明转换为函数表达式最常见的一种写法是:通过括号()将匿名函数声明转换为函数表达式即(function(){}) ...
- android 布局属性大全---初学者必备
Android功能强大,界面华丽,但是众多的布局属性就害苦了开发者,下面这篇文章结合了网上不少资料,花费本人一个下午搞出来的,希望对其他人有用. 第一类:属性值为true或false android: ...
- Oracle索引——位图索引
1.语法create bitmap index index_name on 表名(字段);2.举个例子你就能明白了:如有表 test(id,name,address)数据(1,张三,大连)(2,李四, ...
- MVC使用RDL报表
MVC使用RDL报表 这次我们来演示MVC3怎么显示RDL报表,坑爹的微软把MVC升级到5都木有良好的支持报表,让MVC在某些领域趋于短板 我们只能通过一些方式来使用rdl报表. Razor视图不支持 ...
- async/task/await
async/task/await三组合是.NET Framework 4.5带给.NET开发者的大礼,合理地使用它,可以提高应用程序的吞吐能力. 但是它的使用有点绕人,如果不正确使用,会带来意想不到的 ...
- LInux 2.6 编译内核出现Question
问:在make menuconfig配置完之后(选的默认配置),然后就make出现如下错误:root@org:/usr/src/linux-2.6.32.27# make CHK include/li ...