jQuery列表框插件imageselect.js jquery select美化用图片进行选择

 select默认的太难看了,在这用jquery 插件imageselect.js进行美化,就图片进行下拉菜单的选择

列表框插件imageselect.js jquery select美化用图片进行选择-jquery select 美化">

这个网页特效代码如下:

 

<!DOCTYPE html>
<head>
<title>支持图片选择的jQuery列表框插件imageselect.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="jquery.min.1.7.1.js" ></script>
<script type="text/javascript" src="imageselect.js"></script>
<style>
.jqis{position: relative;}
.jqis_header{background-image: url('dropdown_arrow.png');
background-position: right center;background-repeat: no-repeat;cursor: pointer;}
.jqis_header img{cursor: pointer;}
.jqis_dropdown{padding: 5px;position: absolute;overflow-x: hidden;overflow-y: scroll;}
.jqis_dropdown img{margin-right: 3px;cursor: pointer;float: left;}
</style>
</head>
<body>
<p>请在下拉列表中选择:</p>
<select name="logo">
<option value="1">wall_s5.jpg</option>
<option value="2">wall_s8.jpg</option>
<option value="3">wall_s7.jpg</option>
<option value="4">wall_s6.jpg</option>
</select>
<script type="text/javascript">
	$(document).ready(function(){
		$('select[name=logo]').ImageSelect({dropdownWidth:425});
	});
</script>
</body>
</html>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索select
, 图片
, 插件
, cursor
, 选择
, 下拉
, 美化下拉列表
, jquery下拉列表
, jquery列表框
, jquery下拉列表框
, 插件列表
, select选择框美化
, js美化选择框
jQuery下拉框插件
jquery select 美化、jquery imageselect、jquery select image、易语言超级列表框美化、超级列表框美化,以便于您获取更多的相关知识。

时间: 2024-08-03 00:52:33

jQuery列表框插件imageselect.js jquery select美化用图片进行选择的相关文章

轻巧的jQuery提示框插件Tipso演示

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>轻巧的jQuery提示框插件Tipso演示_dowebok</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js">&l

使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框

这也是下拉列表太长了之后,使用的同事提出来的意见, 然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦, 就找了几个JQUERY的插件测试了一下,最后选中了flexselect. 基本操作如下: 1,基本的JS,和CSS包含: <link rel="stylesheet" href={% static "css/flexselect.css"%} /> <script src={% static "js/jq

jquery 提示框插件SweetAlert的使用例子

SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文本.点击后回调函数等. 准备工作 首先我们必须将SweetAlert插件的js文件和css文件引入到页面中.   <script src="sweetalert.min.js"></script> <link rel="stylesheet"

使用基于jquery的gamequery插件做JS乒乓球游戏_jquery

我建议大家先学会些基础的JS,再学jquery,这样会更好接受些新的东西.今天我们要试着做个js经典游戏,打乒乓球的游戏,这款游戏大概是我做得最多次的了,我有用过xna.flash.js都做过同一款.先上张截图,不然大伙还不知道是什么东西. 它的演示地址是:http://www.lovewebgames.com/demo/gamepingbang/ 采用的技术是jquery+gamequery, jquery大家都知道是什么了,本文重点介绍下gamequery,gamequery是一款jquer

jquery页面打印插件PrintArea.js使用方法

看到这个插件的名字,能猜得到它是干什么用的吗? jquery.PrintArea.js是一款可以实现网页打印的插件,实用的方法非常简单. 下面就简单介绍一下它的使用方法. 1.保存jquery.PrintArea.js. (function ($) {     var printAreaCount = 0;     $.fn.printArea = function () {         var ele = $(this);         var idPrefix = "printArea

jQuery Tab切换插件Tabulous.js使用示例

关于Tabulous.js Tabulous.js 是一个实现了Tab标签切换功能的 jQuery 插件,轻量级插件,简单且易于使用.它所生成的Tab标签可通过 CSS 来自定义样式,同时它也提供了多种切换效果. 如何使用Tabulous.js 首先在页面中加入 jQuery 框架和 Tabulous.js 插件  代码如下 复制代码 <link href='tabulous.css' rel='stylesheet' type='text/css'> <script src="

PHP+Mysql+jQuery查询和列表框选择操作实例讲解_php技巧

本文讲解如何通过ajax查询mysql数据,并将返回的数据显示在待选列表中,再通过选择最终将选项加入到已选区,可以用在许多后台管理系统中.本文列表框的操作依赖jquery插件. HTML <form id="sel_form" action="post.php" method="post"> <p><input type="text" name="keys" id="

jquery插件star-rating.js实现星级评分特效_jquery

特效介绍 jquery星级评分插件star-rating.js下载插件,点击星星或者心的左边,就是半分,右边就是1分.点击减号,分数置为0.不兼容IE8以下的浏览器. 演示图 使用方法 第一步.引入下面的代码: 复制代码 代码如下: <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> <script s

简单实现的JQuery文本框水印插件_jquery

采用JQuery实现文本框的水印效果非常容易,效果如下:   代码片段,定义要应用水印效果的文本框的样式: .watermark { color: #cccccc; } 将JavaScript代码封装成JQuery的插件:  (function ($) { $.fn.watermark = function (options) { var settings = $.extend({ watermarkText: "Input something here", className: &q