`

Flex4学习笔记-左右下拉框的使用,支持双击,单击,拖拽等功能

    博客分类:
  • Flex
 
阅读更多

 

下面是具体代码实现:

 

<?xml version="1.0" encoding="utf-8"?>   
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="450" height="350" creationComplete="initApp()" backgroundColor="#FFFFFF" fontSize="12">    
	<mx:Script>   
		<![CDATA[   
			import mx.events.ScrollEvent;   
			import mx.rpc.events.FaultEvent;      
			import mx.rpc.events.ResultEvent;    
			import mx.controls.Alert;    
			import mx.collections.ArrayCollection;    
			private function initApp():void{   
				left.dataProvider=['广东','广西','内蒙古','北京','上海','江苏','江西','湖南','湖北','四川','西藏','新疆'];   
				right.dataProvider=[];   
			}   
			private function toRight():void  
			{   
				var selectItems:Array = left.selectedItems;   
				var selectIndexs:Array = left.selectedIndices;   
				Alert.show(selectItems.toString()+"---"+left.selectedIndices.toString());   
				if(right.dataProvider == null)    
				{    
					right.dataProvider = new ArrayCollection();    
				}    
				for( var i:Number = 0 ; i < selectItems.length ; i++ )   
				{   
					ArrayCollection(right.dataProvider).addItem(selectItems[i].toString());    
					ArrayCollection(left.dataProvider).removeItemAt(selectIndexs[i]);   
				}   
				
				
			}   
			private function toLeft():void  
			{   
				var selectItems:Array = right.selectedItems;   
				var selectIndexs:Array = right.selectedIndices;   
				//Alert.show(selectItems.toString()+"---"+left.selectedIndices.toString());   
				if(left.dataProvider == null)    
				{    
					left.dataProvider = new ArrayCollection();    
				}    
				for( var i:Number = 0 ; i < selectItems.length ; i++ )   
				{   
					ArrayCollection(left.dataProvider).addItem(selectItems[i].toString());    
					ArrayCollection(right.dataProvider).removeItemAt(selectIndexs[i]);   
				}   
			}   
			
		]]>   
	</mx:Script>   
	<mx:Panel x="0" y="0" width="450" height="350" layout="absolute" title="左右互选">   
		<mx:Label x="7" y="3" text="当前内容"/>   
		<mx:List x="7" y="25" id="left" width="168" height="275" allowMultipleSelection="true"    
				 dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" doubleClickEnabled="true" itemDoubleClick="toRight()">    
		</mx:List>   
		<mx:Label x="243" y="3" text="移动内容"/>   
		<mx:List x="243" y="25" id="right" width="180" height="272" allowMultipleSelection="true"    
				 dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" doubleClickEnabled="true" itemDoubleClick="toLeft()">    
		</mx:List>   
		<mx:Button x="183" y="121" label="-&gt;&gt;" click="toRight()" id="bt_r" width="52"/>   
		<mx:Button x="183" y="178" label="&lt;&lt;-" click="toLeft()" id="bt_l" width="52"/>   
	</mx:Panel>   
</mx:Application>  

 

 

下面是运行的效果:

 



 

  • 大小: 7 KB
分享到:
评论

相关推荐

    uni-app下拉框实现

    uni-app下拉框实现,纯原生写法

    bootstrap-select 下拉框demo(含多种样式)

    bootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-...

    javascript经典特效---下拉框选择背景.rar

    《JavaScript经典特效——下拉框选择背景》 在网页设计中,交互性和用户体验至关重要,而JavaScript作为一种客户端脚本语言,为提升网页动态效果提供了无限可能。本文将详细讲解如何使用JavaScript实现一个经典的...

    layui-多选下拉框-xm-select-demo源码

    4. 如果需要动态加载数据,可以使用layui的异步请求方法,结合xm-select的回调函数进行数据绑定。 值得注意的是,xm-select的源码设计灵活,支持自定义模板,开发者可以根据项目需求定制下拉选项的展示样式。此外,...

    ext-----多选下拉框

    EXT的`ComboBox`支持`remoteGroup`和`remoteSort`等配置,以适应大数据场景。 9. **自定义渲染**: 通过`itemSelector`和`tpl`属性,你可以自定义每个选项在列表中的呈现方式,添加更多视觉元素或者复杂逻辑。 10. ...

    layui-级联下拉框-可配置开启多选-HTML源码

    级联下拉框是一种常见的UI组件,它允许用户在一个下拉框的选择基础上动态加载并显示另一个相关的下拉框,这种联动效果在数据筛选、地区选择等场景中非常常见。 1. HTML基础: HTML(HyperText Markup Language)...

    测试boostrap-select下拉框,下拉框样式

    测试boostrap-select下拉框,下拉框样式

    前端学习笔记,做一个简单的网站-设置下拉框中的默认随机选中项,学习代码

    前端学习笔记,做一个简单的网站-设置下拉框中的默认随机选中项

    jquery--下拉框的实现

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 JavaScript 的操作,包括对DOM(文档对象模型)的处理、事件处理、动画效果以及Ajax交互等。本篇文章将详细探讨如何利用jQuery来实现下拉框的...

    javascript经典特效---下拉框的新特性.rar

    4. 多选下拉框:利用`&lt;select multiple&gt;`属性,可以创建一个允许多选的下拉框。通过JavaScript可以处理多选的逻辑,例如限制可选选项数量,或获取所有选中的选项值。 5. 模拟下拉框:JavaScript库如jQuery和Vue.js...

    AJAX-DWR下拉框级联

    在这个实验中,我们将重点探讨如何使用AJAX和DWR(Direct Web Remoting)来实现这种功能。 首先,我们需要了解AJAX,它是一种不刷新整个网页的情况下更新部分网页内容的技术。通过XMLHttpRequest对象,我们可以向...

    ztree-select下拉框

    `ZTree`不仅提供了一种高效的方式来展示和操作树状数据,还支持多种功能,如搜索、拖拽、多选等。在本案例中,我们关注的是`ZTree`的一个特定应用场景:`ztree-select`,即基于ZTree的下拉选择框。 `ztree-select`...

    react-native 下拉框

    react-native 框架下的下拉框,性能优良,没有bug,可以多选和单选

    bootstrap-select下拉框

    4. **分页**:对于大量选项,可以实现分页显示,避免下拉框过长。 5. **事件监听**:提供多种事件接口,如`changed.bs.select`,方便开发者进行交互逻辑的编写。 6. **可定制样式**:允许自定义主题颜色,与网站整体...

    asp.net控件--下拉框多选

    4. **样式表(CSS)**:为了使控件在视觉上吸引人且易于使用,可能还包括CSS文件来定义控件的外观,如复选框的样式、下拉列表的风格等。 5. **JavaScript和jQuery**:为了实现前端交互,如展开/关闭下拉列表,以及...

    flex组件,功能强大的下拉框

    因此,这个Flex下拉框组件应考虑键盘导航、屏幕阅读器支持等无障碍特性。 8. **跨平台兼容性** 考虑到前端开发的多样性,这个Flex组件应确保在主流浏览器和设备上都能正常工作,包括移动设备和平板电脑。 9. **...

    javascript经典特效---下拉框显示当前时间.rar

    然而,由于下拉框默认不支持动态内容更新,我们通常会借助JavaScript来实现这一功能。 在JavaScript中,我们可以使用`setInterval`函数来定时执行某段代码,例如每秒更新一次当前时间。这段代码可能如下: ```...

    el-select下拉框选择后绑定值改变,显示不变 - 副本.md

    el-select下拉框选择后绑定值改变,显示不变 - 副本

    前端 layui-fromSelects 下拉框多选,搜索

    在本主题中,我们主要探讨的是如何利用 Layui 实现一个功能完备的下拉框选择器,支持多选、搜索以及反选功能。 一、Layui Form Selects Layui 的 Form Selects 是一个强大的下拉选择组件,它不仅提供了基本的单选...

    bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

    在本话题中,我们聚焦于Bootstrap Table的一个扩展功能——可编辑下拉框,这得益于`bootstrap-table-editable`插件的使用。这个插件允许用户在表格的单元格内直接进行编辑,包括选择下拉框中的值。 `bootstrap-...

Global site tag (gtag.js) - Google Analytics