欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery插件制作 自增長(zhǎng)輸入框?qū)崿F(xiàn)代碼

 更新時(shí)間:2012年08月17日 15:35:49   作者:  
本章我們將創(chuàng)建一個(gè)自增長(zhǎng)的輸入框插件,jquery.aotogrow.js
首先還是看html代碼:
復(fù)制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.autogrow.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#autogrow').autogrow();
});
</script>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>auto growing textarea</legend>
<textarea id="autogrow" cols="20" rows="4">this textarea will grow indefinitely.</textarea>
</fieldset>
</form>
</body>
</html>

接下來(lái)是js插件代碼:
復(fù)制代碼 代碼如下:

(function ($) {
$.fn.autogrow = function (options) {
var defaults = {
minHeight: 0,
maxHeight: 9999
};
var options = $.extend(defaults, options);
return this.each(function () {
var element = $(this);
//上一次文本框內(nèi)容長(zhǎng)度和寬度
var lastValLength, lastWidth;
//文本框內(nèi)容長(zhǎng)度、寬度和高度
var valLength, width, height;
//驗(yàn)證頁(yè)面元素是textarea
if (!element.is('textarea')) {
return;
}
element.css('overflow', 'hidden')//設(shè)置超出范圍的文字隱藏
.keyup(function () {//設(shè)置鍵盤彈起事件
//獲取文本框內(nèi)容長(zhǎng)度
valLength = $(this).val().length;
//獲取輸入框的寬度
//我這里使用的jquery版本是1.8,獲取css屬性的方法已經(jīng)變成了prop
//如果使用1.6以下版本的jquery,以下代碼要變?yōu)?width = $(this).attr('offsetWidth');
//$(this).prop('scrollHeight')也要變?yōu)椋?(this).attr('scrollHeight')
width = $(this).prop('offsetWidth');
//有文字刪除操作,或者文本框?qū)挾茸兓臅r(shí)候,先將文本框高度設(shè)置為0
if (valLength < lastValLength || width != lastWidth) {
$(this).height(0);
}
//計(jì)算適合的文本框高度
height = Math.max(options.minHeight, Math.min($(this).prop('scrollHeight'), options.maxHeight));
//如果當(dāng)前文本框的高度超過(guò)我們?cè)试S的最大高度的時(shí)候,隱藏多余文字;否則設(shè)置為auto
//$(this).prop('scrollHeight') > height 只有在height取得的值是options.maxHeight才有意義
$(this).css('overflow', ($(this).prop('scrollHeight') > height ? 'auto' : 'hidden'))
.height(height); //設(shè)置文本框高度
lastValLength = valLength;
lastWidth = width;
});
});
}
})(jQuery);

例子比較簡(jiǎn)單,就是當(dāng)你往文本框里輸入信息的時(shí)候,文本框的高度會(huì)根據(jù)情況自動(dòng)增長(zhǎng)。
  建議大家在看懂代碼的基礎(chǔ)上,還是自己動(dòng)手寫一遍代碼,一來(lái)可以加深記憶,二來(lái)或許會(huì)遇到一些特殊情況,或許自己的demo運(yùn)行不成功。通過(guò)努力,讓自己的demo運(yùn)行成功,你的js能力也就提升了。
demo下載地址:jQuery.plugin.autogrow

相關(guān)文章

  • jQuery插件passwordStrength密碼強(qiáng)度指標(biāo)詳解

    jQuery插件passwordStrength密碼強(qiáng)度指標(biāo)詳解

    這篇文章主要為大家詳細(xì)介紹了jQuery插件passwordStrength密碼強(qiáng)度指標(biāo)實(shí)現(xiàn)代碼,感興趣的小伙伴們可以參考一下
    2016-06-06
  • jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法示例

    jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法示例

    這篇文章主要介紹了jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery遮罩層相關(guān)屬性樣式動(dòng)態(tài)控制操作技巧,需要的朋友可以參考下
    2018-09-09
  • jQuery實(shí)現(xiàn)的自定義輪播圖功能詳解

    jQuery實(shí)現(xiàn)的自定義輪播圖功能詳解

    這篇文章主要介紹了jQuery實(shí)現(xiàn)的自定義輪播圖功能,結(jié)合實(shí)例形式詳細(xì)分析了輪播圖的原理、實(shí)現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下
    2018-12-12
  • 全面解析jQuery $(document).ready()和JavaScript onload事件

    全面解析jQuery $(document).ready()和JavaScript onload事件

    這篇文章主要介紹了全面解析jQuery $(document).ready()和JavaScript onload事件的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-06-06
  • jQuery漸變發(fā)光導(dǎo)航菜單的實(shí)例代碼

    jQuery漸變發(fā)光導(dǎo)航菜單的實(shí)例代碼

    今天介紹一個(gè)jQuery漸變發(fā)光效果的導(dǎo)航菜單,這是一個(gè)簡(jiǎn)單的通過(guò)jQuery控制opacity實(shí)現(xiàn)的導(dǎo)航菜單。
    2013-03-03
  • jQuery+Cookie實(shí)現(xiàn)切換皮膚功能【附源碼下載】

    jQuery+Cookie實(shí)現(xiàn)切換皮膚功能【附源碼下載】

    這篇文章主要介紹了jQuery+Cookie實(shí)現(xiàn)切換皮膚功能,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合cookie動(dòng)態(tài)變換頁(yè)面元素樣式的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
    2018-03-03
  • Jquery命名沖突解決的五種方案分享

    Jquery命名沖突解決的五種方案分享

    最近遇到個(gè)問(wèn)題,同時(shí)引用了jquery庫(kù)和另外一個(gè)js庫(kù)。當(dāng)用$XX去調(diào)用js庫(kù)函數(shù)時(shí),發(fā)現(xiàn)失效了!于是找資料,原來(lái)是jquery命名沖突了
    2012-03-03
  • jQuery設(shè)置div一直在頁(yè)面頂部顯示的方法

    jQuery設(shè)置div一直在頁(yè)面頂部顯示的方法

    如何讓div一直在頁(yè)面頂部,這種類似的效果大家都有見(jiàn)過(guò)的,實(shí)現(xiàn)的方法也有很多,在本文為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)
    2013-10-10
  • JQuery中的$.getJSON 使用說(shuō)明

    JQuery中的$.getJSON 使用說(shuō)明

    jQuery中常用getJSON來(lái)調(diào)用并獲取遠(yuǎn)程的JSON字符串,將其轉(zhuǎn)換為JSON對(duì)象,如果成功,則執(zhí)行回調(diào)函數(shù)。
    2011-03-03
  • jQuery實(shí)現(xiàn)容器間的元素拖拽功能

    jQuery實(shí)現(xiàn)容器間的元素拖拽功能

    這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)容器間的元素拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-12-12

最新評(píng)論