scriptaculous学习笔记(一)
这两篇文章是我昨天一天的成果。scriptaculous真的是一个很好的类库,不过国内的资料似乎很少(起码我没有搜索到),正好是在学习这个咚咚,写个笔记来记录一下吧。
准备
包含库文件:
<script src="../prototype.js" type="text/javascript"></script>
<script src="../scriptaculous.js" type="text/javascript"></script>
可排序对象
例子:
以下代码将创建一个列表,并且可以拖动排序,每次移动户都将触发一个可以返回列表顺序的函数,并且已经序列化,可以通过Ajax传给服务器端。
例子:
以下代码将创建一个列表,并且可以拖动排序,每次移动户都将触发一个可以返回列表顺序的函数,并且已经序列化,可以通过Ajax传给服务器端。
//建立列表:
<ul id="x">
<li id="item_1">1</li>
<li id="items_2">2</li>
<li d="items_3">3</li>
<li d="items_4">4</li>
</ul>
//开始建立可排序组件
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Sortable.create('x',
{overlap:'horizontal',
ghosting:true,
constraint:false,
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('state').innerHTML = Sortable.serialize(element.parentNode)}
});
这样一个可以排序的列表就作好啦~~恭喜~!
讲解:
其中,Sortable.create()的作用是将这个id=”x”的<UL>转化为可排序控件。第一个参数’x’便是此控件的ID。 花括号{ }内的属性列表是一些预置属性和各种动作的触发函数
:
各个属性的意义:
l overlap : horizontal | vertical指明了列表是水平方向还是垂直方向排列。(在constraint属性中会和此属性有关)
2 ghosting: true | false这个属性指明了拖动行时是否会在原来位置显示虚影占位。
3 constraint: 'vertical' | 'horizontal' | false 这个属性指明了是否会被约束拖动方向。
4 onUpdate:function(sortable){} :update事件将会在完成一次排序行为时(拖动后鼠标松开时)被触发。”sortable”参数中将会传入被绑定的<UL>对象。
5 onChange:function(element){} :此事件将会在鼠标拖动时被触发,每移动一下都将触发此事件。注意:此事件传入的element参数是<UL>下被拖动的<LI>而非整个
<UL>
构造函数中的参数列表:
参数名 初始值 说明
element: element
tag: 'li', // assumes li children,标签内可被拖动的子标签名
dropOnEmpty: false, ??
tree: false, // fixme: unimplemented ??
overlap: 'vertical', // one of 'vertical', 'horizontal'
constraint: 'vertical', // one of 'vertical', 'horizontal', false
handle: false, // or a CSS class ,CSS样式是此handle指定样式的标签部分可拖动如为false则整体可拖.
only: false, ???
hoverclass: null, //被拖入位置的CSS
ghosting: false, //显示残影占位
format: null, //???
onChange: Prototype.emptyFunction,
onUpdate: Prototype.emptyFunction
dropOnEmpty: true //or false 指定此<UL>等可排序区域可否接受其他<UL>中的元素
containment: ["list1","list2"] 当dropOnEmpty设为true,在此参数中设置可接受的列表id
除了构造函数,其余的常用方法:
l Sortable.serialize(sortable) 静态方法。返回一个当前sortable对象的按照排序顺序先后排列序号的字符串:如x[]=1& x[]=2& x[]=3,每一个<Li>的序号通过<li
2 id="item_1">1</li>的下滑线后面的数字指定。下滑线前面的单词在一组排序中应使用一个相同的前缀。不同的组,前缀应该不同。
3 Sortable .destroy(sortable) 静态方法。撤销此对象的排序属性。
常见问题:
当我们给<UL>外面加上DIV,比如<div style=”overflow-y:scroll;height:100px;”>
当我们给<UL>外面加上DIV,比如<div style=”overflow-y:scroll;height:100px;”>
我们会发现页面一团糟了,UL溢出了DIV, 页面乱七八糟。
不用急,在Div的Style中加入 “position:relative;”就解决了<UL>不听指挥的问题。
现在再用一下,拖动有点问题……我们会发现定位不准确了,这是因为没有考虑到滚动条的偏移量。
我们在Sortable的构造函数前加上一句:
Position.includeScrollOffsets = true;
此问题便会迎刃而解~~!哈。
scriptaculous学习笔记(二)
Effect效果对象
下拉效果&上拉效果
scriptaculous学习笔记(二)
Effect效果对象
下拉效果&上拉效果
<div id="d1">
aaaaaaa<p>bbbbbbbbbbbbbbbbb<p>ccccccccccccc<p>
</div>
<a href="#" οnclick="Effect.BlindDown('d1',{});; return false;">BlindDown()</a>
<p>
<a href="#" οnclick="Effect.BlindUp('d1',{});; return false;">BlindUp()</a>
Effect.BlindDown('d1',{})函数的花括号里面{}可以跟参数:
duration:1.0; 这个数字表示动作持续时间。
delay: 0.5 延迟0.5秒再启动效果
如果想让一个Div开始的时候隐藏,点击下拉的时候才拉下,那么只需要将此Div的属性设为:display: none
上滚&下滚效果
这一组函数:
这一组函数:
Effect.SlideUp('d1',{});
Effect.SlideDown('d1',{});
这组函数效果与Blind那一组基本一样,效果粗看起来差不多……我也是细心比较才发现的。原来Blind这一对内容是不会随着上拉或下拉而动的。而Slide中的内容会被拉上或拉下
。
变色闪动效果
Effect.Highlight('d1',{duration:1.5})
Effect.Highlight('d1',{duration:1.5})
此元素将会改变几次颜色并最终返回原来的颜色。
渐变显示效果
Effect.Appear(‘d1’,{})
Effect.Appear(‘d1’,{})
原来的元素初始CSS为display:none,用此效果后渐渐显示,渐变的alpha滤镜效果。
膨胀消失效果
Effect.Puff(‘d1’,{})
Effect.Puff(‘d1’,{})
消失后可以使用Element.show('d1') 再次将元素显示出来。
渐渐消失效果
Effect.Fade('d1')
Effect.Fade('d1')
渐渐显示效果
Effect.Appear('test_img')
Effect.Appear('test_img')
震动效果
Effect.Shake(‘d1’,{})
Effect.Shake(‘d1’,{})
此元素将会左右震动
闪烁效果
Effect.Pulsate('d1',{})
Effect.Pulsate('d1',{})
此函数通过alpha滤镜来进行闪烁。
长大效果
Effect.Grow("d1",
Effect.Grow("d1",
{duration:5.0, direction: 'bottom-right', opacityTransition: Effect.Transitions.linear});
其中:direction 是指的元素从什么方向进入。
如果不指定后面的参数,元素缺省是从下面的中间开始变大。没有alpha效果。
萎缩效果
Effect.Shrink(“d1”,{})
Effect.Shrink(“d1”,{})
长大效果Grow()的相反效果。
Toggle各种效果
汉语里面不知道怎么翻译Toggle,大体意思是:当某物打开的时候触发就关闭,而关闭的时候触发就打开 的一种像”乒乓开关”的行为。这种行为在做页面时特别有用。
汉语里面不知道怎么翻译Toggle,大体意思是:当某物打开的时候触发就关闭,而关闭的时候触发就打开 的一种像”乒乓开关”的行为。这种行为在做页面时特别有用。
Effect.toggle('d2','BLIND')
Effect.toggle('d2',’appear’)
Effect.toggle('d2',’slide’)
…
似乎所有这种有着相反效果的函数都可以在这里设置Toggle, ’BLIND’中的效果名大小写不敏感。
取消效果函数
这几个函数真是乏善可陈……唯一要提的就是关于中止这几个动画过程的函数:cancel()
这几个函数真是乏善可陈……唯一要提的就是关于中止这几个动画过程的函数:cancel()
例如:
effect1=new Effect.SlideUp(‘d1’,{duration:10.0});
想要在这10秒钟中止动画过程: effect1.cancel()
效果队列
这个神秘的queue属性,还有待进一步学习……
这个神秘的queue属性,还有待进一步学习……
function startTimeline() {
// 3x highlight in front
for(var i=0; i<3; i++)
new Effect.Highlight('d3', { duration: 1.0, queue: 'front' });
// insert scale at very beginning
new Effect.Scale('d1', 75, { scaleContent: true, duration: 1.0, queue: 'front' });
// parallel implied, delay 0.5 sec
new Effect.Highlight('d1', { delay: 0.5 });
// puff at end
new Effect.Puff('d2', { duration: 4.0, queue: 'end' });
}