实现 ajax 多项选择框

转载请注明出处!!

在用户体验方面ajax可谓功不可漠,怎样才能很好的利用当前开源的插件来实现我们的功能呢?

这就要求我们要了解国外的开源组织,他们的插件都比较成熟.

这不又遇到了一个ajax多项选择框的实现.感觉挺不错的.下面和大家分享一下.

js:

<script language="javascript" type="text/javascript" src="arc90_multiselect.js"></script>

		<script language="javascript" type="text/javascript">

			// change the default options for all multiselects

			a$.NO_SELECTION	= 'No selection';		// TEXT for 'No selection' when nothing selected

			a$.SELECTED		= 'Options selected';	// TEXT for 'XX Options selected' when over 1 selected

			a$.SELECT_ALL	= 'Select All';			// TEXT for 'Select All' for checkboxes

			a$.SelectAllMin	= 6;					// minimum number of options needed to show 'Select All'

			a$.WhenToUse	= 'class';				// class | multiple | all : for how to make selects become multiselects

			a$.msSeparator	= '|';					// separator for values (can be multiple characters)

		</script>

css:

<style type="text/css">

			@import "http://lab.arc90.com/tools/c/css/tool_global.css";	/* Style for this page */

			

			.a9multiselect {

				 9.9em;

				font-family: Arial, Helvetica, sans-serif;

				position: relative;

				height: 22px;

				padding: 0;

				margin: -.05em 0 1em 0;

				border: 0;

			}

			.a9multiselect .expcol-click, .a9multiselect .expcol-click-open {

				background-color: #fff;

				border: 1px solid #999;

				padding: 0;

				margin: 0;

				cursor: default;

				min- 9.8em;

			}

			.a9multiselect div.expcol-click {

				position: absolute;

				z-index: 104;

				height: 20px;

			}

			.a9multiselect div.expcol-click-open {

				border-bottom: 1px solid #fff;

			}

			.a9multiselect .title { 

				font-size: .8em;

				height: 1.3em;

				line-height: 1.2em;

				overflow: hidden;

				padding: .3em 1.1em .1em .5em;

				background: white url(images/multiselect.gif) no-repeat top right;

			}

			.a9multiselect .title:hover { 

				background: white url(images/multiselect-hover.gif) no-repeat top right; 

			}

			.expcol-body {

				position: absolute;

				z-index: 106;

				min-height: 1em;

				background: #e9f3f8;

				padding: .1em;

				display: block;

				font-size: 75%;

				display: none;

				margin-top: -1px;

				border: 1px solid #999;

			}

			.expcol-body ul {

				overflow: auto;

				min-height: 1em;

				min- 20em;

				margin: 0;

				padding: 0;

			}

			.expcol-body li { margin: 0 0 .2em 0; list-style:none; }

			.expcol-body li:hover {

				background: #ddd;

			}

			.arc90_multiselect {

				 12.5em;

				height: 1.35em;

				visibility: hidden;

			}

			.a9selectall {

				border-bottom: 1px solid #ccc;

			}

			

			/* Styles for page layout */

			DIV.examples {

				margin: 0 0 2em 0;

				 17em;

				border: 1px solid #e9e9e9;

				padding: .3em;

			}

			

			DIV.examples LABEL.examples {

				display: block;

				margin: 0 0 .2em 0;

			}

		</style>
 
 
html:
 
<div class="examples">

				<label class="examples">Second Example of MultiSelect (with width options)</label>

				<select id="methods" name="methods" multiple="multiple" size="4" title="Four" class="arc90_multiselect fieldwidth-20em valuewidth-600px">

					<option value="flex">Flex</option>

					<option value="ajax" selected="selected">Ajax</option>

					<option value="iframes">iFrames</option>

				</select>

			</div>
 
整个方法就是这样.
 
源码下载:http://download.csdn.net/source/536789