东家蝴蝶西家飞,白骑少年今日归。 愿,所有迷茫的人,都不再迷茫的,愿,所有努力工作的人,都可以得到应有的回报,愿,所有的人,都可以找到回家的方向,愿,再无苦痛,再无离别。
上一章简单介绍了JS中的Map形式(十一),如果没有看过,请观看上一章
一. 描述等长文本的显示与隐藏
有的时候,从数据库中查询出来的某些字段,如描述,简介等,文本可能会比较长。如果全显示在table 页面上,可能会使宽度变宽,有滚动条,不美观,可以将其截断后隐藏,如只显示前10个字符,或者是前20个字符,后面跟三个…, 这样可以表示出省略的意思,当把鼠标放置在描述文本上时,会显示出全部。
利用的是Bootstrap 的插件tooltips 即工具提示。
二. tooltips 的使用
只需要在本该显示描述长文本的地方,进行处理,返回:
return "<span onmouseover='$(this).tooltip(\"show\");' data-html='true' data-toggle='tooltip' data-placement='left'
title='<p>"+value.replace(new RegExp("\n",'g'),'</br>')+"</p>'>"+ value.substr(0,10)+"...</span>";
即可。 其中,value 是描述的全部值。 onmouseover 表示鼠标移动到上面时进行触发。 data-toggle=‘tooltip’ 表示引用这个插件tooltips。 data-placement 来指定方向,有left,top,right,bottom ,auto 等值。 其中,有一个replace 方法,表示如果有换行的话,\n ,就进行换行的处理。
还有一种是退回原因的展示。 审核或者是审批的状态为退回,当悬浮退回状态时,显示退回的原因。
var title=row.return_reason; //其中title为退回原因。
var title=getReason(row.id,row.processnode_code);
s="<span class='label label-danger' onmouseover='$(this).tooltip(\"show\");' data-html='true' data-toggle='tooltip'
data-placement='top' title='<p>"+title.replace(new RegExp("\n",'g'),'</br>')+"</p>'>退回</span>";
三. tooltips 插件的主要可设置项
以下图片引用于官网:
https://v3.bootcss.com/javascript/#tooltips
四. tooltips 的方法
四.一 展示方法
$('#element').tooltip('show')
四.二 隐藏方法
$('#element').tooltip('hide')
四.三 反转方法
$('#element').tooltip('toggle')
四.四 销毁方法
$('#element').tooltip('destroy')
五.事件
show 为展示的时候,触发的事件。 shown 为展示完成后触发的事件. hide 为隐藏时触发的事件,hidden 为隐藏后触发的事件. inserted 为元素填充到dom后触发的事件。
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
})
谢谢!!!