- 浏览: 111966 次
- 性别:
- 来自: 江西
文章分类
最新评论
-
antsshadow:
如何在IE6、IE7、IE8中使用HTML5 canvas -
fei_6666:
请问 $('#livemargins_contro' ).bg ...
jquery.bgiframe.js解决下拉列表框被遮盖(iE 6下存在的情况) -
geliyang:
function(value,element)这里的value ...
Jquery Validator 的addMethod用法備忘
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
#userselect{ position:relative; width:183px;}
#userselect span{ display:block;text-align:left; padding-left:5px;width:178px; height:31px;border:1px solid #CCC; line-height:31px; background:url("selectdot.gif") no-repeat right top; cursor:pointer;}
#userselect ul{ position:absolute; left:0; top:33px; border:1px solid #CCC; margin:0; padding:0; list-style:none; width:100%;}
#userselect li{text-align:left;margin:0; padding:0; padding-left:5px; list-style:none;cursor:pointer; line-height:24px; width:178px; background:#FFF;}
#userselect li.hover{ color:#579BC3; background:#F2F2F2;}
</style>
<script type="text/javascript" src="tk.userselect.js"></script>
</head>
<body>
<div id="userselect"></div>
<script type="text/javascript">
var datatest = {
defaulttex: "--请选择--",
selectname: "usersex", //slect表单name名
selectvalue: "0", //slect表单value值
data: [{
optionstext: "男",
values: "1"
},
{
optionstext: "女",
values: "2"
}]
};
$("#userselect").userselect(datatest);
</script>
</body>
</html>
//tk.userselect.js代码:
// JScript source code
/*
例子:
var datatest={
defaulttex: "---请选择---",
selectname: "userselect",//slect表单name名
selectvalue: "0",//slect表单value值
data: [{
optionstext: "下拉列表1",
values: "1"
},
{
optionstext: "下拉列表2",
values: "2"
}]
};
$("aaa").userselect(datatest);
*/
(function ($) {
//初始化select
var defaults = {
defaulttex: "---请选择---",
selectname: "userselect",
selectvalue: "0",
data: [{
optionstext: "下拉列表1",
values: "1"
},
{
optionstext: "下拉列表2",
values: "2"
}]
};
$.fn.extend({
userselect: function (options) {
var selectdata = $.extend({}, defaults, options);
_intselect(this, selectdata);
}
});
_intselect = function (selectid, mydata) {
var selecthtml = '<input name="' + mydata.selectname + '" type="hidden" data-value="' + mydata.defaulttex + '" value="' + mydata.selectvalue + '" /><span></span><ul style="display:none;">'
for (var i = 0; i < mydata.data.length; i++) {
selecthtml += '<li data-option="' + mydata.data[i].values + '">' + mydata.data[i].optionstext + '</li>';
}
selecthtml += '</ul>';
selectid.append(selecthtml);
selectid.children("span").text(selectid.children("input").attr("data-value"));
selectid.children("span").bind("click", function (event) {
selectid.children("ul").toggle();
event.stopPropagation();
});
$(document).bind("click", function () {
selectid.children("ul").hide();
});
selectid.children("ul").children().each(function (i) {
$(this).bind("click", function () {
selectid.children("span").text($(this).text());
selectid.children("input").val($(this).attr("data-option"));
selectid.children("input").attr("data-value", $(this).text());
//alert(selectid.children("input").val());
});
$(this).hover(function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
});
}
})(jQuery);
发表评论
-
在js文件中显示jquery的智能提示VS2010
2012-05-25 15:30 0///<reference path="jqu ... -
英文强制自动换行
2012-03-22 17:48 857<div style="width:150px ... -
DIV+CSS布局中自适应两列等高的解决方法
2011-12-14 11:48 868<!doctype html> <html ... -
关于浏览器内核的一些概念
2011-12-14 11:37 877什么是浏览器内核 要想搞清楚浏览器内核是什么, ... -
介绍 10 个 CSS3 属性
2011-12-14 11:24 685介绍 10 个 CSS3 属性 border-rad ... -
将手机网站做成手机应用的JS框架
2011-11-30 14:26 971将手机网站做成手机应用的JS框架 发表于 2010年09月1日 ... -
图片水平垂直居中
2011-11-18 11:17 836<!DOCTYPE html PUBLIC " ... -
jquery实现无缝图片滚动
2011-10-24 13:58 954<!DOCTYPE HTML> <html& ... -
HTML Head 参数详解
2011-10-18 15:14 1972head区是指首页HTML代码的<head> ... -
IE6文字溢出BUG
2011-10-18 15:09 824在IE6下,经常会产生一些灵异事件,比如:HTML代码里是&q ... -
div背景半透明,文字不透明
2011-10-18 15:06 2092有时候某些纯色的半透明效果,不需要用图片来完成,可以直接使用d ... -
JS变量的作用域
2011-10-18 14:53 798JavaScript中变量的作用域非常奇特,如果不仔细研究,一 ... -
图片延迟加载之随滚动条显示
2011-10-18 14:38 1453经常上tudou网,发现tudou首页加载图片的功能很有意思, ... -
三列等高。中间列优先
2011-09-28 16:48 805<!DOCTYPE html> <html& ... -
a空标签设成块元素后ie7不能点击
2011-09-20 18:12 1755a空标签设成块元素后ie7不能点击,加上空背景后就可以了。 ... -
ie6支持position:fixed
2011-09-08 13:58 696pfP{position:fixed;_position:ab ... -
jquery实现tab选项卡
2011-09-08 10:36 1126<section class="recomme ... -
常用JS代码大全
2011-09-07 18:42 2193事件源对象 event.srcElement ... -
jquery实现图片幻灯片切换代码
2011-09-01 19:20 665<!DOCTYPE html PUBLIC " ... -
js控制图片自动等比例缩放
2011-08-29 16:17 883function imgfix(){ var maxw ...
相关推荐
二、jQuery自定义Select控件的实现步骤 1. 隐藏原生Select:首先,我们需要隐藏原生的Select元素,使用CSS的`display:none`属性,确保它不会在页面上显示。 ```html <select id="custom-select" style="display:...
"jQuery inputbox表单美化插件自定义select框"是一个专注于改善select下拉框外观的解决方案。这个插件利用jQuery的强大功能,为传统的HTML select元素提供了自定义样式和交互效果,让表单看起来更加专业且用户友好。...
不过,由于`<select>`元素的限制,我们需要使用jQuery来实现更复杂的行为,如打开和关闭下拉菜单、处理用户交互等。这里的关键是使用jQuery的事件监听器(如`click`、`mouseover`)和DOM操作方法(如`addClass`、`...
"jquery自定义select下拉样式.zip"这个压缩包可能包含了实现这一目标的示例代码和资源。 首先,我们需要理解jQuery的基本用法。jQuery通过$函数作为入口,可以快速选择DOM元素,如`$('select')`用于选取所有的...
二、模拟select表单 在HTML5中,虽然 `<select>` 元素提供了下拉菜单功能,但其样式控制有限,且无法实现复杂的交互。使用jQuery,我们可以创建自定义的HTML结构(如`<div>`)来模拟这种选择行为。这包括创建可点击...
今天我们要分享一款很实用的jQuery自定义Select下拉框,它的外观不仅比浏览器自带的下拉框要漂亮,而且在选择的时候还可以自动滚动下拉框选项,用户体验非常不错。之前我们也分享过一些用CSS3和HTML5制作的下拉框,...
总结来说,"jquery自定义表单控件.zip"中的内容将涵盖使用jQuery进行表单元素的选取、事件绑定、样式控制、自定义功能实现以及与服务器的异步通信等多个方面,帮助开发者打造功能丰富、交互性强的表单控件。...
jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码
4. **API 和事件**:`jquery.editable-select` 提供了一系列 API 方法和事件,允许开发者自定义其行为。例如,你可以通过 API 设置或获取选中项,监听用户输入或选择变化的事件,甚至可以添加或移除选项。 5. **...
《jQuery实现的Select下拉框多选菜单效果插件详解》 在网页开发中,Select下拉框是我们经常遇到的一种表单元素,用于提供用户选择的选项。然而,原生的Select下拉框功能较为单一,无法满足一些复杂的交互需求,如...
在"jQuery自定义创建表单项代码"中,我们可以预见到这个压缩包包含了使用jQuery库来增强和实现动态表单创建的功能。jQuery是一个轻量级、高性能的JavaScript库,简化了DOM操作、事件处理和动画效果,极大地提高了...
以下是对自定义表单实现过程和原理的详细说明: 一、表单基础 表单(Form)是HTML中的一个重要元素,用于获取用户输入并提交数据到服务器。一个基本的HTML表单包含`<form>`标签,其中可以嵌套`<input>`、`...
**jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件,它在原生HTML `<select>` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中,使得传统的单选...
总的来说,jQuery自定义时间段特效拖动设置是一个涉及前端交互设计、事件处理和表单提交的综合任务。通过合理地组织HTML结构、运用CSS样式以及利用jQuery提供的功能,我们可以构建出一个高效且用户友好的时间段选择...
这时,jQuery插件`stylish-select`应运而生,它为开发者提供了完全自定义select下拉列表的解决方案。 `stylish-select`是一款基于jQuery的插件,旨在让开发者能够轻松地为select元素添加个性化的外观和交互效果。这...
此时,jQuery multiple-select-master插件就显得尤为重要,它为开发者提供了丰富的自定义选项和美观的界面,极大地提升了用户体验。 一、jQuery multiple-select-master插件简介 jQuery multiple-select-master是...
searchSelect插件常用于大型项目中,如在线表单、用户设置、过滤选择等场景,提升用户在大量数据中选择的效率。结合其他前端框架,如Bootstrap,可以使界面更加美观且功能强大。 **六、注意事项** 1. 确保select...
本插件源码的核心是利用jQuery来实现一个动态的、交互式的国家选择功能,常用于网页表单,特别是涉及国际化的场景。 标题中的"jQuery实现的select下拉框点击国家选择功能插件源码"表明这个压缩包包含了一段用jQuery...
"jQuery自定义表单选择框效果改变平淡无奇的下拉列表.zip"这个资源提供了一种方法,通过jQuery技术让传统的下拉列表变得生动有趣。 jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、...