自定义jquery插件

xiaojin21cen

浏览: 94003 次
性别:
来自: 北京

最近访客更多访客>>

liukp981

arthorwei

loadsave

heyongkui

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
  </head>
	<script language="javascript" src="script/jquery.js"></script>
	
<script type="text/javascript">

$(window).load(function(){
	//$(":button").each(function() {
	//	$(this).attr("disabled", true);
	//});
	//$(":text").each(function() {
	//	$(this).attr("readonly", true);
	//});
	//$(":textarea").each(function() {
	//	$(this).attr("readonly", true);
	//});
	
	//$("a").each(function() {
	//	$(this).replaceWith("<a style='cursor:hand'>"+$(this).html()+"</a>");
	//});	
})


;(function($, window) {

    $.fn.textlimit = function(options) {

		var defaults = {
			// 插件自定义选项的默认值
				stylecss:"",
				maxheigth:250,
				maxlength:50
		};

		// 以用户的自定义选项覆盖默认选项
		var options = $.extend(defaults, options);

        return this.each(function() { // 让插件支持链式操作
        	
			// 在这里编写插件功能代码
			var tip_id=this.id+"_tip";
        	var tip_obj=$("#"+tip_id);
        	//alert(tip_obj);
        	var tip;
			if(tip_obj.html()==null||tip_obj.html()==undefined){
				tip="<span>您还可以输入<span id='"+this.id+"_tip' style='color:red;font-weight: bolder;"+options.stylecss+"' >0</span>字</span>";
				$(this).after(tip);
			}
			//获取初始时的原始高度 
			var default_height=$(this).height();
			 
        	$(this).bind("propertychange click keyup keydown slideToggle",function(){
                var o = options;      
               
                //字符长度显示
                var length=$(this).text().length;
               // $("#"+tip_id)与tip_obj的区别
                $("#"+tip_id).text(o.maxlength-length);
               
               //字符截取
               if(length>o.maxlength){
            	   $(this).text($(this).text().substring(0, o.maxlength));
               }
                
                //设置高度
                var height=$(this).height();                
                var scroll=$(this)[0].scrollHeight;
                var aa=("scroll:"+scroll+"  height:"+height+"  maxheigth:"+o.maxheigth+" default_heigth:"+default_height);
               	 $("#div1").text(aa);
                if(scroll<height){
                	$("#textarea1").css({"overflow-y":""});
                	//$("#textarea1").height(default_heigth);
                	$("#textarea1").height(default_height);
                }else if(scroll>=height&&scroll<=o.maxheigth){
                	$("#textarea1").css({"overflow-y":"visible"});
                	$("#textarea1").height(scroll);
                }else if(scroll>o.maxheigth){
                	$("#textarea1").height(o.maxheigth);
                	$("#textarea1").css({"overflow-y":""});
                }
                
                //alert(length);
            
            });
		});

		// 在这里编写插件功能代码
	};
})(jQuery, window);


</script>
	<script type="text/javascript" >

$(function(){
	$("#textarea1").textlimit({stylecss:""});
	//alert("aa");
});

</script>  
  <body>
    <br>
<textarea id="textarea1" name="" rows="5" cols="100"    ></textarea><br/><br/><br/>

<input maxlength="" ><br/><br/>
<input type="button"  value="aaaaaaa"  style="font-weight: bolder;" ><br/><br/>
<input type="button" value="aaaaaaa"><br/><br/>
<input type="button" value="aaaaaaa" ><br/><br/>

<div id="div1" style="color:red;" >aaa</div>

    <br>
    
  </body>
</html>

分享到：