发新话题
打印

[分享] LIST组件使用总结

LIST组件使用总结

第一节、首先,看看是如何将数据添加进LIST组件中,以及如何显示鼠标点击的对象。
1、静态生成方法:
my_list.addItem("labe"l,data);
实例:新建文件,将LIST组件拖至场景中。并将LIST组件的实例名称修改为“my_list”,在第一帧添加如下代码:
复制内容到剪贴板
代码:
System.useCodepage=true;
var my_list:mx.controls.List;
my_list.addItem({label:"Gordon", data:123});
my_list.addItem({label:"英国", data:456});
my_list.addItem({label:"中国", data:888});
如果想测试效果,可以再在AS代码中多添加几个。。。
实例演示:

源码下载:http://www.taoshaw.com/flash/list/lesson1.rar
2、动态生成方法(通过加载XML,将数据添加进LIST):
实例:新建文件,将LIST组件拖至场景中。并将LIST组件的实例名称修改为“my_list”,在第一帧添加如下代码:
复制内容到剪贴板
代码:
//解决乱码的问题...
System.useCodepage = true;
//定义doc_xml为XML类;
var doc_xml:XML = new XML();
//忽略空格.
doc_xml.ignoreWhite = true;
doc_xml.onLoad = _root.xmlload;
//初次加载文件为"renming.xml"...
_root.doc_xml.load("renming.xml");
function xmlload() {
var childnodes = this.firstChild.childNodes;
//防止垒加,这句话的含义就是让my_list每次加载的XML不一样。
_root.my_list.removeAll();
for (var i:Number = 0; i<childnodes.length; i++) {
  _root.my_list.addItem(childnodes[i].attributes.label, childnodes[i].attributes.data);
}
}
3、通过按钮点击,分别加载不同的XML文件。
复制内容到剪贴板
代码:
//定义地名按钮被激发时,加载地名。。。
diming.onRelease = function() {
_root.doc_xml.load("diming.xml");
};
renming.onRelease = function() {
_root.doc_xml.load("renming.xml");
};
shijian.onRelease = function() {
_root.doc_xml.load("shijian.xml");
};
4、调用被鼠标点击后的对象,以及调用该对象的数据:
复制内容到剪贴板
代码:
_root.onEnterFrame = function() {
show_txt_label = _root.my_list.selectedItem.label;
show_txt_data = _root.my_list.selectedItem.data;
};
my_list.selectedItem.label;my_list.selectedItem.data;
第一节中2-4步的所有例子如下:
http://www.taoshaw.com/flash/list/lesson2.html
2-4步的所有源码下载:http://www.taoshaw.com/flash/list/lesson2.rar
第二节、关于LIST组件的相关操作。
1、删除LIST组件列表中的所有项:
复制内容到剪贴板
代码:
_root.my_list.removeAll();
方法;删除列表中的所有项。
调用此方法会修改 List 组件的数据提供程序。如果与其它组件共享数据提供程序,则那些组件也会更新。
当按下按钮时,以下代码将会清除 List 组件中的所有项。
2、删除当前所选项目:
List.removeItemAt()
复制内容到剪贴板
代码:
var n:Number=_root.my_list.selectedIndex;
_root.my_list.removeItemAt(n)
3、上一个、下一个选择方法:
复制内容到剪贴板
代码:
selIndex = _root.my_list.selectedIndex;
_root.my_list.selectedIndex = ((selIndex == 0) || (selIndex == undefined) ? _root.my_list.length-1 : selIndex-1);
  //让滚动条跟随
