好看的css下拉框样式,实用的漂亮的下拉框-CUSTOM DROP-DOWN LIST STYLING

49f1d4e29612ae785daf260ae717f2ca.png

94a6dc5feabd4193c6b752bf51a273a1.png

插件描述:今天我给大家介绍一款下拉选择框,有5种漂亮的样式可供我们选择,真的蛮实用的

今天我给大家介绍一款下拉选择框,有5种漂亮的样式可供我们选择,真的蛮实用的

预览图

width="474" height="300" title="下拉框" alt="下拉框"/>

alt=""/>

alt=""/>

使用步骤

该插件有5种表现形式,下面我就介绍一下第一种样式的实现,其它的大概一致,大家可以参考 Demo

1、引入以下的js和css文件

2、在head标签中加入以下js代码

function DropDown(el) {

this.dd = el;

this.placeholder = this.dd.children('span');

this.opts = this.dd.find('ul.dropdown > li');

this.val = '';

this.index = -1;

this.initEvents();

}

DropDown.prototype = {

initEvents: function() {

var obj = this;

obj.dd.on('click',

function(event) {

$(this).toggleClass('active');

return false;

});

obj.opts.on('click',

function() {

var opt = $(this);

obj.val = opt.text();

obj.index = opt.index();

obj.placeholder.text('Gender: ' + obj.val);

});

},

getValue: function() {

return this.val;

},

getIndex: function() {

return this.index;

}

}

$(function() {

var dd = new DropDown($('#dd'));

$(document).click(function() {

// all dropdowns

$('.wrapper-dropdown-1').removeClass('active');

});

});

3、在body标签中加入以下格式的html代码

Gender

  • Male

  • Female

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值