<?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.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.ScrollEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
private function initApp():void{
left.dataProvider=['北京','上海','江苏','江西','湖南','湖北','四川','西藏','新疆'];
right.dataProvider=[];
//'广东','广西','内蒙古','北京','上海','江苏'
}
private function toRightJustSOSO():void
{
var selectItems:Array = left.selectedItems;
var selectIndexs:Array = left.selectedIndices;
var bIsThere:Boolean;
selectIndexs.sort(Array.DESCENDING);
selectItems.sort(Array.DESCENDING);
bIsThere=false;
for( var i:Number = 0 ; i < selectItems.length ; i++ )
{
var rightArray:ArrayCollection=right.dataProvider as ArrayCollection;
for(var j:Number=0; j < rightArray.length ; j++ )
{
if(selectItems[i].toString()==rightArray[j].toString())
{
bIsThere=true;
}
}
if(!bIsThere)
{
ArrayCollection(right.dataProvider).addItem(selectItems[i].toString());
ArrayCollection(left.dataProvider).removeItemAt(selectIndexs[i]);
}
bIsThere=false;
}
}
private function toRightBest():void
{
var selectIndexs:Array = left.selectedIndices;
var bIsThere:Boolean;
selectIndexs.sort(Array.DESCENDING);
bIsThere=false;
var rightArray:ArrayCollection=right.dataProvider as ArrayCollection;
var leftArray:ArrayCollection=left.dataProvider as ArrayCollection;
for( var i:Number = 0 ; i < selectIndexs.length ; i++ )
{
for(var j:Number=0; j < rightArray.length ; j++ )
{
if(leftArray[selectIndexs[i]].toString()==rightArray[j].toString())
{
bIsThere=true;
}
}
if(!bIsThere)
{
ArrayCollection(right.dataProvider).addItem(leftArray[selectIndexs[i]].toString());
ArrayCollection(left.dataProvider).removeItemAt(selectIndexs[i]);
}
bIsThere=false;
}
}
private function toRight():void
{
var selectItems:Array = left.selectedItems;
var selectIndexs:Array = left.selectedIndices;
var bIsThere:Boolean;
bIsThere=false;
for( var i:Number = 0 ; i < selectItems.length ; i++ )
{
var rightArray:ArrayCollection=right.dataProvider as ArrayCollection;
for(var j:Number=0; j < rightArray.length ; j++ )
{
if(selectItems[i].toString()==rightArray[j].toString())
{
bIsThere=true;
}
}
if(!bIsThere)
{
ArrayCollection(right.dataProvider).addItem(selectItems[i].toString());
ArrayCollection(left.dataProvider).removeItemAt(selectIndexs[i]);
}
bIsThere=false;
}
}
private function toLeft():void
{
//var selectItems:Array = right.selectedItems;
var selectIndexs:Array = right.selectedIndices;
var bIsThere:Boolean=false;
selectIndexs.sort(Array.DESCENDING);
var rightArray:ArrayCollection=right.dataProvider as ArrayCollection;
var leftArray:ArrayCollection=left.dataProvider as ArrayCollection;
for( var i:Number = 0 ; i < selectIndexs.length ; i++ )
{
var leftArray:ArrayCollection=left.dataProvider as ArrayCollection;
for(var j:Number=0; j < leftArray.length ; j++ )
{
if(rightArray[selectIndexs[i]].toString()==leftArray[j].toString())
{
bIsThere=true;
}
}
if(!bIsThere)
{
ArrayCollection(left.dataProvider).addItem(rightArray[selectIndexs[i]].toString());
ArrayCollection(right.dataProvider).removeItemAt(selectIndexs[i]);
}
}
}
private function toRight1():void
{
var leftArray:ArrayCollection=left.dataProvider as ArrayCollection;
var rightArray:ArrayCollection=right.dataProvider as ArrayCollection;
var bIsThere:Boolean=false;
for(var i:Number=0; i < leftArray.length ; i++ )
{
for(var j:Number=0; j < rightArray.length ; j++ )
{
if(leftArray[i].toString()==rightArray[j].toString())
{
bIsThere=true;
}
}
if(!bIsThere)
{
ArrayCollection(right.dataProvider).addItem(leftArray[i].toString());
}
bIsThere=false;
}
ArrayCollection(left.dataProvider).removeAll();
}
private function toLeft1():void
{
var leftArray:ArrayCollection=left.dataProvider as ArrayCollection;
var rightArray:ArrayCollection=right.dataProvider as ArrayCollection;
var bIsThere:Boolean=false;
for(var i:Number=0; i < rightArray.length ; i++ )
{
for(var j:Number=0; j < leftArray.length ; j++ )
{
if(rightArray[i].toString()==leftArray[j].toString())
{
bIsThere=true;
}
}
if(!bIsThere)
{
ArrayCollection(left.dataProvider).addItem(rightArray[i].toString());
}
bIsThere=false;
}
ArrayCollection(right.dataProvider).removeAll();
}
]]>
</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="261" y="32" 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="73" label="->>" click="toRight1()" id="bt_allr"/>
<mx:Button x="183" y="114" label="->" click="toRightJustSOSO()" id="bt_r"/>
<mx:Button x="183" y="146" label="<-" click="toLeft()" id="bt_l"/>
<mx:Button x="183" y="178" label="<<-" click="toLeft1()" id="bt_alll"/>
</mx:Panel>
</mx:Application>
结果图片如下：
- 大小: 18.5 KB
分享到：
相关推荐
左右选择器是一种常见的交互设计元素，常用于网页和应用程序中，让用户在两个面板之间进行选择或比较。在本文中，我们将深入探讨左右选择器的设计原理、实现方式以及相关的编程技术。 左右选择器通常由两部分组成：...
本文将深入探讨如何在FLEX中实现双击事件来左右移动表格中的数据，以帮助开发者理解并应用这一功能。 首先，我们要了解FLEX中的数据网格组件（DataGrid或Spark的List或Grid）。这些组件允许我们展示结构化的数据，...
2. **Eclipse与FlexBuilder3集成**：在Eclipse中安装FlexBuilder3插件，可以通过手动指定Eclipse的安装目录或者通过Eclipse的插件管理器添加。无论哪种方式，安装后应在Eclipse的视图中看到Flex相关的视图。 3. **...
1. **伪类选择器**：CSS3引入了更多的伪类选择器，如`:hover`（鼠标悬停）、`:active`（元素被激活）和`:checked`（复选框或单选按钮被选中），这些在滑动按钮的交互过程中起到了关键作用。例如，`:checked`可以用来...
5. **JavaScript库和框架**：在实际开发中，开发者可能会选择使用jQuery或者其他JavaScript库来简化代码，或者利用React、Vue等前端框架来处理组件状态和事件绑定。 6. **响应式设计**：为了确保在不同设备和屏幕...
CSS选择器有多种，包括id选择器、类选择器、标签选择器、相邻选择器、子选择器、后代选择器、通配符选择器、属性选择器、伪类选择器等。其中，id选择器的优先级最高，类选择器次之，标签选择器和伪类选择器的优先级...
1. **伪类选择器**：CSS3提供了`:hover`、`:active`和`:focus`等伪类，使得我们可以为元素在不同状态时设置不同的样式。在这个例子中，`:hover`伪类将被用来触发菜单项的伸缩效果。 2. **过渡效果**（Transition）...
1. **DOM元素选择**：使用jQuery的选择器定位到包含图片的容器元素，例如`<div id="slider"></div>`。 2. **事件绑定**：添加点击事件监听器，当用户点击左右箭头时，触发图片滚动。如： ```javascript $("#left...
1. **jQuery选择器**：jQuery提供了丰富的选择器，如ID选择器(#)，类选择器(.), 元素选择器(元素名)等，用于选取HTML元素，为这些元素添加滑动切换效果。 2. **jQuery事件处理**：如`$(document).ready()`确保DOM...
关键的CSS属性和选择器包括： 1. `display: flex` 或 `grid`：用于创建灵活的布局，便于实现两栏结构。 2. `float`：传统方法，可以将元素浮动到左侧或右侧。 3. `width` 和 `margin`：调整各个部分的宽度和间距。 ...
《CSS样式表手册》是一本全面且实用的CSS（Cascading Style Sheets）参考资料，旨在帮助开发者快速查询和理解CSS的各种属性、选择器以及布局技巧。CSS作为一种样式语言，是网页设计的核心技术之一，用于控制网页元素...
- **选择器**：首先，我们需要选择包含图片的元素，可以是`<div>`、`<ul>`或其他HTML元素。 - **CSS布局**：设置适当的CSS样式，例如使用`display: flex`或`position: absolute`来实现水平滚动效果。 - **事件...
jQuery通过选择器选取HTML元素，然后对这些元素执行各种操作。例如，`$("#myElement")`会选择ID为"myElement"的元素，而`$(".myClass")`则会选择所有class为"myClass"的元素。jQuery提供了如`.click()`、`.fadeIn()`...
选择器的优先级由其类型决定，ID选择器最高，接着是类选择器、属性选择器和标签选择器，最后是行内样式。如果有相同优先级的选择器，后出现的会覆盖前一个。 **四、CSS布局** 1. **浮动布局（Floats）**：通过`...
1. **基础选择器**：包括类型选择器（如`div`）、类选择器（`.class`）、ID选择器（`#id`）和通配符选择器（`*`）。 2. **关系选择器**：利用元素之间的关系来选择，如子选择器（`>`）、后代选择器（空格）和相邻...
1. **减少选择器复杂度**：避免使用过于复杂的选择器，提高渲染速度。 2. **合并样式**：减少HTTP请求，提升页面加载速度。 3. **利用浏览器缓存**：设置合适的`Cache-Control`和`Expires`，利用客户端缓存。 4. **...
在上面的代码中，`.your-selector` 是你需要应用垂直对齐的元素的选择器。`type` 参数指定了对齐方式，而 `nowrap` 控制元素是否允许换行。 值得注意的是，此插件可能不会兼容所有浏览器，尤其是那些不支持CSS3 ...
1. **基本选择器**：包括类型选择器（如`p`、`h1`）、类选择器（如`.classname`）、ID选择器（如`#idname`）等。 2. **组合选择器**：可以将多个选择器组合起来使用，如`.classname p`表示选择所有类名为`...
4. **选择器层次**：更高级的选择器，如伪类(`:hover`, `:active`, `:focus`)、伪元素(`::before`, `::after`)和属性选择器(`[target]`), 提供更精确的样式控制。 **学习资源与实践** CSS手册通常包含以上所有知识...
CSS3引入了许多新的选择器、布局模式和动画效果，这些在滑块特效中起着关键作用。例如，`display: flex`或`grid`可以轻松地实现滑块的布局，使各面板水平或垂直排列。`transition`和`transform`属性则用于创建平滑的...