一款好看的可以插入图片的下拉控件
来源:互联网 发布:知柏地黄丸治什么病 编辑:程序博客网 时间:2024/05/17 07:55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
></
title
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"Scripts/jquery.ddslick.js"
type
=
"text/javascript"
></
script
>
<
script
type
=
"text/javascript"
>
$(function () {
var ddlData = [
{
text: "Lwolf",
value: 1,
selected: false,
description: "描述",
imageSrc: "/Content/image/1_f.gif"
},
{
text: "Site518",
value: 2,
selected: true,
description: "",
imageSrc: "/Content/image/2_f.gif"
}
];
alert(ddlData);
$('#mydropdown').ddslick({
data: ddlData,
width: 150,
showSelectedHTML:true,
selectText: "请选择...",
imagePosition: "left",
onSelected: function (selectedData) {
//回调方法
}
});
})
</
script
>
</
head
>
<
body
>
<
div
id
=
"mydropdown"
></
div
>
</
body
>
</
html
>
使用这个控件,需要先引用一下jquery。不知道他对jquery版本是否有要求,我引用1.4.4的时候,这个控件无法运行,引用1.7.2就可以。
基本就这样,很简单,不过有一点就是 :如果在使用的过程中不需要那个json里面的描述,可以为空,但是这样写以后 好像样式有一点问题
会显示成这样:
上面显示的图片和字不在同一行,一上一下的。我看了下他的css发现 在没有描述的时候 他给那个字体用了一个line-height:40px;使其上下居中了,而图片没有。这样我就在他的jquery的代码中找到了如下代码:
将这个部分注释掉就ok。
最终效果还算不错,如下图:
- 一款好看的可以插入图片的下拉控件
- 一款好看的可以插入图片的下拉控件
- 一款好看的可以插入图片的下拉控件
- 一款好看的日历控件
- 好看的下拉菜单
- 好看的下拉列表
- 转:一款好看的日期选择器
- 一款awesome下好看的主题插件
- 一款非常好看的下载动画
- 一款好看的文本框点击效果
- 一款比余额宝数字跳动,更平滑简易好看的Android控件
- 好看适用的日历控件
- 一个好看的时间控件
- 一款可以限定选择区域的日期控件
- 一款通用的欢迎页,可以有多张图片
- 好看的select下拉框样式收集
- html好看的下拉菜单样式
- 一个可以显示图片(包括GIF动画)的ATL控件,以及在RichEdit中如何使用此控件插入图片
- Java 集合 Stack、Queue、Map插入、移除和遍历
- TCP三次握手/四次挥手详解
- Logcat报错
- jQuery的Ajax的自动完成功能控件
- android基础(一) View与六大布局(上)
- 一款好看的可以插入图片的下拉控件
- 读jQuery之二十一(队列queue)
- facetime使用普及
- jQuery UI 1.10.1 发布
- [原]jQuery EasyUI 1.3.2 离线API、Demo
- jQuery性能优化28条建议
- jQuery筛选器找父亲parent,closest,parents,parentUntil
- jQuery事件绑定.on()
- jQuery笔记-jQuery筛选器children()详解