Fixjs实践——标签、按钮控件

<sdt id="89512093" sdtgroup="t" contentlocked="t" sdtlocked="t"></sdt>

Fixjs介绍

Fixjs是一款javascript界面基础框架，主要为开发复杂组件提供底层的框架支持。

Fixjs 0.3.0主要增加了文本显示类fixjs.text.TextField

支持的主要属性/方法有：text，selectable，wordWrap，defaultTextFormat

TextFormat是文本字体样式的数据类，用于封装字体样式属性，例如：font，align，bold，color，size，italic，underline等

标签、按钮控件

标签控件：支持对平、垂直对齐属性设置，能够实现文本在指定的width和height内进行水平对齐(left, center, right)和垂直对齐(top, middle, bottom)

按钮控件：内部包含了一个标签控件，文本居中对齐。采用了css3实现按钮皮肤。

Chrome的显示效果

<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><img alt="" src="https://img-blog.youkuaiyun.com/20130701223142531?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHVua2NhaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"><stroke joinstyle="miter"><formulas><f eqn="if lineDrawn pixelLineWidth 0"><f eqn="sum @0 1 0"><f eqn="sum 0 0 @1"><f eqn="prod @2 1 2"><f eqn="prod @3 21600 pixelWidth"><f eqn="prod @3 21600 pixelHeight"><f eqn="sum @0 0 1"><f eqn="prod @6 1 2"><f eqn="prod @7 21600 pixelWidth"><f eqn="sum @8 21600 0"><f eqn="prod @7 21600 pixelHeight"><f eqn="sum @10 21600 0"></f></f></f></f></f></f></f></f></f></f></f></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"><lock aspectratio="t" v:ext="edit"></lock></path></stroke></shapetype>

IE9的显示效果，ie9不支持渐变背景

IE9兼容模式，连圆角都没了…

在线演示

Fixjs 0.3.0下载

release 0.3.0

--新增功能：新增类fixjs.text.TextFormatAlign

--新增功能：新增类fixjs.text.TextFormat

--新增功能：新增类fixjs.text.TextField

--新增功能：新增静态方法fixjs.text.TextField.measureSize

--新增功能：新增静态方法fixjs.text.TextField.measureHeight

--新增功能：新增类fixjs.LayoutUtil

release 0.2.5

--新增功能：新增全局函数fixjs.util.getPageSize

--新增功能：新增类fixjs.display.Stage

--新增功能：新增类fixjs.display.Sprite

--新增功能：事件注册支持caller参数，派发时设置caller值

--新增功能：事件支持冒泡

Javascript组件/控件技术还是值得深入研究的。

相关文章

Fixjs专栏