<!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资源评论
易小侠
- 粉丝: 6628
- 资源: 9万+
最新资源
- 含分布式电源和电动汽车的配电网潮流计算 考虑风光以及电动汽车的出力时序特性 建立风光电动汽车接入的潮流模型 基于IEEE33节点配电网，采用牛拉法求解得到接入之后的潮流分布
- YIKEPHOTOSSetup_1023383_n.apk
- 西南科技C++作业.7z
- 西南科技大学oj的代码合集.7z
- 基于cesium和angular的3维校园地图.7z
- 掌上西科，轻量级西科大常用数据整合工具站.7z
- 定制前台 西南科技大学 信息工程学院.7z
- 西科运动圈后台源码.7z
- SWUST设计模式重构作业 - 扫雷游戏 - 使用TypeScript.7z
- 用于制作node的消息缓冲区.7z
- 模拟登录西南科技大学一站式网上服务大厅，带验证码识别.7z
- 2020年全国水下机器人（湛江）大赛.7z
- windows锁屏后自动断开网络（禁用网络适配器），解锁后恢复网络连接.7z
- 移动端网络连接判断.7z
- DHCPv6 and DHCPv4 packet library, client and server written in Go.7z
- IP地址分配管理系统.7z
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
