Flex 作出 像迅雷看看 一样的 视频排行效果,要求鼠标移动上去会显示详细信息
效果如图:
说明:使用的空间就是datagrid
要注意的是:1.VBox 是可以自动 布局 产生缩放效果的
2· DataGrid 有一个属性 variableRowHeight="true" 可以让DataGrid 的行宽随子组件而改变
3·DataGrid 控制单元格最好 单独定义组件 这点 我另写一个帖子介绍
代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml
" layout="absolute" height="349" width="180" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:ArrayCollection id="goodList">
<mx:Object name="小太阳" singer="五月天" source="1.mp3" special="小太阳" renqi="22"/>
<mx:Object name="画心" singer="张靓颖" source="2.mp3" special="电影画皮主题曲" renqi="22"/>
<mx:Object name="曹操" singer="林俊杰" source="3.mp3" special="JJ最新单曲" renqi="22"/>
<mx:Object name="U And Me" singer="羽泉" source="4.mp3" special="朋友难当" renqi="22"/>
<mx:Object name="原谅" singer="张玉华" source="5.mp3" special="张玉华同名专辑" renqi="22"/>
<mx:Object name="勇气" singer="梁静茹" source="6.mp3" special="勇气" renqi="22"/>
</mx:ArrayCollection>
<mx:Canvas width="179" height="594" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:DataGrid id="secipal" x="0" y="0" dragEnabled="true" height="348" width="100%" selectable="false"
alternatingItemColors="[#0A0A0A, #0A0A0A]" showHeaders="false" headerColors="#666060" dataProvider="{goodList}"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn headerText="" dataField="musicName">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off" creationComplete="init()"
autoLayout="true">
<mx:Script>
<![CDATA[
[Bindable]
private var hid:int;
[Bindable]
private var cor:uint;
private function init():void{
hid=this.parentDocument.goodList.getItemIndex(data);
trace(hid);
if(hid<3){
cor = 0xfc4a04 as uint;
}else{
cor = 0x777575 as uint;
}
}
private function showmore():void{
h1.height = 0;
h2.height = 103;
this.height = 103;
}
private function hidenmore():void{
h1.height = 25;
h2.height = 0;
this.height = 30;
}
]]>
</mx:Script>
<mx:HBox id="h1" verticalAlign="middle" width="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"
mouseOver="showmore()" mouseOut="hidenmore()">
<mx:Spacer width="30" />
<mx:TextInput width="17" color="#FFFFFF" text="{hid+1}"
backgroundColor="{cor}" textAlign="center" editable="false"
fontWeight="bold"/>
<mx:Label color="#9a9a9a" text="{data.name}" height="25" width="100%" fontSize="13" textAlign="center"/>
</mx:HBox>
<mx:Canvas x="206" y="81" width="100%"
backgroundColor="#050505" horizontalScrollPolicy="off"
verticalScrollPolicy="off"
id="h2" mouseOver="showmore()" mouseOut="hidenmore()" height="0" backgroundAlpha="1">
<mx:Image x="0" y="0" width="77" height="103" source="{data.source}"/>
<mx:TextInput id="tet1" x="85" y="0" width="17"
color="#FFFFFF" text="{hid+1}" backgroundColor="{cor}" editable="false"
fontWeight="bold"/>
<mx:Text x="110" y="0" text="{data.name}" color="#FCFCFC" fontWeight="bold" fontSize="12"/>
<mx:Text x="85" y="28" text="人气:" color="#CF4925" fontSize="11" width="44"/>
<mx:Text x="120" y="28" text="{data.renqi}" width="97" color="#E5591B" fontSize="11"/>
<mx:Text x="85" y="55" text="作者:" color="#C3C0BF" fontSize="11" width="44"/>
<mx:Text x="120" y="55" text="{data.singer}" width="97" color="#BEBAB8" fontSize="11"/>
<mx:Text x="85" y="75" text="共{data.renqi}集" color="#ACAEAE"/>
</mx:Canvas>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
</mx:Application>
分享到:
相关推荐
Jquery自定义插件经典参考,为个人在项目开发中依据需要定制开发基于html代码...一行 dataGrid = $("#dg").xpDataGrid({"bgcolor":"blue","rowWidth":50,"rowHeight":22});即可达到效果。即查学习的经典与实用的经典。
javascript模仿EXT效果的datagrid
easyui-datagrid之间拖拽效果demo
jeasyui-datagrid-datagrid 开发参考
WPF DataGrid 拖拽实现
DataGrid中嵌套DataGrid,修改后也适用DataGrid中嵌套DataList,DataList中嵌套DataList
2.0DataGrid嵌套DataGrid,里面的鼠标滚动响应到外部,利用自定义命令传递滚轮事件参数实现,详细效果请移步: https://blog.csdn.net/u010438205/article/details/105710794
DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题
System.Windows.Controls.DataGrid DataGrid = dataGrid1; string file = "C:Users\\Administrator\\Desktop\\qb"; Export(DataGrid, file); } public static void Export(System.Windows.Controls.DataGrid...
WPF中的DataGrid合并单元格,模板列内嵌套DataGrid,非真正合并
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
通过将DataGrid保存在.xps文件中,实现对DataGrid数据的打印
wpf的DataGrid中,添加某一列的合计,并在最下方固定显示。本列子不使用ToolKit(有3.5和4.0的限制),添加一个类,重写DataGrid。可以在DataGrid上下左右绑定一个DataGrid,类似Footer属性。示例可直接运行,简单...
自己写的一个小例子,关于实现datagrid逐行显示的例子,类似于滚动新闻。粗糙
支持datagrid扩展,在一条记录下面可以嵌套一个子datagrid,切记要在页面中引入该js
需要一个对datagrid控件进行的操作,不需要别的界面,自己动手做了一个。 本例子是wpf中datagrid的增加修改,对于datagrid中的canuseraddrows=true,对当前空白行进行的添加数据,修改时,鼠标离开焦点可自动更新...
图片是在XP下截的,所以看不出效果,在Win7下效果好点.其中的DataGrid分页绑定控件方法只要传入被绑定的DataGrid对象和数据源就可以绑定了,操作简单.
easyui datagrid 嵌套datagrid form 简单提交 ,刷新子表数据
自定义的 DataGrid样式自定义的 DataGrid样式
经典WPF DEMO,含datagrid,textbox等,第三方控件