|
|
本帖最后由 rain 于 2014-12-15 13:47 编辑
YUI框架
监听单击事件
<script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>
<script type="text/javascript">
//开始定义一个YUI的沙盒
YUI().use('node', function (Y) {
var node = Y.one("#demo");//通过id获取到目标的DOM
//监听DOM的点击事件
node.on("click", function(e) {
Y.one('#demo').addClass('hello');//通过修改类名来改背景色
});
});
</script>
模拟向左滑动以删除菜单项
<script type="text/javascript">
//开始定义一个YUI的沙盒
YUI().use('node-base','node-event-delegate', 'transition', 'event-move', function (Y) {
//开始监听鼠标滑动的事件
Y.one("#swipe").delegate("gesturemovestart", function(e) {
var item = e.currentTarget, //事件发生的主体
target = e.target, //事件发生的目标
container = e.container,//事件所在容器
//是否为删除的按钮
isDeleteButton = target.hasClass("myapp-delete");
if (!isDeleteButton) {//如果不是点击删除按钮
//把所有的删除按钮都隐藏起来
container.all(".myapp-delete").addClass("myapp-hidden");
//监听鼠标滑动结束事件
item.once("gesturemoveend", function(e) {
//显示当前行的按钮
item.one(".myapp-delete").removeClass("myapp-hidden");
});
} else {//如果是点击了删除按钮
item = target.get("parentNode");//父节点
item.remove();//删除菜单行
}
}, "li", {
preventDefault:true //避免li的默认事件影响我们的逻辑
});
});
</script>
gesturemovestart 监听鼠标滑动开始
网页元素隐藏和显示切换
<script type="text/javascript">
//开始定义一个YUI的沙盒
YUI().use('node', function(Y) {
//监听按钮的点击事件
Y.one("#toggle").on("click", function(e) {
Y.one('#demo').toggleView();//调用YUI的toggle效果函数
});
});
</script>
toggleView() 自动检测元素是否已经隐藏，并切换
层的收缩隐藏
YUI().use('anim', function(Y) {
//创建一个新的动画对象
var anim = new Y.Anim({
node: '#demo .yui3-bd',//应用动画的节点
to: { height: 0 }, //移动到的高度为0
easing: 'backIn' //擦除效果隐退
});
//监听隐藏按钮的点击事件
Y.one('#demo .yui3-toggle').on('click', function(e) {
e.preventDefault(); //避免默认事情行为
anim.run(); //开始运行动画效果
});
});
anim（）动画
层的随意拖动效果
YUI().use('dd-drag', function(Y) {
//创建一个可拖动的对象
var dd = new Y.DD.Drag({
node: '#demo'//指定可以拖动的DOM
});
});
drag() 拖拽效果
随意改变层的尺寸
YUI().use('resize', function(Y) {
//创建一个可以改变尺寸的对象
new Y.Resize({
node: '#demo'//指定可以改变尺寸的DOM
});
});
resize() 改变尺寸
|
|
发表于 2014-10-19 01:43:23
收藏
楼主