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~

  • 相关阅读:
    Intent 传递Map数据
    android 读取.properties文件
    android 复制到剪切板
    SVN Update Error: Please execute the 'Cleanup' command
    Win8安装程序出现2502、2503错误解决方法
    启动系统自带的应用程序
    解决底部Button遮挡ListView最后一项内容的bug
    Intent传递list集合时异常解决
    Tomcate 启动异常,java.net.BindException: Address already in use: JVM_Bind:80的解决办法
    【Web】阿里icon图标gulp插件(gulp-qc-iconfont)
  • 原文地址:https://www.cnblogs.com/overload/p/2238311.html
Copyright © 2011-2022 走看看