转载请注明出处!!
在用户体验方面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