一款好看的可以插入图片的下拉控件
来源:互联网 发布:淘宝抢购验证码 编辑:程序博客网 时间:2024/05/16 01:35
<!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。
最终效果还算不错,如下图:
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- 一款好看的可以插入图片的下拉控件
- 一款好看的可以插入图片的下拉控件
- 一款好看的可以插入图片的下拉控件
- 一款好看的日历控件
- 好看的下拉菜单
- 好看的下拉列表
- 转:一款好看的日期选择器
- 一款awesome下好看的主题插件
- 一款非常好看的下载动画
- 一款好看的文本框点击效果
- 一款比余额宝数字跳动,更平滑简易好看的Android控件
- 好看适用的日历控件
- 一个好看的时间控件
- 一款可以限定选择区域的日期控件
- 一款通用的欢迎页,可以有多张图片
- 好看的select下拉框样式收集
- html好看的下拉菜单样式
- 一个可以显示图片(包括GIF动画)的ATL控件,以及在RichEdit中如何使用此控件插入图片
- OpenCV的Gabor函数应用
- C#实现万年历(农历、节气、节日、星座、属相、生肖、闰年等)
- Linux中断处理流程
- 关于main(int argc,char *argv[])
- 汇编学习历程(字符串输入)
- 一款好看的可以插入图片的下拉控件
- WinCE BSP的BIB文件介绍
- 杂记
- OpenCv 直方图
- OEMAddressTable介绍
- hdu 1558 Segment set
- 不连续处断开 即把一个串从数字不连续的位置断开。试完善之。
- Windows CE内存管理
- OpenCV的PCA人脸识别