zoukankan      html  css  js  c++  java
  • 利用jquery实现链接文字截断显示,超级方便

            前台开发中为了配合页面布局,经常需要将过长的链接文字截断,如“利用jquery实现链接文字截断显示”可能要被截断成“利用jquery实现链接...”,然后鼠标停留在链接上再显示其全部内容。此功能可在服务器端处理,但如果页面布局经常变动,则需要修改服务器代码配合,无法做到较好的页面和后台服务的分离。于是利用JQuery我找到了一个方便的办法。

            实现效果如下,如果你想截断一个链接(或者别的东西也可以),请在文字的外围标签上加一个class,为"TextCutXX",比如刚才的链接:

    <a href=’#’>
    利用jquery实现链接文字截断显示
    </a>

           可以写成:

    <a href=’#’class='TextCut12'>
    利用jquery实现链接文字截断显示
    </a>

    即可将该链接截断为前12个字符:“利用jquery实现链接...”。

    下面废话少说,说下方法,在你的页面中加入如下js代码:

    $(function() {
        $("[class^='TEXTCUT']").each(function() {
            var cutlength = parseInt($(this).attr('class').replace("TEXTCUT", ""));
            var text = $(this).html().trim();
            $(this).attr("title", text);
            text = (text.length > cutlength + 2) ? (text.substring(0, cutlength) + "...") : text;
            $(this).html(text);
        });

    });

    OK了,以后想修改链接的截断长度直接修改css类名就行了,是不是很方便,美工不用修改任何服务器代码哦!

    实现原理很简单,利用JQuey的选择器, $("[class^='TEXTCUT']")是选择了所有class以"TextCut"开头元素,然后下面的代码不用解释了吧,取得要截断的长度,把链接文字取出,然后设置到title属性上,然后截断,OK~

  • 相关阅读:
    祖传屎山代码
    WebService原理及重要术语
    ML-For-Beginners
    Row Level Security行级数据安全,简称RLS。
    浅析 Dapr 里的云计算设计模式
    讲师征集| .NET Conf China 2021正式启动
    为什么 Dapr 如此令人兴奋
    Open Application Model(OAM)的 Kubernetes 标准实现 Crossplane 项目 成为 CNCF 孵化项目
    kubectl 的插件管理工具krew
    PrimeBlazor 组件以MIT 协议开源
  • 原文地址:https://www.cnblogs.com/overload/p/2238311.html
Copyright © 2011-2022 走看看