jquery插件編寫：文本框?qū)崿F(xiàn)下拉框效果

發(fā)布時(shí)間：2020-06-22 20:37:47 來源：網(wǎng)絡(luò) 閱讀：1965 作者：cnn237111 欄目：web開發(fā)

版權(quán)聲明：本文由一只博客發(fā)表于?bloghome博客
文章鏈接：?https://www.bloghome.com.cn/user/cnn237111

先上代碼：

jQuery.beDropdownlist.js

(function?($)?{//jquery插件編寫中，不能假設(shè)$是有效的，因此，使用這種包裝函數(shù)，使得在下面的代碼中可以繼續(xù)寫$,對(duì)于這個(gè)函數(shù)的分析，可以具體看下面的分析。?????$.fn.beDropdownlist?=?function?(data,?fn)?{//?$.fn對(duì)象是$.prototype的別名，使用fn為了簡(jiǎn)潔。??????????//默認(rèn)值?????????var?defaults?=?{?????????????data:?['nothing']?????????}??????????var?options?=?{?data:?data?};?????????options?=?$.extend(defaults,?options);?//使得參數(shù)覆蓋??????????var?bindevent?=?function?(o)?{?????????????var?tmpid?=?"tmpselector_"?+?$(o).attr("id");?//生成臨時(shí)的id?????????????if?($("#"?+?tmpid).length?>?0)?????????????????return;?//退出，不在繼續(xù)下去??????????????var?data?=?options.data;?//數(shù)據(jù)源??????????????//此處style中設(shè)置為absolute?????????????var?html?=?"<div?id='"?+?tmpid?+?"'?style='border:?1px?solid?grey;max-height:?150px;position:absolute;?overflow:?auto;background:white;'><ul?class='ui-menu'>";?????????????//動(dòng)態(tài)生成一個(gè)div，內(nèi)含li元素?????????????for?(var?item?in?data)?{?????????????????html?+=?"<li>"?+?data[item]?+?"</li>";?????????????}?????????????html?+=?"</ul></div>";?????????????var?left?=?$(o).offset().left;?????????????var?top?=?$(o).offset().top?+?$(o).height()?+?4;??????????????var?finalize?=?function?()?{?????????????????$("#"?+?tmpid?+?"?li").die('click');?//取消事件綁定?????????????????$("#"?+?tmpid).remove();?????????????}?????????????$("body").append(html);?????????????//設(shè)置該div的寬度，位置等。?????????????$("#"?+?tmpid).width($(o).width()?+?5);?????????????$("#"?+?tmpid).offset({?top:?top,?left:?left?});?????????????$("#"?+?tmpid).live('mouseleave',?function?()?{?finalize();?});?????????????$("#"?+?tmpid?+?"?li").live('click',?function?()?{?????????????????$(o).val($(this).text());?????????????????finalize();?????????????????if?(fn?!=?undefined)?{?????????????????????fn();?//調(diào)用傳進(jìn)來的函數(shù)。?????????????????}?????????????});?????????}??????????this.each(function?()?{//由于jquery的選擇符可能匹配多個(gè)對(duì)象，所以需要用each，對(duì)每個(gè)匹配的元素做操作。?????????????if?($(this).is(":text")?==?true)?{?????????????????$(this).click(function?()?{?????????????????????bindevent($(this));?//設(shè)置要做的內(nèi)容?????????????????})?????????????}?????????});?????};?})(jQuery);

jQuery.beDropdownlist_demo.html

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?<html>?<head>?????<title></title>?????<script?src="http://code.jquery.com/jquery-1.7.2.min.js"?type="text/javascript"></script>?????<script?src="jQuery.beDropdownlist.js"?type="text/javascript"></script>?????<script?type="text/javascript">?????????$(function?()?{?????????????var?city?=?["上海",?"北京",?"西安",?"哈爾濱",?"廣州",?"深圳",?"清遠(yuǎn)",?"韶關(guān)",?"河源",?"梅州",?"潮州",?"汕頭",?"揭陽",?"汕尾",?"惠州",?"東莞",?"珠海",?"?中山",?"江門",?"佛山",?"肇慶",?"云浮",?"陽江",?"茂名",?"湛江"];?????????????$("#txtCity").beDropdownlist(city,?function?()?{?alert($("#txtCity").val())?});?????????????//$("#txtCity").beDropdownlist(city);?????????????var?country?=?["中國",?"日本",?"美國",?"德國"];?????????????$("#txtCountry").beDropdownlist(country);?????????});??????</script>?????<link?rel="stylesheet"?type="text/css"?href="jQuery.beDropdownlist.css"?/>?</head>?<body>?????<br>?????<br>?????國家：<input?type="text"?id='txtCountry'?value=""?/>?????城市：<input?type="text"?id='txtCity'?value=""?/>?</body>?</html>

編寫jquery有幾點(diǎn)注意：

$.fn對(duì)象是$.prototype的別名，使用fn為了簡(jiǎn)潔。

options = $.extend(defaults, options); 使得參數(shù)覆蓋，該函數(shù)的具體說明可以參考jQuery手冊(cè)。

由于jquery的選擇符可能匹配多個(gè)對(duì)象，所以需要用each，對(duì)每個(gè)匹配的元素做操作。

jquery插件編寫中，不能假設(shè)$總是是有效的，因此，使用包裝函數(shù)，使得在下面的代碼中可以繼續(xù)寫$。

包裝函數(shù)的形式如下：

(function?($)?{??????????????})(jQuery);

該方式使用的是一種匿名函數(shù)的方式，傳入的參數(shù)是jQuery，函數(shù)體內(nèi)部仍然用$符合作為jQuery對(duì)象，因此很方便，與之等價(jià)的寫法其實(shí)就是：

var?baozhuanghanshu=function?($)?{???//具體實(shí)現(xiàn)?}?baozhuanghanshu(jQuery)

也就是說，上面的jquery插件也可以采用這種寫法，直接調(diào)用baozhuanghanshu即可。甚至可以把$寫成$my$作為jQuery。如下：

var?baozhuanghanshu=function?(?$my$?)?{?//具體實(shí)現(xiàn)????????}?baozhuanghanshu(jQuery)

但是一般遵循約定，包裝方法都是寫成

(function ($) {

?})(jQuery);

這種形式，有利于不同程序員的閱讀。

附件：http://down.51cto.com/data/2361333

向AI問一下細(xì)節(jié)

jquery插件編寫：文本框?qū)崿F(xiàn)下拉框效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