不名一格

Y.Postip基于YUI3的相对提示组件(ToolTip)

作者：idd.chiang 发布时间：April 11, 2010 分类：Javascript/AS,YUI/Jquery/mootool

鼠标事件触发隐藏tip显示经常遇到，表现形式多种多样，无外乎都是鼠标触碰或点击一个元素（给他个名字：触发者），弹出或新建一个元素，类似Tooltip一样，暂称新元素为“被激活元素”，被激活元素的出现位置绝大部分都是以相对于触发者位置出现，所以，在Y.Postip的实例化中，放出相对于触发者的25个位置可以设置，并允许对默认位置进行自定义距离的设置。

先看看Y.Postip例子

纠结了一下被激活元素的内容该如何展现，为了使用途广泛一些，可以设置被激活元素是自定义内容，也可以是某个dom对象，同时为了能让被激活元素的UI能灵活设置，又放出className能自定义。

阅读剩余部分...

基于YUI3的Slider自动轮播幻灯组件Y.Slider

作者：idd.chiang 发布时间：March 26, 2010 分类：Javascript/AS,YUI/Jquery/mootool

刚开始学写些YUI3的widget，看到很多人用Jquery实现Slider，Jayli也用YUI3写过Slider+Tab的控件，鉴于自己也常用到这个小玩意儿，索性写一个。

曾经看到过flash的Slider对于翻页时候的切换效果是对被切换的那页进行动画，渐隐然后飞走，这个效果我一直念念不忘，当然，这个效果被我做组件中去了。这个组件的Dom基本结构是相对固定，属于常用幻灯HTML结构，配置可对切换方式（effect）、动画类型（animtype）、每帧停留时间（delay）、是否自动播放（autoplay）、鼠标处理换帧方法（eventype）等进行设置；同时提供Y.Slider对象方法有停止stop(),播放start(),上一帧pre(),下一帧next()，跳转至n帧view(n-1)；下面介绍下怎么使用这个幻灯组件，直接查看Demo：

1.HTML基本结构如下

<div class="sliderbox" id="demo1">
	<div class="sb-window">
		<div class="img-roll">
		<a href=""><img src="img/roll1.jpg" alt=""/></a>
		<a href=""><img src="img/roll2.jpg" alt=""/></a>
		<a href=""><img src="img/roll3.jpg" alt=""/></a>
		<a href=""><img src="img/roll4.jpg" alt=""/></a>
		</div>
	</div>
	<div class="sb-paging">
		<a href="#" rel="1" class="active">1</a>
		<a href="#" rel="2">2</a>
		<a href="#" rel="3">3</a>
		<a href="#" rel="4">4</a>	
	</div>
</div>

其中id=demo1是在Y.Slider构造时用作hook；

阅读剩余部分...

YUI3仿苹果风格图标滑出导航菜单

作者：idd.chiang 发布时间：February 8, 2010 分类：Javascript/AS,YUI/Jquery/mootool

IE7、FF3.5、safari、opera、chrome下测试通过，IE8无环境未测。

苹果风格的导航是比较炫酷的，用YUI3模仿这种导航风格。当鼠标移至菜单上，图标上移至顶部，然后滑动至展示区；鼠标移出时，图标移至导航下方，滑动至菜单后隐藏。

Tutorial:示例

» 首先我们来看看HTML：

<div class="navigation">
    <ul class="menu fl" id="menu">
        <li><span class="game"><br/></span><a href="#" class="first">Game</a></li> 
        <li><span class="water"><br/></span><a href="#">Water</a></li> 
        <li><span class="code"><br/></span><a href="#">Coding</a></li> 
        <li><span class="tools"><br/></span><a href="#">ToolsBox</a></li> 
        <li><span class="curve"><br/></span><a href="#">Curve</a></li> 
        <li><span class="options"><br/></span><a href="#" class="last">Options</a></li> 
    </ul>
</div>

span是icon图标，用作动画使用。当鼠标移上A标签时，触发动画。这里不能用Event.addListener 和 Event.on方式去侦听事件，因为icon动画时会移至A标签上层，导致监听对象发生变化，用relatedTarget判断span标签也会触发多次mouseover和mouseout。
所以，将鼠标事件的触发给LI是最好的办法，li内的元素仅用作动画展示，不绑定如何事件。这里用到delegate，将事件指派给#menu下的li

» 导航的CSS

.navigation{
    position:relative; /*IE hidden need*/
    overflow:hidden;/*Hiding*/
    padding-bottom:100px;/*Icon Showcase*/
    _zoom:1; /*For Ie6 hack*/
}
ul.menu{
    border:1px solid #b0b0b0; 
    border-width:0 1px 0;
    position:relative; /*zIndex need*/
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
ul.menu li{
    float:left;
    position:relative; 
}

阅读剩余部分...

YUI2.8本地存储组件SWFStore使用方法

作者：idd.chiang 发布时间：February 5, 2010 分类：Javascript/AS,YUI/Jquery/mootool

YUI2.8推出时新增了一个 SWFStore，用于解决客户端本地存储数据，使用FlashPlayer（注意：这不是可视化组件，一般不要求可见的SWF），并且有离线跨浏览器跨域共享数据、存储数据远远超过Cookie、数据加密等优点。

使用方法：

1.实例化swfstore时，应放置一个容器作为预留位，一般会设置宽、高为0，因为这个纯粹功能组件不需要界面；

<div id="swfstoreContainer" style="width:0px; height:0px;"></div>

实例化swfstore

//实例化swfstore
var swfstore = new YAHOO.util.SWFStore("swfstoreContainer", true, true);

2. swfstore.swf 文件应放在实例化组件出现的相同目录，服务器上必须留一副本；
获取swfstore.swf 右键另存为
指定SWFURL时：

YAHOO.util.SWFStore.SWFURL = "swfstore.swf";//地址

3.跨域时需要在swfstore.swf同级目录下编辑名为 storage-whitelist.xml 的文件，格式如：

<url-policy>
	<allow-access-from url="www.mail.yahoo.com" /> 
	<allow-access-from url="www.yahoo.com" /> 
	<allow-access-from url="www.microidc.com" />
</url-policy>

这里编辑了一个简单的SWFStore使用示例：
SWFStore示例

官方文档：
swfstore 官方示例