_root.my_list.vPosition = selIndex-2;
//每次减一,如果项目为第一项或undefined,则从倒数最后一项开始,Flash的算法中,0 是第一项,length-1 则为最后一项
if (selIndex == 0 || selIndex == undefined) {
  _root.my_list.vPosition = _root.my_list.length-1;
第二节中1---3的实例:
演示:
http://www.taoshaw.com/flash/list/removeAll.html
源码:
http://www.taoshaw.com/flash/list/removeAll.fla
//本文件中加载的XML文件在上一步骤中有。下同。。。
4、将一个LIST中的数据添加进另一个LIST数据:
复制内容到剪贴板
代码:
//以下是将左侧数据添加进右侧LIST列表中。。。
var newobj = new Object();
_root.my_list.addEventListener("change",newobj);
j = 0;
arr_3 = new Array();
arr_4 = new Array();
//以下判断是否重复选择============
var label_arr:Array = new Array();
//检测是否有重复的Label值
function checkRepeat(v) {
var isRepeat:Boolean = false;
var len:Number = label_arr.length;
for (var i = 0; i<len; i++) {
  if (v == label_arr[i]) {
   isRepeat = true;
   break;
  }
}
return isRepeat;
}
//========================
//点击选择单项
newobj.change = function(num) {
var newobject = num.target.selectedItem;
arr_3[j] = newobject.label;
arr_4[j] = newobject.data;
if (checkRepeat(arr_4[j]) == false) {
_root.my_listother.addItem({data:arr_4[j], label:arr_3[j]});
  label_arr.push(arr_4[j]);
} else {
  already_select.gotoAndPlay(2);
}
j++;
};
5、点击按钮,将一个LIST中所有项目添加进另一个LIST中。
复制内容到剪贴板
代码:
show_db_menu = function () {
if (_root.my_list.selectedIndex>=0) {
  _root.my_list.selectedIndex = undefined;
}
//这里是关键,如果当前已有选项,则取消选择,以便下面for循环发挥作用。                 
for (i=0; i<(_root.my_list.length); i++) {
  var selIndex = _root.my_list.selectedIndex;
  _root.my_list.selectedIndex = ((selIndex == undefined) ? 0 : selIndex+1);
  //如果当前没有选项则从第一项开始,flash递增算法中,0就是1,每次加一直到末尾com_box.length
  var newobject_menu = _root.my_list.selectedItem;
  arr_3[j] = newobject_menu.label;
  arr_4[j] = newobject_menu.data;
  if (checkRepeat(arr_4[j]) == false) {
   _root.my_listother.addItem({label:arr_3[j], data:arr_4[j]});
   label_arr.push(arr_4[j]);
  }
  j++;
}
};
第二节中4----5步骤。
实例:http://www.taoshaw.com/flash/list/onetoother.html
源码:http://www.taoshaw.com/flash/list/onetoother.fla
6、在Flash 的 List 组件每行列表文字前加图标:
复制内容到剪贴板
代码:
var labelname = ["淘沙网", "沙子", "taoshaw", "大浪淘沙"];
var ico_mc:Array = new Array();
list.iconField = "icon";//设置对象数组中作为图标的标识符,非链接属性
for (var i = 0; i<4; i++) {
ico_mc.addItem({label:labelname[i], icon:"ico" + i});//如需统一图标,这里写成 icon:"ico0",相应更改库中影片的链接属性
}
list.dataProvider = ico_mc;
实例:http://www.taoshaw.com/flash/list/listico.html
源码:http://www.taoshaw.com/flash/list/listico.fla

[ 本帖最后由 taoshaw 于 2007-12-19 16:14 编辑 ]

TOP

7、LIST组件的美化。
关于LIST组件样式的美化(包含修改滚动条样式等):
实例:

源文件下载:
http://www.taoshaw.com/flash/listmeihua.rar
代码如下:(LIST实例名为:“clList”)
复制内容到剪贴板
代码:
import mx.controls.List;
import mx.controls.scrollClasses.ScrollBar;
ScrollBar.prototype.scrollTrackName="mc1";
ScrollBar.prototype.thumbMiddleName="mc2";
ScrollBar.prototype.thumbBottomName="mc2";
ScrollBar.prototype.thumbTopName="mc2";
ScrollBar.prototype.thumbGripName="mc3";
ScrollBar.prototype.upArrowUpName="mc4";
ScrollBar.prototype.upArrowOverName="mc4";
ScrollBar.prototype.upArrowDownName="mc4";
ScrollBar.prototype.downArrowUpName="mc5";
ScrollBar.prototype.downArrowOverName="mc5";
ScrollBar.prototype.downArrowDownName="mc5";
var clList:List;
clList.setStyle("borderStyle","none");
复制内容到剪贴板
代码:
//upArrowUpName  向上和向左按钮的弹起(正常)状态。默认值为 ScrollUpArrowUp。

upArrowOverName  向上和向左按钮的滑过状态。默认值为 ScrollUpArrowOver。

upArrowDownName  向上和向左按钮的按下状态。默认值为 ScrollUpArrowDown。

downArrowUpName  向下和向右按钮的弹起(正常)状态。默认值为 ScrollDownArrowUp。

downArrowOverName  向下和向右按钮的滑过状态。默认值为 ScrollDownArrowOver。

downArrowDownName  向下和向右按钮的按下状态。默认值为 ScrollDownArrowDown。

scrollTrackName  用于滚动条的轨道(背景)的元件。默认值为 ScrollTrack。

scrollTrackOverName  用于滑过滚动轨道时的轨道(背景)的元件。默认值为 undefined。

scrollTrackDownName  用于按下滚动轨道时的轨道(背景)的元件。默认值为 undefined。

thumbTopName  滚动框(滑块)的顶端和左端。默认值为 ScrollThumbTopUp。

thumbMiddleName  滑块的中间(可扩展)部分。默认值为 ScrollThumbMiddleUp。

thumbBottomName  滑块的底端和右端。默认值为 ScrollThumbBottomUp。

thumbGripName  显示在滑块之上的抓手。默认值为 ScrollThumbGripUp。
8、关于LIST组件样式的设置参考:
http://doc.51windows.net/FlashHe ... 4_components91.html
http://doc.51windows.net/FlashHe ... 4_components98.html
http://www.5460.net/gy5460/jsp/article/dispArt.jsp?dNum=535270
List组件样式属性
复制内容到剪贴板
代码:
      backgroundColor                 背景色

      backgroundAlpha                 背景色透明度                          数值从0.00~1.00

      useRollOver                     是否使用鼠标经过List每一项时产生效果   true  false

      rollOverColor                    鼠标经过每一项时的背景色              useRollOver为

true时有效

      textRollOverColor               鼠标经过每一项时的文字颜色             useRollOver为

true时有效

      alternatingItemColors            List中间隔背景色                这个属性要设置2个色

彩,某一项的背景色和下一项的背景色

      color                            选项文本颜色

      selectionColor                   被选中项的背景色  

      textSelectedColor                被选中项的文字颜色



      textIndent                       选项文本缩进距离

      selectionDuration                被选中项渐变速度                  被选中项背景色变为

selectionColor中的值的速度,设置可实现渐变效果  数值从0~5000  值越大,渐变速度越慢

      borderStyle                    边框样式                       none  solid  inset  

outset

      borderColor                    边框颜色

      borderThickness                边框粗细                       数值从0~20

      dropShadowEnabled              是否显示投影                  true和false 2个属性

       shadowDistance                投影大小             dropShadowEnabled为true时有效  数

值从0~20

       shadowDirection               投影方向             3个属性 left  right  center

       dropShadowColor               投影的颜色
9、怎么能把list组件的边去了?
//my_list为LIST组件在场景中的实例名称。
_root.my_list.setStyle("borderStyle", "none");

10、为LIST组件指定交替模式中行的颜色:
//直接粘贴此行。。。是固定模式。。。
_global.styles.ScrollSelectList.setStyle("alternatingRowColors", [0xFF00AA, 16777215])

原文出处:http://www.taoshaw.com/taoshaw/article.asp?id=1299

[ 本帖最后由 taoshaw 于 2007-12-19 16:22 编辑 ]

TOP

TOP

真详细
先收下了

TOP

有没有教我怎么使用FLASH。我对这个一点都不懂,有没有好心人帮忙指点指点哦。
楼主啊你说的LIST组件是什么意思哦。能教教我吗???     谢谢喽~~~~!!!!
  希望能加我QQ哦。我好当面请教~~!!173577209

TOP

这种无私奉献的精神非常值得鼓励
一直在做最最最基础的工作......

TOP

谢谢

TOP

正好要研究这个明天早上再细看```

TOP

其实写得还不够详细。。。还有一些东西没有写上去,比如LIST+数组跟SharedObject结合等。。。
希望各位朋友有补充的,还一起分享一下。呵呵。共同学习,共同进步。。。

TOP

TOP

收藏了,谢谢提供分享

TOP

ckhxlt.blog.163.com

TOP

ffddfsfdsfdsdfs

ef

TOP

发新话题