`
bigt
  • 浏览: 45571 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

简单的开关组件

阅读更多
更新一个更简单实用的。

OnOff.as
package bigt.comp
{
	import flash.events.MouseEvent;
	import spark.components.supportClasses.SkinnableComponent;
	import bigt.skins.OnOffSkin;
	
	/**
	 * 滑槽里的颜色
	 */
	[Style(name="gapColor", type="uint", format="Color", inherit="no")]

	[SkinState("on")]
	[SkinState("off")]
	[SkinState("onAndDisabled")]
	[SkinState("disabled")]
	
	/**
	 * 不用显式指定控件尺寸。
	 * 如一定要控制尺寸,请按 width:34 height:18 比例缩放
	 */
	public class OnOff extends SkinnableComponent
	{
		public function OnOff()
		{
			super();
			setStyle( "skinClass", OnOffSkin);
			this.addEventListener( MouseEvent.CLICK,
				function(e:MouseEvent):void
				{
					stateOn = !stateOn;
					invalidateSkinState();
				});
		}
		
		/**
		 * 当前开-关状态。
		 * 可作为数据绑定的源。
		 */
		[Bindable]
		public var stateOn:Boolean = false;
		
		override protected function getCurrentSkinState():String
		{
			if ( !this.enabled )
				return this.stateOn? "onAndDisabled":"disabled"; 
			
			if ( this.stateOn )
				return "on";
			else
				return "off";
		}
		
	}
}


OnOffSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx"
		explicitWidth="34" explicitHeight="18" buttonMode="true">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("bigt.comp.OnOff")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			import bigt.comp.OnOff;
		]]>
	</fx:Script>
	
	<!-- states -->
	<s:states>
		<s:State name="on" />
		<s:State name="off" />
		<s:State name="disabled" />
		<s:State name="onAndDisabled" basedOn="on" />
	</s:states>
	
	<s:Path top="1" left="2" right="2" bottom="1" data="M30 8Q30 11.3 27.6 13.65 25.15 16 21.75 16L8.25 16Q4.85 16 2.45 13.65 0 11.3 0 8 0 4.7 2.45 2.35 4.85 0 8.25 0L21.75 0Q25.15 0 27.6 2.35 30 4.7 30 8Z">
		<s:fill>
			<s:SolidColor id="chromeColor"
						  color="#f9f9f9"
						  color.on="{getStyle('gapColor')}"
						  alpha.disabled="0.3" alpha.onAndDisabled="0.3"/>
		</s:fill>
	</s:Path>
	<s:Path top="1" left="2" right="2" bottom="1" data="M30 8Q30 4.7 27.6 2.35 25.15 0 21.75 0L8.25 0Q4.85 0 2.45 2.35 0 4.7 0 8 0 11.3 2.45 13.65 4.85 16 8.25 16L21.75 16Q25.15 16 27.6 13.65 30 11.3 30 8Z">
		<s:stroke>
			<s:SolidColorStroke weight="0" color="#CCCCCC"
						alpha.disabled="0.3" alpha.onAndDisabled="0.3" />
		</s:stroke>
	</s:Path>
	
	<s:Group id="cy" height="100%" width="{cy.height}"
			 x.on="0" x="{this.width-this.height}"
			 alpha.disabled="0.5" alpha.onAndDisabled="0.8">
		<s:Path top="0" left="0" bottom="0" right="0" data="M2.6 15.35Q0 12.7 0 9 0 5.25 2.6 2.65 5.25 0 8.95 0 12.75 0 15.35 2.65 18 5.25 18 9 18 12.7 15.35 15.35 12.75 18 8.95 18 5.25 18 2.6 15.35Z">
			<s:fill>
				<s:SolidColor color="#FFFFFF" />
			</s:fill>
		</s:Path>
		<s:Path top="0" left="0" bottom="0" right="0" data="M2.6 15.35Q0 12.7 0 9 0 5.25 2.6 2.65 5.25 0 8.95 0 12.75 0 15.35 2.65 18 5.25 18 9 18 12.7 15.35 15.35 12.75 18 8.95 18 5.25 18 2.6 15.35Z">
			<s:stroke>
				<s:SolidColorStroke weight="0.2" color="#CCCCCC"/>
			</s:stroke>
		</s:Path>
	</s:Group>
	
</s:Skin>





<?xml version="1.0" encoding="utf-8"?>
<!--
* Author:tuding27@gmail.com
* Release Date: 02-11-2011
*
* 欢迎使用、转载、修改本代码,请保留以上作者信息
-->
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
			xmlns:s="library://ns.adobe.com/flex/spark" 
			xmlns:mx="library://ns.adobe.com/flex/mx"
			buttonMode="true" click="handleClick(event)" styleName="buildIn"
			rollOutEffect="{rollOut}" rollOverEffect="{rollIn}">
	
	<s:layout>
		<s:BasicLayout />
	</s:layout>
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		
		.buildIn{
			color: #002222;
			switchColor:#5588ff;
		}
	</fx:Style>
	
	<fx:Metadata>
		/**
		 * 设置中间隔离按钮的主色
		 */
		[Style(name="switchColor", type="uint", format="Color", inherit="no")]

	</fx:Metadata>
	
	<fx:Script>
		<![CDATA[
			
			override protected function createChildren():void
			{
				// 确定容器视域
				this.scrollRect = new Rectangle( 0, 0, this.width, this.height );
				super.createChildren();
				changeStatus(status);
			}
			
			//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			//		statusLeft
			//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			
			private var _statusLeft:String = "ON";
			
			[Bindable]
			/**
			 * 状态"左"的值
			 * 
			 *  @default false
			 *  @see mx.managers.FocusManager.defaultButton
			 *  @langversion 3.0
			 *  @playerversion Flash 10
			 *  @playerversion AIR 1.5
			 */
			public function get statusLeft():String
			{
				return _statusLeft;
			}

			public function set statusLeft(value:String):void
			{
				if ( value == _status )
					return;
				_statusLeft = value;
			}
			
			
			
			//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			//		statusRight
			//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			private var _statusRight:String = "OFF";
			
			[Bindable]
			/**
			 * 状态"右"的值
			 * 
			 *  @default false
			 *  @see mx.managers.FocusManager.defaultButton
			 *  @langversion 3.0
			 *  @playerversion Flash 10
			 *  @playerversion AIR 1.5
			 */
			public function get statusRight():String
			{
				return _statusRight;
			}

			public function set statusRight(value:String):void
			{
				if ( value == _status )
					return;
				_statusRight = value;
			}
			

			
			//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			//		status
			//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			private var _status:String = _statusLeft;

			[Bindable]
			/**
			 * 当前组件所处状态
			 * 
			 *  @default false
			 *  @see mx.managers.FocusManager.defaultButton
			 *  @langversion 3.0
			 *  @playerversion Flash 10
			 *  @playerversion AIR 1.5
			 */
			public function get status():String
			{
				return _status;
			}

			public function set status(value:String):void
			{
				if ( value == _status )
					return;
				_status = value;
				changeStatus(value);
			}

			
			/**
			 *  @private
			 */
			protected function handleClick(event:MouseEvent):void
			{
				if ( status == _statusLeft )
					status = _statusRight;
				else
					status = _statusLeft;
			}
			
			/**
			 *  @private
			 */
			private function changeStatus( statusNow:String ):void
			{
				if ( statusNow == _statusLeft )
					this.currentState = "left";
				else
					this.currentState = "right";
			}

			[Bindable]
			private var borderColorTmp:uint;
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<s:AnimateColor id="rollIn" target="this" effectStart="borderColorTmp=getStyle('borderColor')"
							 duration="300" colorPropertyName="borderColor" colorTo="{getStyle('rollOverColor')}" />
		<s:AnimateColor id="rollOut" target="this"
							 duration="300" colorPropertyName="borderColor" colorTo="{borderColorTmp}" />
	</fx:Declarations>
	
	<s:states>
		<s:State name="left" />
		<s:State name="right" />
	</s:states>
	
	<s:transitions>
		<s:Transition>
			<s:Move target="{hg}" duration="100" />
		</s:Transition>
	</s:transitions>
	
	<s:HGroup id="hg" gap="0" verticalAlign="middle" height="100%"
				 x.left="{-(this.getStyle('borderWeight')*2+1)}" x.right="{-leftLabel.width+1}">
		<s:Label id="leftLabel" width="{this.width*0.7}" text="{statusLeft}" textAlign="center" />
		<s:Button width="{this.width*0.3}" height="{this.height-this.getStyle('borderWeight')*2}"
					 cornerRadius="{getStyle('cornerRadius')}" chromeColor="{getStyle('switchColor')}" />
		<s:Label width="{this.width*0.7}" text="{statusRight}" textAlign="center" />
	</s:HGroup>
	
</s:BorderContainer>


截图:



DEMO 源码:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx"
					xmlns:iphonelist="iphonelist.*">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	
	<iphonelist:iphoneCheckBox id="c"  x="14" y="30" width="70" height="25" cornerRadius="5"
										backgroundColor="{bgColorSel.selectedColor}"
										borderWeight="{borderWeightStepper.value}" borderColor="{borderColorPicker.selectedColor}"
										switchColor="{switchColorPicker.selectedColor}"
										statusLeft="{statusLeft.text}" statusRight="{statusRight.text}"
										fontFamily="{fontSelector.selectedItem.fontFace}"
										fontSize="{fontSizeStepper.value}"
										color="{fontColorPicker.selectedColor}"
										rollOverColor="{rollOverborderColorPicker.selectedColor}" />
	
	<s:Label x="14" y="80" text="状态值:"/>
	<s:Label x="129" y="77" text="{c.status}" fontSize="20"/>
	
	<s:Panel height="250" x="10" y="106" title="iPhoneCheckBox 外观定制">
		
		<s:layout>
			<s:VerticalLayout />
		</s:layout>
		
		<mx:Form>
			<mx:FormItem>
				<mx:HBox verticalAlign="middle">
					<s:Label text="背景色:"/>
					<mx:ColorPicker id="bgColorSel" showTextField="true" selectedColor="#ffffff" />
					<mx:Spacer/>
					<s:Label text="分隔按钮主色" />
					<mx:ColorPicker id="switchColorPicker" showTextField="true" selectedColor="#5588ff" />
				</mx:HBox>
			</mx:FormItem>
			<mx:HRule width="100%" />
			<mx:FormItem label="边框:">
				<mx:VBox verticalAlign="middle">
					<s:HGroup verticalAlign="middle">
						<s:Label text="宽度:" />
						<s:NumericStepper id="borderWeightStepper" width="35" stepSize="1" maximum="5" value="2" />
					</s:HGroup>
					<s:HGroup verticalAlign="middle">
						<s:Label text="颜色:" />
						<mx:ColorPicker id="borderColorPicker" showTextField="true" selectedColor="#999999" />
						<mx:Spacer/>
						<s:Label text="鼠标悬停颜色:" />
						<mx:ColorPicker id="rollOverborderColorPicker" showTextField="true" selectedColor="#c6001f" />
					</s:HGroup>
				</mx:VBox>
			</mx:FormItem>
			<mx:HRule width="100%" />
			<mx:FormItem label="状态值:">
				<mx:VBox verticalAlign="middle">
					<s:HGroup verticalAlign="middle">
						<s:Label text="左:"/>
						<s:TextInput id="statusLeft" maxChars="4" width="50" text="ON" />
						<mx:Spacer />
						<s:Label text="右:"/>
						<s:TextInput id="statusRight" maxChars="4" width="50" text="OFF" />
					</s:HGroup>
					<s:HGroup verticalAlign="middle">
						<s:Label text="字体:" />
						<s:DropDownList id="fontSelector" width="100" labelField="fontName" selectedIndex="0">
							<s:ArrayCollection>
								<fx:Object fontName="Arial" fontFace="Arial" />
								<fx:Object fontName="Segoe UI" fontFace="Segoe UI" />
								<fx:Object fontName="宋体" fontFace="宋体" />
								<fx:Object fontName="微软雅黑" fontFace="微软雅黑" />
							</s:ArrayCollection>
						</s:DropDownList>
					</s:HGroup>
					<s:HGroup verticalAlign="middle">
						<s:Label text="字体大小:"/>
						<s:NumericStepper id="fontSizeStepper" width="50" value="9" minimum="6" maximum="16" stepSize="0.5" />
						<mx:Spacer/>
						<s:Label text="颜色:"/>
						<mx:ColorPicker id="fontColorPicker" showTextField="true" selectedColor="#002200" />
					</s:HGroup>
				</mx:VBox>
			</mx:FormItem>
		</mx:Form>
	</s:Panel>

</s:Application>

分享到:
评论

相关推荐

    react-switch-component:React.js 的简单开关组件

    "react-switch-component"是一个专门为React设计的简单开关组件,它允许开发者快速地在两个状态之间切换,常用于实现开/关、启用/禁用等逻辑。这个组件的核心理念是提供一个易于使用且定制灵活的解决方案,以满足...

    行业-电子-开关安装件、开关组件、壳体组件及充电装置的介绍分析.rar

    每种开关组件都有其特定的应用场景和操作方式,例如,按钮开关常用于简单的ON/OFF控制,而旋转开关则适用于多档位选择。开关组件的设计和选择需考虑到电流大小、电压等级、使用寿命以及操作频率等因素。 三、壳体...

    行业-电子-开关组件、推动开关和包括推动开关的电子设备的介绍分析.rar

    开关组件和推动开关在电子设备中的应用广泛,是电子工程领域不可或缺的基础部件。本文将深入探讨这两种开关的原理、类型、特点以及它们在各种电子设备中的应用。 首先,开关组件是电子电路中用于控制电流通断的基本...

    Vuejs2切换开关按钮简单漂亮可自定义

    在这个项目中,我们关注的是一个特定的组件——切换/开关按钮。这类按钮通常用于在两个状态之间进行快速切换,如开启/关闭功能、选择是/否等。在Vue.js 2中实现这样的功能,我们可以利用其强大的指令系统和组件设计...

    行业资料-电子功用-包含电弧遮屏的电开关组件的说明分析.rar

    在现代电力系统中,电开关组件扮演着至关重要的角色,其功能主要是控制电路的通断,保证电力系统的安全运行。然而,在高电压和大电流的环境下操作,电开关组件容易产生电弧现象,这种现象如果不被适当控制,会带来...

    jquery 开关插件

    在这个主题下,我们将深入探讨“jQuery开关插件”,这是一种常用于创建切换按钮或者选项开关的组件。 在提供的压缩包中,我们可以看到以下几个关键文件: 1. **index.html** - 这通常是项目的主要入口文件,包含了...

    超级简单键开关电路图_简易单键开关电路

    ### 超级简单键开关电路图解析 #### 一、电路概述 本文将详细介绍一款“超级简单键开关电路”,该电路设计简单且实用性强,适用于广泛的电压范围(4.5V~40V),最大支持19A的电流。这种电路在实际应用中非常常见,...

    swing JToggleButton开关按钮

    在这个场景中,`JToggleButton`被用作一个简单的二态开关,模拟了“开/关”的逻辑。 首先,让我们深入了解一下`JToggleButton`。它是`AbstractButton`类的子类,继承了`JButton`的特性,如图标、文本、事件监听等。...

    jquery开关插件

    这是一个基于jQuery库的小型组件,它的主要功能是在页面上创建一个具有视觉反馈的开关按钮。这个开关通常由两个状态组成,通过点击或滑动进行切换,常用于控制某些功能的开启或关闭,如夜间模式、静音设置等。它的...

    bootstrap switch开关组件使用方法详解

    以下是一个简单的 Bootstrap Switch 开关组件的实例代码: ```html &lt;!DOCTYPE html&gt; , initial-scale=1"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/jquery/jquery.1.11.3.min.js"&gt;&lt;/script&gt; ...

    滑动开关按钮 ios开关按钮

    另一种更便捷的方式是使用第三方库,这些库通常提供了预设的iOS风格滑动开关组件,可以直接集成到项目中。描述中提到的“jar包”可能就是一个这样的库,允许开发者通过简单的API调用来添加和使用滑动开关。例如,...

    axure组件RPLIB 扁平化网页制作组件 组件丰富 适用7.0 8.0 8.5

    在提供的压缩包文件“扁平化动效AxureRPLIB.rplib”中,我们可以期待找到一系列预先设计好的扁平化组件,如按钮、导航栏、图标、表单元素、滑块、切换开关等。这些组件将具有扁平化的视觉风格,并且可能已经预设了...

    用VHDL 实现简单的八路开关试验

    在这个“用VHDL实现简单的八路开关试验”项目中,我们将探讨如何利用VHDL来描述和实现一个能够控制八个独立通道开闭的逻辑电路。 首先,我们要理解八路开关的基本概念。八路开关,顾名思义,就是可以独立控制八个...

    Layui各常用组件使用方法简单示例

    Layui是一款优秀的前端轻量级框架,专为开发者打造,提供了一系列...总的来说,"Layui各常用组件使用方法简单示例"是一个非常有价值的资源,无论你是初学者还是有经验的开发者,都能从中受益,提升你的前端开发能力。

    十键简单电子密码开关

    总的来说,十键简单电子密码开关是一种创新的电子安全组件,其独特的密码输入模式为电子控制提供了额外的安全保障。通过深入理解其工作原理和电路设计,我们不仅可以提升电子技术的知识,还能掌握如何构建更安全、更...

    开关电源的简单原理概述

    ### 开关电源的简单原理概述 #### 一、开关电源概览 开关电源是一种通过电子开关器件快速开启和关闭来转换电源形态的装置。这种转换技术可以实现不同类型的电源形态之间的变化,例如从交流电源(AC)转换为直流电源...

    android之自定义开关控件

    "android之自定义开关控件"这个主题旨在教你如何在Android平台上创建一个类似苹果iOS Toggle的自定义开关组件。以下是对这个主题的详细讲解: 一、基础知识 在Android中,开关系列的控件主要包括Switch和...

    react-reacttoggled构建简单灵活和可访问的切换组件

    对于无障碍性,`react-toggled`确保了开关组件符合ARIA(Accessible Rich Internet Applications)规范。它会自动添加必要的属性,如`aria-checked`和`role="switch"`,以帮助屏幕阅读器用户理解组件的功能。此外,...

Global site tag (gtag.js) - Google Analytics