转载请注明出处!!
在用户体验方面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 {
width: 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-width: 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-width: 20em;
margin: 0;
padding: 0;
}
.expcol-body li { margin: 0 0 .2em 0; list-style:none; }
.expcol-body li:hover {
background: #ddd;
}
.arc90_multiselect {
width: 12.5em;
height: 1.35em;
visibility: hidden;
}
.a9selectall {
border-bottom: 1px solid #ccc;
}
/* Styles for page layout */
DIV.examples {
margin: 0 0 2em 0;
width: 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.youkuaiyun.com/source/536789