zoukankan      html  css  js  c++  java
  • JQERY limittext 插件0.2版

    增加一个显示更多的功能

    附上代码:使用实例在附件

    代码
    /**
     * demo: 
     * 1.$("#limittext").limittext(); 
     * 2.$("#limittext").limittext({"limit":1});
     * 3.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true}});
     * 4.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true,"moretext":"更多","lesstext":"隐藏部分","fullfn":function(){alert("more")},"lessfn":function(){alert("less")}}})
     * 5.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true}}).limit("all");
     * @param {Object} opt
     * {
     *        limit:30,//显示文字个数
     *        fill:'...'//隐藏时候填充的文字
     *        morefn:{
     *            status:false,//是否启用更多
     *         moretext: "(more)",//隐藏部分文字时候显示的文字
     *         lesstext:"(less)",//全部文字时候显示的文字
     *         cssclass:"limittextclass",//启用更多的A标签的CSS类名
     *         lessfn:function(){},//当文字为更少显示时候回调函数
     *         fullfn:function(){}//当文字为更多时候回调函数
     * }
     * @author Lonely
     * @link http://www.liushan.net
     * @version 0.2
     
    */
    jQuery.fn.extend({
      limittext:
    function(opt){
          opt
    =$.extend({
            
    "limit":30,
            
    "fill":"..."
        },opt);
        opt.morefn
    =$.extend({
                
    "status"false,
                
    "moretext""(more)",
                
    "lesstext":"(less)",
                
    "cssclass""limittextclass",
                
    "lessfn"function(){
                },
                
    "fullfn"function(){
                }
        },opt.morefn);
        
    var othis=this;
        
    var $this=$(othis);
        
    var body=$this.data('body');
        
    if(body==null){
            body
    =$this.html();
            $
    this.data('body',body);
        }
        
    var getbuttom=function(showtext){
            
    return "<a href='javascript:;' class='"
            
    +opt.morefn.cssclass+"'>"
            
    +showtext
            
    +"<a>";
        }
        
    this.limit=function(limit){
            
    if(body.length<=limit||limit=='all'){
                
    var showbody=body+(opt.morefn.status?getbuttom(opt.morefn.lesstext):"");
            }
    else{
                
    if(!opt.morefn.status){
                    
    var showbody=body.substring(0,limit)
                    
    +opt.fill;
                }
    else{
                    
    var showbody=body.substring(0,limit)
                    
    +opt.fill
                    
    +getbuttom(opt.morefn.moretext);
                }
            }
            $
    this.html(showbody);
        }
        
    this.limit(opt.limit);
        $(
    "."+opt.morefn.cssclass).live("click",function(){
            
    if($(this).html()==opt.morefn.moretext){
                showbody
    =body
                
    +getbuttom(opt.morefn.lesstext);
                $
    this.html(showbody);
                opt.morefn.fullfn();
            }
    else{
                othis.limit(opt.limit);
                opt.morefn.lessfn();
            }
        });
        
    return this;
      }
    });
    附件下载
  • 相关阅读:
    Ajax的工作原理
    ios 应用多语言自由切换实现
    开源码应用之Eclipse篇
    搜索引擎solr和elasticsearch
    字符串截取进阶
    nginx源代码分析--nginx模块解析
    C#网络编程系列文章(五)之Socket实现异步UDPserver
    mysql存储引擎的种类与差别(innodb与myisam)
    程序的记事本--log4net
    在海思hisiv100nptl平台上交叉编译并安装SRS
  • 原文地址:https://www.cnblogs.com/liushannet/p/1809301.html
Copyright © 2011-2022 走看看