jQuery poshytip实现页面不可视区域内的字段信息通过提示框展示
来源:互联网 发布:使命召唤8mac版迅雷 编辑:程序博客网 时间:2024/05/20 06:38
效果如图所示
其中提示框里的内容是页面不可视区域的字段信息。
下面记录如何实现此功能。
1. 引入poshytip插件
在官网下载插件zip包,放到工程路径后引入
<!-- Tooltip classes 提示框主题文件--><link rel="stylesheet" href="${ctx}/js/tip/tip-skyblue/tip-skyblue.css" type="text/css" /><!-- jQuery and the Poshy Tip plugin files --><script type="text/javascript" src="${ctx}/js/tip/jquery.poshytip.js"></script><!--jQuery自定义的插件,用来判断td是否显示在浏览器窗口--><script type="text/javascript" src="${ctx}/js/jquery.visable.js"></script>
2. 自定义插件jQuery.visable.js
定义一个全局方法用来判断表格列是否隐藏在滚动条不可见区域
(function($){ $.extend({ //矩形的碰撞检测 /** * x1,y1 第一个矩形的左上角 * x2,y2 第一个矩形的右下角 * x3,y3 第二个矩形的左上角 * x4,y4 第二个矩形的右下角 * 其中第一个矩形是指表格行的某一列,第二个矩形指滚动条滚动的距离后界面可视部分形成的矩形 * 当滚动条在最左侧时,x3=0,x4=x3+界面能够看到的表格宽度。当滚动条滚动到最右边是。x3=滚动的距离,x4=x3+界面能够看到的表格宽度。 * return Boolean false=>碰撞,返回false,表示表格列在不可视区域,需要显示。 */ isCollsion: function(x1, y1, x2, y2, x3, y3, x4, y4){ if( (x1 > x3 && x1 > x4) || (x3 > x1 && x3 > x2) || (y1 > y3 && y1 > y4) || (y3 > y1 && y3 > y2) ){ return false; }else{ return true; } } }); /** * opt中包含了两个参数,元素实际位置的偏移 * * return Boolean 是否在可视范围之内 */ $.fn.isVisable = function(opt){ opt = $.extend({ offsetTop: 0, //网页中元素比实际位置在垂直方向的偏移 offsetLeft: 0, //网页中元素比实际位置在水平方向的偏移 addTop: 0, //元素左上角坐标y轴偏移 addRight: 0, //元素右下角坐标x轴偏移 addBottom: 0, //元素右下角坐标y轴偏移 addLeft: 0, //元素左上角坐标x轴偏移 }, opt);//定义一些参数 var me = $(this), srcInfo = { begin_left: (me.offset().left + opt.offsetLeft + opt.addLeft), begin_top: (me.offset().top + opt.offsetTop + opt.addTop) } srcInfo.end_left = (srcInfo.begin_left + me.width() + opt.addRight); srcInfo.end_top = (srcInfo.begin_top + me.height() + opt.addBottom); winInfo = { begin_left: $(window).scrollLeft() + 70, //获取滚动条的水平位置,滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时,位置是 0。这里用$(window)是以整个浏览器的最左边来计算滚动后不可视区域的字段。而我们实际希望是根据页面表格最左边来计算不可视区域的字段。误差就是通常页面左侧是一个菜单栏,这个差值大概是70,于是上面添加了偏移70。相应的end_left就要减去70。 begin_top: $(window).scrollTop()//获取垂直滚动条的距离 } winInfo.end_left = (winInfo.begin_left + $(window).width() - 70); winInfo.end_top = (winInfo.begin_top + $(window).height()); //检测是否”碰撞“” return $.isCollsion( srcInfo.begin_left, srcInfo.begin_top, srcInfo.end_left, srcInfo.end_top, winInfo.begin_left, winInfo.begin_top, winInfo.end_left, winInfo.end_top ); }})($);
3. 自定义easyui datagrid 属性和方法。
通过给datagrid添加属性来启动提示框。文件命名为easyui_extend.js
//封装grid基本参数$.extend($.fn.datagrid.defaults, { queryForm:null, fitColumns:true, border:false, nowrap:false, fit:true, showTips:false, //自动显示可视区域看不到列 tipsAll:false, //竖向显示表格所有的数据,不仅仅是不可视区域的字段。依赖showTips striped:true, loadMsg:'加载中...', pagination:true, rownumbers:true, pageNumber:1, pageSize:20, pageList:[10,20,30,40,50,100], singleSelect:false, ctrlSelect:true, queryParams:{}, sortName:null, sortOrder:'asc', multiSort:false, remoteSort:true, //省略一些方法定义。 onMouseHoverTip:function(target){ //表格自动提示 //获取datagrid的tipsAll属性,上面定义了,所以可以在datagrid里使用 var tipsAll = $(target).datagrid("options").tipsAll; //html是表格的行元素。 var html = $(target.parentElement).find(".datagrid-row") .each(function(){ this.tipsAll = tipsAll; $(this).poshytip({ className: 'tip-skyblue', followCursor: true, bgImageFrameSize: 9, offsetX: 0, slide: false, showTimeout: 3000, content:function() { //heads是表格的字段名称行元素,通过浏览器审查元素查看具体的html代码来查找写 var heads = $(this).parents('div.datagrid-body').prev().find('tr.datagrid-header-row td'); var tipsAll = this.tipsAll; var mutilTds = []; //$(this)指数据行元素,遍历每一个td字段元素 $(this).find('td').each(function(index){ //$(this)指数据行里的数据列元素 var isVisable = $(this).isVisable();//数据列是否在不可视区域。 if(tipsAll||!isVisable){ mutilTds.push( //把字段名和值拼接html字符串 '<td align="right" style="width:100px;">'+heads.eq($(this).index()).text()+':</td>' +'<td style="word-wrap:break-word;word-break:break-all;">'+$(this).find('div').html()+'</td>' ); } }); if(mutilTds.length>0){ //组装提示框里需要展示的html字符串。 var cols = parseInt(mutilTds.length/10); if(mutilTds.length%10>0) cols = cols+1; if(cols==0) cols = 1; var html = '<table style="width:'+cols*200+'px;">'; html +="<tr>"; for(var i=0;i<mutilTds.length;i++){ html += mutilTds[i]; if((i+1)%cols == 0){ html += "</tr><tr>"; } } if(html.endWith('</tr><tr>')) html = html.substring(0,html.length-5); else { html +='</tr>'; } html+='</table>'; } return html; } }); }) html.mouseover(function(value){ $(this).poshytip('show'); }).mouseout(function(value){ // $(this).poshytip('hide'); }); }, //onLoadSuccess方法启动提示框的入口。 onLoadSuccess : function(value){ var opts = $(this).datagrid("options"); if(opts.showTips){ opts.onMouseHoverTip(this); } }});
4. 页面使用提示框。
当页面请求完成数据的加载后,onLoadSuccess触发,启动提示框(类似监听)。此时鼠标进入表格数据就会有把未在可视区域的字段通过提示框显示出来。
<div data-options="region:'center'"> <table class="appGrid"></table></div>$("table.appGrid").eq(0).datagrid({ url:_ctx+'/test/list', rownumbers:true, multiSort:false, queryForm:$("form.appForm").eq(0).get(0), fitColumns:false, showTips:true, //行内容转竖排提示 tipsAll:false, //只显示不可视区域内容
阅读全文
0 0
- jQuery poshytip实现页面不可视区域内的字段信息通过提示框展示
- poshytip实现页面记录未展示的部分通过提示框展示
- 通过Jquery判断页面元素是否在浏览器的可视区域内
- 通过Jquery判断页面元素是否在浏览器的可视区域内
- 通过Jquery判断页面元素是否在浏览器的可视区域内
- 通过Jquery判断页面元素是否在浏览器的可视区域内
- Jquery判断页面元素是否在浏览器的可视区域内
- jQuery信息提示工具----poshytip.js
- Jquery的提示插件 jquery.poshytip.js
- poshytip.min.js提示信息的框架
- 基于Jquery的文本提示控件 poshytip
- jquery 提示插件poshytip
- jQuery 工具提示插件 PoshyTip
- jquery信息提示插件poshytip 和弹出框插件 jbox,树状图插件ztree,图表插件echarts
- jquery提示插件 jquery.poshytip.js
- jquery poshytip消息提示插件使用
- 如何判断一个div是否在页面可视区域内
- jQuery poshytip 插件的简单实用方法
- Reserved-3
- JavaScript设计模式--桥梁模式--XHR连接队列
- n皇后问题(带界面)
- 解析 html 字符串
- chm打不开
- jQuery poshytip实现页面不可视区域内的字段信息通过提示框展示
- PHP基础2数据类型新get知识点
- 数据结构实验之栈与队列二:一般算术表达式转换成后缀式
- TCP 协议理解
- oracle 添加删除 某个字段,并添加注释
- ubuntu+github+hexo+aliyun搭建个人博客
- Reserved-4
- 自定义标签中 如何使用 Spring 的 ioc
- wireshake 总结