2008 2008年 12月 9日

简单的传送带分页使用的是MooTools

随着各种有旋转木马,以及MooTools的很多,我还是决定写我自己的传送带类,一些很好的理由
1。 想要一个寻呼功能(能够跳到一个特定的幻灯片/传送带一步)。
2。 要安置的左,右按钮/链接的自由,我曾经请。
3。 在幻灯片的步骤更多的控制权。

我设法创建一个新的传送带,具有上述特点如下...随意提出的任何修改,你会需要!!!

我的例子看起来像... [ 查看演示 ]
随着寻呼Mootools的传送带

观看演示 | 下载MooTools的传送带寻呼版本1.0 (下载1999年)


1。 传送带寻呼

你可以很容易地添加分页到您的转盘,只需通过设置分页标志,这是最后parater通过创建的真实MooCarousel的实例(要分页)或false(donot想分页)。

VAR carousel1 =,新MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft',的carousel1_moveright',c_ns,c_sss, 真正 ); / / NS =幻灯片,SSS =滑动步长

当然你可以通过修改它们的CSS改变外观这些寻呼achors的N-觉得你请。

carousel_paging {文本对齐:权利;保证金:5PX 10px 0 0;}
。carousel_paging电流,carousel_paging页{概要:无;宽度:。均为15px;高度:均为15px;线高度:均为15px;文本对齐:中心;显示:块;浮动:左;背景:#D8D8EB;保证金:0 1px的0;文字装饰:无;}

。carousel_paging:悬停,carousel_paging当前{背景:#4D4D9B;颜色:#FFFFFF;}。

好吧! 虽然是一个小问题,如果设置分页锚,然后将得到产生总是在旋转木马组件。 我想动态,以及,但只是为了让吹出来的比例脚本,我决定跳过它。
但你知道一点点的JavaScript,你可以很容易地修改在MooCarousel类传呼代码,请您的需求。

2。 订制左,右的图标

只需打的CSS,你可以改变位置,图像或任何displat财产的左,右按钮。 是能够改变的“左”和右的buttoms存款是我的权利我传送带类的真正原因。
以来这个MooCarousel类,接受这些按钮的ID,你可以把这些按钮在页面上的任何地方,如果你愿意,它并不一定要在元素层次,因为在我的例子。

VAR carousel1 =,新MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft',的carousel1_moveright',c_ns,c_sss,真正);

的CSS
carousel_container_l,carousel_container_r {保证金:50像素0 0 0;位置:亲属;宽度:23px;高度:20像素;浮动:左;光标:指针;}

carousel_container_r {背景位置:0-38px;}

carousel_container_l {背景位置:0-58px;}

3。 自定义幻灯片步骤

这是什么意思我自定义幻灯片的步骤?
大多数传送带滑动完整的可视窗口。 所以说,你有四个项目(如我上面的样品),它会滑动的所有四个项目。 有了这个转盘组件,通过幻灯片的数量和您选择的步长。

VAR carousel1 =,新MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft',的carousel1_moveright',c_ns,c_sss,真正);
c_ns =数量的幻灯片,c_sss =滑动步长

此外,在我的例1,我calcuted滑动步长,基于逻辑的地方,我知道数量的项目,每个项目的宽度和已后,我的CSS在每个项目的利润率。

狂欢/ * 1 * /

c1_w = 92; / /狂欢项目宽度

VAR c1_n = 10;的比较狂欢项数/ /合计

VAR c1_pp = 4 / /比较狂欢项目每页数

c1_marginFactor = 51;

c1_sss VAR = c1_w * c1_pp; / / SSS =滑动步长

VAR c1_ns = parseInt(((c1_w * c1_n)/ c1_sss)+0.5)/ / NS =幻灯片

c1_sss + = c1_marginFactor的; / / SSS =滑动步长,51利润


要求:MooTools 1.2的

观看演示 | 下载MooTools的传送带寻呼版本1.0 (下载1999年)


2008 2008年 12月 2日

简单的跨浏览器Mootools的评价脚本

