0
点赞
收藏
分享

微信扫一扫

JS中描述等长文本的显示或隐藏(十二)


东家蝴蝶西家飞,白骑少年今日归。 愿,所有迷茫的人,都不再迷茫的,愿,所有努力工作的人,都可以得到应有的回报,愿,所有的人,都可以找到回家的方向,愿,再无苦痛,再无离别。

上一章简单介绍了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​​

JS中描述等长文本的显示或隐藏(十二)_ide


JS中描述等长文本的显示或隐藏(十二)_tooltips插件的使用_02

四. tooltips 的方法

四.一 展示方法

$('#element').tooltip('show')

四.二 隐藏方法

$('#element').tooltip('hide')

四.三 反转方法

$('#element').tooltip('toggle')

四.四 销毁方法

$('#element').tooltip('destroy')

五.事件

JS中描述等长文本的显示或隐藏(十二)_html_03


show 为展示的时候,触发的事件。 shown 为展示完成后触发的事件. hide 为隐藏时触发的事件,hidden 为隐藏后触发的事件. inserted 为元素填充到dom后触发的事件。

$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
})

谢谢!!!


举报

相关推荐

0 条评论