<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,下拉列表,下拉选择,列表选择,Mega Select,jQuery插件,JS图片特效,JS广告代码，JS常用代码" />
<meta name="description" content="超强的jQuery下拉选择列表插件Jquery Mega Select List，更多下拉列表,下拉选择,列表选择,Mega Select,jQuery插件代码请访问脚本之家JS代码频道。" />
<title>超强的jQuery下拉选择列表插件Jquery Mega Select List_脚本之家</title>
<link rel="stylesheet" type="text/css" href="images/optional.css">
<style type="text/css">
/* Recommended styles */
.megaselectlistcolumn {
width: 31%;
margin: 0 1%;
float: left;
}
.megaselectlist .currentitem {
padding: 0;
border: 0.1em dotted Green;
color: Black;
}
/* Optional styles */
.megaselectlist {
background-color: #F5F5F5;
border: 1px solid Silver;
}
.megaselectlistcolumn > h2 {
font-size: 1em;
background-color: #ECECEC;
text-align: center;
padding: 2px 0;
margin: 0;
}
.megaselectlist > p {
margin: 0.2em;
}
.megaselectlistcolumn > ul {
padding-left: 1em;
margin: 0;
color: Gray;
}
.megaselectlistcolumn > ul > li {
cursor: pointer;
padding: 0.1em;
font-size: small;
}
.megaselectlistcolumn > ul > li:hover {
background-color: #ECECEC;
color: Black;
}
/* CSS based expand and collapse */
#megaselectlist1 .megaselectlistoptions {
display: none;
}
#megaselectlist1:hover .megaselectlistoptions {
display: block;
}
</style>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<div id="links">
<p>This is the live demo, <a href="http://www.stevefenton.co.uk/Content/Jquery-Mega-Select-List/">view the documentation</a>.
Written by <a href="http://www.stevefenton.co.uk/">Steve Fenton</a>.</p>
</div>
<div id="header">
<h1>Mega Select List Example</h1>
</div>
<div id="maincontent">
<div id="what">
<h2>Summary</h2>
<p>The jQuery Mega Select List is a plugin that converts large select lists into a mega-menu style list of options.</p>
<p>This plugin doesn't affect your form, posting back the selected value as if the options were being selected in a normal select list.</p>
<p>You can animate the mega-select-list using CSS as per this example, or you can have it constantly expanded instead.</p>
</div>
<div id="how">
<p>With CSS Animation</p>
<form method="post" action="">
<fieldset>
<legend>Example 1</legend>
<p><label for="before">This is before</label>
<select name="before" id="before">
<optgroup label="Hampshire">
<option value="1">Andover</option>
<option value="2">Alton</option>
<option value="3">Basingstoke</option>
<option value="4">Fareham</option>
<option value="5">Portsmouth</option>
<option value="6">Romsey</option>
<option value="7">Southampton</option>
<option value="8">Waterlooville</option>
<option value="9">Winchester</option>
</optgroup>
<optgroup label="Dorset">
<option value="9">Blandford</option>
<option value="10">Bournemouth</option>
<option value="11">Christchurch</option>
<option value="12">Ferndown</option>
<option value="13">Poole</option>
<option value="14">Verwood</option>
<option value="15">Wareham</option>
<option value="16">Weymouth</option>
<option value="17">Wimbourne</option>
</optgroup>
<optgroup label="Wiltshire">
<option value="18">Devizes</option>
<option value="19">Frome</option>
<option value="20">Salisbury</option>
<option value="21">Trowbridge</option>
<option value="22">Warminster</option>
<option value="23">Westbury</option>
</optgroup>
</select></p>
<p><label for="example">Select an item</label>
<select name="example" id="example">
<optgroup label="Hampshire">
<option value="1">Andover</option>
<option value="2">Alton</option>
<option value="3">Basingstoke</option>
<option value="4">Fareham</option>
<option value="5">Portsmouth</option>
<option value="6">Romsey</option>
<option value="7">Southampton</option>
<option value="8">Waterlooville</option>
<option value="9">Winchester</option>
</optgroup>
<optgroup label="Dorset">
<option value="9">Blandford</option>
<option value="10">Bournemouth</option>
<option value="11">Christchurch</option>
<option value="12">Ferndown</option>
<option value="13">Poole</option>
<option value="14">Verwood</option>
<option value="15">Wareham</option>
<option value="16">Weymouth</option>
<option value="17">Wimbourne</option>
</optgroup>
<optgroup label="Wiltshire">
<option value="18">Devizes</option>
<option value="19">Frome</option>
<option value="20">Salisbury</option>
<option value="21">Trowbridge</option>
<option value="22">Warminster</option>
<option value="23">Westbury</option>
</optgroup>
</select></p>
<p><input type="submit" value="Submit"></p>
</fieldset>
</form>
<p>With JavaScript animation (click to change)</p>
<form method="post" action="">
<fieldset>
<legend>Example 2</legend>
<p><label for="example2">Select an item</label>
<select name="example2" id="example2">
<optgroup label="Hampshire">
<option value="1">Andover</option>
<option value="2">Alton</option>
<option value="3">Basingstoke</option>
<option value="4">Fareham</option>
<option value="5">Portsmouth</option>
<option value="6">Romsey</option>
<option value="7">Southampton</option>
<option value="8">Waterlooville</option>
<option value="9">Winchester</option>
</optgroup>
<optgroup label="Dorset">
<option value="9">Blandford</option>
<option value="10">Bournemouth</option>
<option value="11">Christchurch</option>
<option value="12">Ferndown</option>
<option value="13">Poole</option>
<option value="14">Verwood</option>
<option value="15">Wareham</option>
<option value="16">Weymouth</option>
<option value="17">Wimbourne</option>
</optgroup>
<optgroup label="Wiltshire">
<option value="18">Devizes</option>
<option value="19">Frome</option>
<option value="20">Salisbury</option>
<option value="21">Trowbridge</option>
<option value="22">Warminster</option>
<option value="23">Westbury</option>
</optgroup>
</select></p>
<p><input type="submit" value="Submit"></p>
</fieldset>
</form>
<p>Please <a href="http://www.stevefenton.co.uk/Content/Jquery-Mega-Select-List/">read the constant footer documentation</a>
for instructions on how to use the plugin.</p>
</div>
<div id="options">
<h2>Options</h2>
<dl>
<dt>classmodifier</dt>
<dd>Used to apply class names to the elements created by the plugin. You only need to specify a class modifier if you have a name-clash.</dd>
<dt>headers</dt>
<dd>If you choose not to use optgroups, you can instead choose to add the headers to an attribute on the option element.
Specify the attribute you have used here, for example "rel".</dd>
<dt>animate</dt>
<dd>Whether the select list should animate or be fixed. Set to "true" to trigger animations.</dd>
<dt>animateevent</dt>
<dd>Specify whether the list should expand on "click" or "mouseover".</dd>
</dl>
</div>
</div>
<
超强的jQuery下拉选择列表插件Jquery Mega Select List.zip （8个子文件） 
132686944631282745 select_list images 
jquery.min.js 70KB jquery.megaselectlist.js 5KB optional.css 1KB
alphalig.png 196B stripe.png 671B alpha.png 196B
index.html 9KB about.html 2KB资源评论
易小侠
- 粉丝: 6600
- 资源: 9万+
最新资源
- 数据库设计管理课程设计系统设计报告(powerdesign+sql+DreamweaverCS)仓库管理系统设计与开发
- Visual Basic 学习教程（入门到实践）
- CocosCreator开发视频教程含源码跳一跳开发教程非Creator开发200M
- 随便写的仓库管理系统.zip,瞎看看就行
- Scratch 学习教程（入门到实践）
- CocosCreator开发视频教程含源码拼图开发3G
- CocosCreator开发视频教程含源码简易塔防开发3.61G
- 对数据集进行二分类，有数据集和源码以及模型，二分类是识别猫和不是猫的情况，可做毕业设计
- CocosCreator开发视频教程含源码多段线拖动轨迹物体2G
- Delphi 学习教程（从入门到实践）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
