ホームページ  >  記事  >  ウェブフロントエンド  >  JQERY limittext プラグイン バージョン 0.2 (長文制限表示)_jquery

JQERY limittext プラグイン バージョン 0.2 (長文制限表示)_jquery

WBOY
WBOYオリジナル
2016-05-16 18:20:401406ブラウズ

さらに表示する関数を追加してコードを添付します。 添付ファイルの例を使用します

コードをコピーします コードは次のとおりです。

/**
* デモ:
* 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": "more","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,//more を有効にするかどうか
* moretext: "(more)",//テキストの一部を非表示にしたときに表示されるテキスト
* lesstext: "(less)", //すべてのテキストが表示されるときに表示されるテキスト
* cssclass: "limittextclass", // A タグの CSS クラス名をさらに有効にします
*lessfn: function(){}, // 表示されるテキストが少ない場合のコールバック関数
* fullfn:function(){}//さらにテキストが表示されるときのコールバック関数
* }
* @author Lonely
* @link http://www.liushan.net
* @バージョン 0.2
*/
jQuery.fn.extend({
limittext:function(opt){
opt=$.extend({
"limit":30,
"fill":"..."
},opt);
opt.morefn=$.extend({
"ステータス": false,
"moretext": "( more)"、
"lesstext":"(less)"、
"cssclass": "limittextclass"、
"lessfn": function(){
}、
"fullfn" : function(){
}
},opt.morefn);
var othis=this;
var $this=$(othis); =$this.data( 'body');
if(body==null){
body=$this.html();
}
var getbuttom=function(showtext){
return ""
"< 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)
$("." opt.morefn.cssclass) ).live("クリック ",function(){
if($(this).html()==opt.morefn.moretext){
showbody=body
getbuttom(opt.morefn.lesstext );
$ this.html(showbody);
}else{
othis.limit(opt.limit); ();
}
});
これを返します;

パッケージのダウンロード アドレス
jb51.net/jiaoben/ 29345.html