• 实现 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
  • 相关阅读:
    开始学习Oracle
    Oracle失败──用户错误
    2.1.1 数据库文件
    Oracle──网络失败
    再向前迈一步
    CSDN、CNBLOGS使用Windows Live Writer客户端发布日志时相关配置
    1.2 备份与恢复基础
    Oracle失败──用户进程失败
    Oracle失败类型
    MAC地址 正则表达式
  • 原文地址:https://www.cnblogs.com/fengju/p/6174045.html
Copyright © 2020-2023  润新知