jQuery下拉菜单美化插件

下载地址

一款用于美化下拉列表菜单控件的jquery插件ddlist。使用该ddlist下拉列表美化插件可以为下拉列表添加图标,增强下拉列表的默认功能等。在美化的同时使下拉列表功能得到增强。HTML结构要使用该插件,首先要在html的header中引入以下文件:

然后在html中对于一个select元素,例如:Text 0Text 1 ...Text 9然后通过jQuery调用该下拉列表插件: 获取下拉列表的值有三种方法可以指定列表项的值:在某个选项上设置“selected”;你可以在插件初始化的时候设置“selectionIndex”的值来选择指定的项;如果以上两个选项都未被设定,那么第一个选项将被执行。Example 1:RedGreenBlue"Green"将被选择为默认选项。Example 2:RedGreenBlue 例子2中,"Blue"将被设置为默认选项。带图片的选项你可以为每一个选项指定一张图和段描文本。你必须通过HTML5的data-imagesrc 和data-description属性来指定它们。text - 0 ...text - 4编写CSS样式在该下拉列表插件带有一个CSS文件包含当前列表的内部元素的各种样式,但是如果你想自定义下拉列表的样式,那么你必须知道该下拉列表的DOM结构:

option-image-urloption-text option-description ...
  • option-image-urloption-text option-description
    • ..

根元素是一个id为ddList-开头的select元素。第一个元素是下拉列表的可见选项:元素用于显示选项元素和元素是可选的,它们用于显示选项前面的图标和选项的描述文本。第二个元素是下拉列表的上下箭头。第三个

  • 元素包含所有的选项。初始化方法:[jqObject(s)].ddlist(options)可选参数:width:Integer default:260-该参数对于下拉列表的宽度。selectionIndex:Integer default:0-该参数指定初始化是哪个选项被选择。disabled:Boolean default:false-设置为“true”则下拉列表不可用。showSelectionTextOnly:Boolean default:false-设置为“true”仅下拉列表的文本。onSelectedOnInit:Boolean default:false-设置为“true”时onSelected回调函数被触发。onSelected:callback function Signature: onSelected: function (index, value, text) { }。index:列表被选择项的index。value:列表被选择项的value。text:列表被选择项的text。

    7670ca43ac37abb4cd91035cbde3edfd9760.jpg

    dd:

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值