Maison > interface Web > js tutoriel > Code d'implémentation de la liste déroulante modifiable basé sur jquery_jquery

Code d'implémentation de la liste déroulante modifiable basé sur jquery_jquery

WBOY
Libérer: 2016-05-16 16:40:31
original
1701 Les gens l'ont consulté

Le principe est d'ajouter une zone de texte à un ul pour simuler une zone déroulante, et d'utiliser une police pour simuler un bouton déroulant.

1. Créer des effets statiques

Utilisez d'abord CSS et HTML pour que cela ressemble à ce qu'il devrait être. Voici les deux polices que j'utilise, qui peuvent être créées par vous-même sur le site icomoon. L'avantage d'utiliser des polices est qu'il est très pratique de positionner la zone de saisie, et vous pouvez également contrôler la taille, la couleur, etc. Le seul inconvénient est que IE6 et IE7 ne peuvent pas afficher cette police car ils ne prennent pas en charge le sélecteur :before. , mais cela peut être réalisé par d'autres méthodes. Vous pouvez l'essayer vous-même. Ci-dessous le code html

<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>
Copier après la connexion

1. Il y a du style et de la classe dans la balise. Ce style est un attribut obligatoire et doit avoir
. 2. La partie la plus externe est enveloppée avec span, puis dotée d'un attribut inline-block. La raison pour laquelle les éléments en ligne sont utilisés est pour la commodité de la mise en page future. Il est également possible de les remplacer par des éléments de bloc, mais souvent des éléments de bloc. sera accompagné de float Flottant et d'autres styles sont plus difficiles à contrôler
3. Ficomoon icon-angle-bottom définit la police
4. La position de l'attribut span est relative. Je prévois d'utiliser le positionnement ul pour simuler la liste déroulante. À l'avenir, top pourra obtenir le réglage de la hauteur selon jquery. codé
5. J'ai ajouté une balise a au contenu de li. Je veux juste être paresseux ici. La balise a a une pseudo-classe :hover peut modifier le CSS, donc je peux écrire moins d'effets spéciaux en la déplaçant. au contenu de changer le style.

Ci-dessous le code CSS :

@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot&#63;-fl11l');
 src:url('fonts/icomoon.eot&#63;#iefix-fl11l') format('embedded-opentype'),
 url('fonts/icomoon.woff&#63;-fl11l') format('woff'),
 url('fonts/icomoon.ttf&#63;-fl11l') format('truetype'),
 url('fonts/icomoon.svg&#63;-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}
Copier après la connexion

Combox_border et d'autres styles ici peuvent être personnalisés, et des styles CSS3 peuvent être ajoutés pour les embellir. J'ai créé un style simple ici.

2. Créer des effets spéciaux JS

Quand je travaillais sur JS, j'ai rencontré un problème étrange, c'est-à-dire qu'aucune erreur ne serait signalée dans aucun navigateur, mais dans IE6, cela provoquerait une erreur de propriétés d'objet non définies. Finalement, j'ai découvert que c'était parce que. du problème d'encodage du fichier js, pas UTF-8, changez simplement l'encodage.

Le premier est un format de plug-in jquery

(function($){
 $.fn.combox = function(options) {
 
 };
})(jQuery);
Copier après la connexion

Puis ajoutez les paramètres par défaut

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

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

Ensuite, il existe une méthode de rendu

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

Générez dynamiquement des zones de saisie, des boutons, des listes déroulantes, attachez des styles et des heures. J'ai mis les trois rendus dans trois fonctions respectivement pour que ce soit plus clair

       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;
 }
Copier après la connexion

J'ai ajouté un symbole $ aux paramètres des trois fonctions pour que je puisse savoir qu'il s'agit d'un objet jquery. Il n'y a aucune difficulté technique dans ces fonctions. Elles sont toutes très courantes et logiques. Vous pouvez également modifier le code à tout moment en fonction de vos différents besoins. Le plug-in ne comporte qu'un total de 50 lignes, ce qui est très simple. modifier.

Ce qui suit est le plug-in appelant :

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

Cela ne prend qu'une seule phrase, ce qui est très pratique.

démo démo : http://demo.jb51.net/js/2014/combox_jquery/

Téléchargement de la démo : http://www.jb51.net/jiaoben/199034.html

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal