现在的前端已经不是以前的前端了。
作为一个后端开发工程师，你再也不能小看前端，这是我写了一个月的前端的深刻体会。
像angularjs这样的前端框架，跟后台设计思想已经差别很小，mvc、双向绑定、依赖注入、指令等等特性，给创建超复杂的前端应用了一个可能。
富客户端已经是一个趋势，微信小程序也是这一浪潮的开端。
今天我做项目时需要实现一个悬浮窗的功能，以前都是用jQuary等单项绑定的js框架实现的。今天我换了个思路。利用angularjs的双休绑定功能，简单几行代码就实现了。
废话不多说，开始上代码：
实现后的功能大体是这样的,如下图样式稍丑，因为项目开发进行时，没有最后的调优。
总体就是一个div里边有个可以分页的table，鼠标点击哪里就在那里的下边紧挨着的地方显示这个悬浮窗。
后台接口如下：
接收一个json格式的对象，返回查询到的数据列表，这个是谷歌浏览器插件postman测试截图
如上图返回的数据列表。
前端html代码如下：
<!--审批记录悬浮窗-->
<div id="topDiv" ng-click="hiCtrl.hidewindow()">
<table class="table table-bordered" ng-table="hiCtrl.tableparamsReacord">
<tr ng-repeat="record in hiCtrl.hazardReacord">
<td title="'编号'" ng-bind="record.id">
</td>
<td title="'审核人'" ng-bind="record.createuser|username">
</td>
<td title="'审核部门'" ng-bind="record.createorgid|orgname">
</td>
<td title="'创建时间'" ng-bind="record.createtime|date:'yyyy-MM-dd'">
</td>
<td title="'结果'" ng-bind="record.result==1?'通过':'不通过'">
</td>
<td title="'意见'" ng-bind="record.note">
</td>
</tr>
</table>
</div>
悬浮窗的显示样式由css控制：
基本原理就是父div相当定位，子div绝对定位。然后就会出现悬浮的效果，这个没什么好讲的，css最基本的。css代码如下：
/*悬浮窗样式*/
#topDiv {
width: 60%;
padding: 4px;
background: #3387f9;
color: #fff;
position: absolute;
top: 240px;
left: 20%;
z-index: 9999;
display: none;/*默认不显示*/
}
js代码如下：
//显示悬浮窗
//默认悬浮窗宽60%，距屏幕最左边20%，我们这里只固定高度就行了
var y = mousePosition(e);//获得鼠标点击的坐标
$("#topDiv").css("display","block").css("position","absolute").css("top",y+ "px").css("left", "20%");//使悬浮窗始终在点击行的下边仅靠着
//隐藏悬浮窗
ctrl.hideWindow = function () {
$("#topDiv").css("display","none");
}
这里附带一个获得鼠标点击点的坐标的方法：
<script type="text/javascript">
//获取鼠标坐标
function mousePosition(ev){
ev = ev || window.event;
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script>
另外：引用网上博客整理很全的这个，复制在这，可以借鉴
相对于屏幕
如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距，不考虑iframe因素，不同浏览器下表现的还算一致。
function getMousePos(event) { var e = event || window.event; return {'x':e.screenX,'y':screenY}
}
相对浏览器窗口
简单代码即可实现，然而这是还不够，因为绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标，event的clientX，clientY属性分别表示鼠标点击位置相对于文档的左边距，上边距。于是类似的我们写出了这样的代码
function getMousePos(event) { var e = event || window.event; return {'x':e.clientX,'y':clientY}
}
相对文档
简单测试也没什么问题，但是clientX与clientY获取的是相对于当前屏幕的坐标，忽略页面滚动因素，这在很多条件下很有用，但当我们需要考虑页面滚动，也就是相对于文档（body元素）的坐标时怎么办呢？加上滚动的位移就可以了，下边我们试试怎么计算页面滚动的位移。
其实在Firefox下问题会简单很多，因为Firefox支持属性pageX,与pageY属性，这两个属性已经把页面滚动计算在内了。
在Chrome可以通过document.body.scrollLeft，document.body.scrollTop计算出页面滚动位移，而在IE下可以通过document.documentElement.scrollLeft ，
document.documentElement.scrollTopfunction getMousePos(event) { var e = event || window.event; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var x = e.pageX || e.clientX + scrollX; var y = e.pageY || e.clientY + scrollY; //alert('x: ' + x + 'ny: ' + y);
return { 'x': x, 'y': y };
}
最后附加我异步加载后台数据的代码：
function findCheckRecordsById(index) {
ctrl.tableParams = new NgTableParams({}, {
getData: function (params) {
// ajax request to api
var orderBy = params.orderBy();
var page = params.page();
var limit = params.count();
var param ={
"checkRecords":
{
"id": ctrl.pageData[index].id
},
"offset":(page-1) * limit,
"limit":limit,
"orderBy":orderBy
}
return checkRecordsService.getCheckRecords(param).then(function (data) {
......
getCheckRecords代码如下：
return $apis.getRecords.send(null, param);
getRecords的api如下：
getRecords: {url: 'api/tHazardCheckRecords/list', method: 'POST'},
就分享这么多了，最近加班很忙，文章我尽量快点更新。今天都周三了，周天还远吗。哈哈哈
结尾处附一个神一样的找合租广告，6到不行，我也要这样找个室友
还没有评论，来说两句吧...