Editierbarer Dropdown-Box-Implementierungscode basierend auf jquery_jquery

Das Prinzip besteht darin, einer UL ein Textfeld hinzuzufügen, um ein Dropdown-Feld zu simulieren, und eine Schriftart zu verwenden, um eine Dropdown-Schaltfläche zu simulieren.

1. Erstellen Sie statische Effekte

Verwenden Sie zunächst CSS und HTML, damit es so aussieht, wie es sollte. Hier sind die beiden Ich verwende Schriftarten, die Sie selbst auf der icomoon-Website erstellen können. Der Vorteil der Verwendung von Schriftarten besteht darin, dass die Positionierung des Eingabefelds sehr praktisch ist und Sie auch Größe, Farbe usw. steuern können. Der einzige Nachteil besteht darin, dass IE6 und IE7 diese Schriftart nicht anzeigen können, da sie den Selektor :before nicht unterstützen , aber es kann durch einige andere Methoden erreicht werden. Sie können es selbst versuchen. Unten ist der HTML-Code

<span style="display:inline-block;position:relative" class="combox_border">
 <input type="text" class="combox_input"/><font class="ficomoon icon-angle-bottom combox_button" style="display:inline-block"></font>
 <ul style="position:absolute;top:29px;left:-1px" class="combox_select">
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项一</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项二</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项三</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项四</a></li>
 </ul>
</span>

1. Das Tag enthält Stil und Klasse. Dieser Stil ist ein erforderliches Attribut und muss
haben 2. Der äußerste Teil wird mit span umschlossen und dann mit einem Inline-Block-Attribut versehen. Der Grund, warum Inline-Elemente verwendet werden, ist die Vereinfachung zukünftiger Layouts. Es ist jedoch auch möglich, sie durch Blockelemente zu ersetzen wird von float begleitet Floating und andere Stile sind schwieriger zu kontrollieren
3. Ficomoon icon-angle-bottom definiert die Schriftart
4. Die Attributposition von span ist relativ. Ich habe vor, die UL-Positionierung zu verwenden. Die Position von UL ist in Zukunft absolut. codiert
5. Ich habe dem Inhalt in li ein a-Tag hinzugefügt. Das a-Tag hat eine :hover-Pseudoklasse, sodass ich weniger Spezialeffekte beim Verschieben schreiben kann bis zum Inhalt, um den Stil zu ändern.

Unten ist der CSS-Code:

@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot?-fl11l');
 src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'),
 url('fonts/icomoon.woff?-fl11l') format('woff'),
 url('fonts/icomoon.ttf?-fl11l') format('truetype'),
 url('fonts/icomoon.svg?-fl11l#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}
.ficomoon{font-family:'icomoon';}
.icon-angle-top:before {content: "\f102"}.icon-angle-bottom:before {content: "\f103"}
/*下面的可根据自己的实际情况做修改*/
.combox_border{border:1px solid #c2c2c2;height:28px;width:245px}
.combox_input{border:0;line-height:25px;height:25px;padding-left: 5px;width:85%;vertical-align: middle;}
.combox_button{width:12%;text-align:center;vertical-align: middle;cursor:pointer;border-left:1px solid #c2c2c2}
.combox_select{border:1px solid #c2c2c2;border-top:0;width:100%}
.combox_select li{overflow:hidden;height:30px;line-height:30px;cursor:pointer;}
.combox_select a {display: block;line-height: 28px;padding: 0 8px;text-decoration: none;color: #666;}
.combox_select a:hover {text-decoration: none;background:#f5f5f5}

Combox_border und andere Stile können hier angepasst werden, und CSS3-Stile können hinzugefügt werden, um sie zu verschönern. Ich habe hier einen einfachen Stil erstellt.

2. Erstellen Sie JS-Spezialeffekte

Als ich JS machte, stieß ich auf ein seltsames Problem, das heißt, in keinem Browser wurde ein Fehler gemeldet, aber in IE6 wurde ein Fehler wegen nicht festgelegter Objekteigenschaften angezeigt. Schließlich fand ich heraus, dass dies daran lag des Codierungsproblems der js-Datei, nicht UTF-8, ändern Sie einfach die Codierung.

Das erste ist ein JQuery-Plug-In-Format

(function($){
 $.fn.combox = function(options) {
 
 };
})(jQuery);

Dann fügen Sie Standardparameter hinzu

var defaults = { 
 borderCss: "combox_border", 
 inputCss: "combox_input", 
 buttonCss: "combox_button", 
 selectCss: "combox_select",
 datas:[]
};
var options = $.extend(defaults, options);

borderCss	最外面包裹的样式，就是上面的span
inputCss	输入框的样式
buttonCss	按钮的样式，就是
selectCss	下拉列表的样式
datas	下拉列表中的内容

Dann gibt es noch eine Rendering-Methode

this.each(function() {
var _this = $(this);
_this = _initBorder(_this);//初始化外框CSS IE6中需要有返回值
_this = _initInput(_this);//初始化输入框
_initSelect(_this);//初始化下拉列表
});

Generieren Sie dynamisch Eingabefelder, Schaltflächen, Dropdown-Felder, fügen Sie Stile und Zeiten hinzu. Ich habe die drei Renderings jeweils in drei Funktionen eingeteilt, um es klarer zu machen

　　　　　　 function _initBorder($border) {//初始化外框CSS
 $border.css({'display':'inline-block', 'position':'relative'}).addClass(options.borderCss);
 return $border;
 }
 
 function _initInput($border){//初始化输入框
 $border.append('<input type="text" class="'+options.inputCss+'"/>');
 $border.append('<font class="ficomoon icon-angle-bottom '+options.buttonCss+'" style="display:inline-block"></font>');
 //绑定下拉特效
 $border.delegate('font', 'click', function() {
 var $ul = $border.children('ul');
 if($ul.css('display') == 'none') {
 $ul.slideDown('fast');
 $(this).removeClass('icon-angle-bottom').addClass('icon-angle-top');
 }else {
 $ul.slideUp('fast');
 $(this).removeClass('icon-angle-top').addClass('icon-angle-bottom');
 } 
 });
 return $border;//IE6需要返回值
 }
 
 function _initSelect($border) {//初始化下拉列表
 $border.append('<ul style="position:absolute;left:-1px;display:none" class="'+options.selectCss+'">');
 var $ul = $border.children('ul');
 $ul.css('top',$border.height()+1);
 var length = options.datas.length;
 for(var i=0; i<length ;i++)
 $ul.append('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+options.datas[i]+'</a></li>');
 $ul.delegate('li', 'click', function() {
 $border.children(':text').val($(this).text());
 $ul.hide();
 $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变
 });
 return $border;
 }

Ich habe den Parametern in den drei Funktionen ein $-Symbol hinzugefügt, damit ich weiß, dass es sich um ein JQuery-Objekt handelt. Bei diesen Funktionen gibt es keine technischen Schwierigkeiten. Sie können den Code jederzeit entsprechend Ihren unterschiedlichen Anforderungen ändern, was sehr einfach ist ändern.

Das Folgende ist das aufrufende Plug-in:

<script type="text/javascript">
$(document).ready(function() {
 $('#combox').combox({datas:['选项一','选项二','选项三']});
})
</script>
</head>
<body>
　　<span id="combox"></span>
</body>
</html>

Es ist nur ein Satz erforderlich, was sehr praktisch ist.

Demo-Demo: http://demo.jb51.net/js/2014/combox_jquery/

Demo-Download: http://www.jb51.net/jiaoben/199034.html