MooRating是一个简单的(跨浏览器,当然,因为它使用的MooTools的库的电源),轻量级和优秀MooTools的评级解决方案的基础。 它不称为“星级”,只是因为,评级的图像可能是你选择(我已经提供下载的明星,酒吧和心,但你可以创建自己的各种刚落)。

它是如何看起来像:

Mootools的评价有不同的图像观看演示
Mootools的评价与百分比值观看演示
Mootools的评价与分数值观看演示

下载Mootols星级脚本 (下载721次)

评价数据:整数,小数或百分比
目前脚本的目的是显示整个值(1,2,3,4,5),小数(1.24,3.45等)或百分比(12%,55%等)的评级数据。 选择显示中所提到的任何格式的数据,可以设置简单地通过改变一些在JavaScript的标志值(moorating.js)
基本上有两个e两个标志一起玩,在您所选择的格式显示值...

VAR inpercent = FALSE; / /设置此标志为true,如果您需要可以显示百分比值
VAR isFractional = FALSE / /设置为true,如果你想要的分数值,如1.24,1.25,4.56,而不是1,2 ... 5

和我不认为有此需要的任何解释。 更何况。 该脚本是很简单的。 如果你知道一点javascripting,你可以修改脚本来得到任何显示值排序。 例如,如果你想显示三位小数的地方......只是调整脚本如下...

如果(isFractional){(X <= 5 | | X> = 0)moostartval [我]的innerHTML = formatNumber(X,3);} / / 2改为3
moostartval [我]的innerHTML = Math.round(X);

更新评价值:
我还没有,困扰编写任何AJAX脚本,更新评价值,因为我知道从我的经验,并非总是这样,它打算尽快更新评级为用户速率的东西。 你是自由地做任何你想要的额定值,它使用AJAX的更新或提交或设置一个隐藏的表单字段的值,要与整个表单等提交

功能updateRating(ID,等级){
/ /警报(ID +“,”+评级);
/ /做那些该评级
}

有在称为“updateRating”的javascript功能。 已通过此功能的评价DIV ID,以确定哪些评级(如果有一个以上的页面上的评价)进行了更新和[updateRating(ID,评级)评级的价值。 你可以选择任何你想要这些值,正如我前面提到的。

评价图片:星星,心,酒吧或什么请你
更改任何上述类型(星星,心等)的评级,是非常简单的。 只是提供一个类似创建一个图像,并删除它。记住,如果你改变形象的名字,你在CSS文件中作出必要的修改,见下文。

,moostar利用margin:0px;填充:0px;溢出:隐藏;宽度:84px;高度:20像素;浮动:左; 背景:URL(“stars.gif”)重复-X;}
moostar跨度{浮动:左;利用margin:0px;填充:0px;显示:块;宽度:84px;高度:20像素;文字装饰:无;的text-indent:-9000px;的z-index:20;}
。moostar CURR { 背景:URL(“stars.gif)离开25px;}

大多数评等部件使用,用鼠标事件对每颗恒星的星半星的图像。 哞评价使用一个简单的sprite图像作为背景图像,以达到一个非常低的开销所需的视觉效果。

要求:MooTools 1.2的
下载Mootols星级脚本 (下载721次)


2008 2008年 10月 24日

Mootools的两个旋钮,滑块(滑块双铰接)范围指示器

我一直在寻找双固定滑块使用的是MooTools(有两个旋钮,最大和最小的滑块)。 虽然,我没有找到做得好双固定滑块在MooTools的论坛,唯一的问题是,所有这些滑块力选定的范围标记。 终于来了! 我决定创建自己的。 好吧! 我使用的原代码并修改它有一个滑块的背景,选择的范围,在我下面的例子直观。 蓝色区域表示值的范围内选择。

查看2.2版本演示 | 下载Mootools的双铰接滑块版本2.2 (下载11880次)
MooTools的双重固定滑块

你可以很容易改变的外观和感觉范围指示灯(蓝色在上面的例子),旋钮,滑块,滑块轨道需要通过修改的slider.css作为。

不要给我发评论,如果你觉得它有用。


NDK的家 | 表达它 表示唇腭裂 表示Penmenship 表示敬畏 表达自己