现在位置首页 / 前端开发 /正文

超酷的Jquery带图标下拉框

作者: IT小兵 | 2016年11月29日| 热度:℃ | 评论: |参与:

今天给大家分享一个超酷的Jquery带图标下拉框.先看效果图:

效果1:

效果2:

效果3:

更多效果请看:http://www.shouce.ren/api/jq/5733e351cf2f8/index3.html

下载地址: 


http://www.shouce.ren/post/view/id/113187


使用方法非常简单:

<div class="container"> 
           
            <section class="main clearfix"> 
                <select id="cd-dropdown" name="cd-dropdown" class="cd-select"> 
                    <option value="-1" selected>请选择</option> 
                    <option value="1" class="icon-monkey">网站模板</option> 
                    <option value="2" class="icon-bear">jQuery特效</option> 
                    <option value="3" class="icon-squirrel">精选网址</option> 
                    <option value="4" class="icon-elephant">网站源码</option> 
                </select> 
            </section> 
        </div><!-- /container --> 
        <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> 
        <script type="text/javascript" src="js/jquery.dropdown.js"></script> 
        <script type="text/javascript"> 
            $(function() { 
                $('#cd-dropdown').dropdown({ 
                    gutter: 5 
                }); 
            }); 
        </script>


参考:


[jquery插件--模拟下拉选项框select]

[jquery 自定义datalist/下拉框插件:datalist]

[javascript+html5+css3仿淘宝下拉刷新 数据效果]

[ztree教程--zTree实现文本框输入关键词自动匹配下拉效果]

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询