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

最新推荐文章于 2024-09-20 20:59:19 发布

原创最新推荐文章于 2024-09-20 20:59:19 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

转载请注明出处(两个蝴蝶飞)

文章标签：

#tooltips插件的使用 #描述等长文本的显示与隐藏

JS前端小方法专栏收录该内容

27 篇文章

订阅专栏

博客介绍了描述等长文本显示与隐藏的方法，利用Bootstrap的tooltips插件，可将长文本截断隐藏，鼠标悬停显示全部。还讲解了tooltips的使用、主要可设置项、方法（展示、隐藏、反转、销毁）以及相关事件（show、shown、hide、hidden、inserted）。

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

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

谢谢!!!