recherche

Maison >interface Web >js tutoriel >jquery implémente le code d'effets spéciaux d'embellissement de la liste déroulante sélectionnée

jquery implémente le code d'effets spéciaux d'embellissement de la liste déroulante sélectionnée

PHPz
PHPzavant
2016-05-16 15:44:251703parcourir

Cet article présente principalement l'implémentation de jquery pour embellir la liste déroulante de sélection. L'effet est simple et élégant. Il est recommandé à tous les amis dans le besoin de s'y référer.

Il s'agit d'un code d'effet spécial basé sur jquery pour implémenter l'embellissement de la liste déroulante de sélection. Les utilisateurs peuvent sélectionner le contenu du menu déroulant. C'est un code source d'effet spécial très pratique.

L'implémentation jquery du code d'effets spéciaux d'embellissement de la boîte déroulante sélectionnée partagé avec tout le monde est la suivante 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/g.css" type="text/css" rel="stylesheet" />
<link href="css/css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p class="searchbox">
 <p class="searchZone clearfix">
 <form target="_blank">
 <fieldset>
 <label>
 <input type="text" class="text" name="keyword" onblur="if(this.value==&#39;&#39;){this.value=&#39;请输入关键字&#39;;this.style.color=&#39;#aaa&#39;}" onfocus="if(this.value==&#39;请输入关键字&#39;){this.value=&#39;&#39;;this.style.color=&#39;#333&#39;}" value="请输入关键字" />
 </label>
 <p class="left">
 <select style="display: none;" name="mySle" id="mySle">
 <option selected="selected" value="0">全站搜索</option>
 <option value="1">素材搜索</option>
 <option value="2">设计欣赏</option>
 <option value="3">桌面壁纸</option>
 <option value="4">设计教程</option>
 </select>
 </p>
 <label>
 <button type="submit">快给我搜一下</button>
 </label>
 </fieldset>
 </form>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/selectbox.js"></script>
 <script type="text/javascript"> $(document).ready(function() {$(&#39;#mySle&#39;).selectbox();});</script>
 </p>
</p>
</body>
</html>

Rendu en cours d'exécution :

Adresse de démonstration en ligne ：http://demo.jb51.net/js/2015/jquery-select-xlkmh/

Si vous souhaitez plus d'effets de liste déroulante, vous pouvez cliquez sur Résumé des effets de la liste déroulante jquery/JavaScript.

Ce qui précède est l'implémentation jQuery du code d'effets spéciaux d'embellissement de la liste déroulante sélectionné partagé avec vous. J'espère que vous pourrez l'aimer. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo jQuery !

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：jQuery grande image à gauche, petite image à droite, mise au point du code de commutation du diaporama d'image Sharing_jqueryArticle suivant：jQuery grande image à gauche, petite image à droite, mise au point du code de commutation du diaporama d'image Sharing_jquery

Articles Liés

Voir plus