20110412-.Kuix 的简单的九宫实现

xml：

 

<screen style="layout:gridlayout(3,3);gap:5 5;margin:10;" title="XXX" focusloop="true">

<container  style="align:center;layout:inlinelayout(false, center);" >

<button class="ninebutton" onAction="child(0)"><picture framewidth="50" frameheight="50" framesequence="0" src="XXX.png" /></button>

<picture framewidth="49" frameheight="16" framesequence="0" src="modelStr_student.png" />

</container>

<container  style="align:center;layout:inlinelayout(false, center);" >

<button class="ninebutton" onAction="child(1)"><picture framewidth="50" frameheight="50" framesequence="1" src="XXX.png" /></button>

<picture framewidth="49" frameheight="16" framesequence="1" src="modelStr_student.png" />

</container>

<container  style="align:center;layout:inlinelayout(false, center);" >

<button class="ninebutton" onAction="child(2)"><picture framewidth="50" frameheight="50" framesequence="2" src="modelImg_student.png" /></button>

<picture framewidth="49" frameheight="16" framesequence="2" src="modelStr_student.png" />

</container>

<container  style="align:center;layout:inlinelayout(false, center);" >

<button class="ninebutton" onAction="child(3)"><picture framewidth="50" frameheight="50" framesequence="3" src="XXX.png" /></button>

<picture framewidth="49" frameheight="16" framesequence="3" src="modelStr_student.png" />

</container>

<container  style="align:center;layout:inlinelayout(false, center);" >

<button class="ninebutton" onAction="child(4)"><picture framewidth="50" frameheight="50" framesequence="4" src="XXX.png" /></button>

<picture framewidth="49" frameheight="16" framesequence="4" src="modelStr_student.png" />

</container>

<container  style="align:center;layout:inlinelayout(false, center);" >

<button class="ninebutton" onAction="child(5)"><picture framewidth="50" frameheight="50" framesequence="5" src="XXX.png" /></button>

<picture framewidth="49" frameheight="16" framesequence="5" src="modelStr_student.png" />

</container>

<container  style="align:center;layout:inlinelayout(false, center);" >

<button class="ninebutton" onAction="child(6)"><picture framewidth="50" frameheight="50" framesequence="6" src="modelImg_student.png" /></button>

<picture framewidth="49" frameheight="16" framesequence="6" src="modelStr_student.png" />

</container>

<container  style="align:center;layout:inlinelayout(false, center);" >

<button class="ninebutton" onAction="child(7)"><picture framewidth="50" frameheight="50" framesequence="7" src="modelImg_student.png" /></button>

<picture framewidth="49" frameheight="16" framesequence="7" src="modelStr_student.png" />

</container>

<container  style="align:center;layout:inlinelayout(false, center);" >

<button class="ninebutton" onAction="child(8)"><picture framewidth="50" frameheight="50" framesequence="8" src="XXX.png" /></button>

<picture framewidth="49" frameheight="16" framesequence="8" src="modelStr_student.png" />

</container>

</screen>

 

css:

 

/*九宫按钮*/

.ninebutton {

padding:5;

}

.ninebutton:hover { 

bg-image:url(iconSel.png);

}