表达它

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

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

我的例子看起来像... [ 查看演示 ]

观看演示 寻呼版本1.0下载MooTools的传送带 （下载1991次）

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的

观看演示 寻呼版本1.0下载MooTools的传送带 （下载1991次）

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

它是如何看起来像：

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

下载Mootols星级脚本 （下载718次）

评价数据：整数，小数或百分比
目前脚本的目的是显示整个值（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星级脚本 （下载718次）

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

查看2.2版本演示 | 下载Mootools的双铰接滑块版本2.2 （下载11727次）

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

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

之前，我们不得不处理与CSS创建页面布局，调整表格单元格内的一些内容似乎只是孩子的发挥。 只需设置“ 对齐 ”或“valign”属性表中有您所选择的路线，这块蛋糕！
使用CSS布局，尽管我们有“垂直对齐”为元素的属性，它不似乎是简单的“ 对齐 ”或“valign”属性。 为了更specifiic“ 垂直对齐 ”似乎从来没有解决您的任何问题，特别是如果是写一个跨浏览器的CSS。

如果没有使用HTML表格，对象为中心的问题，是图片或一些​​文字内含有分裂，可能是每个UI / CSS开发人员在某些点的噩梦。 这一问题作进一步的调整，如果要居中的对象是动态的性质，即当它的高度是可变的推断您的后顾之忧（未知的高度）。

虽然有没有已知的直线前进的解决方案，跨浏览器，我们必须处理的范围，将工作，我曾试图在没有到达的解决方案似乎工作中，我曾尝试在一些浏览器（IE6，IE浏览器7 FF）。

解决方案：
在浏览器如Mozilla，Opera和Safari，但奇怪的行为“ 垂直对齐 ”的属性可带来的感觉，只是含分工“ 显示 ”属性设置“ 表格 ”（显示：表单元）， 。

问题仍然存在与IE浏览器的家庭，谁，但似乎并没有理解“ 细胞表 ”财产和无知，因为他们，他们就忽略它。 虽然简单，广告几多个DOM元素的HTML使事情发生，如下的解决方案。

CSS和HTML看起来像这样
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

的HTML： -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/>意见：3456 </ DIV>
</ DIV>
</ DIV>

结果看起来像这样： -

在这里查看演示 | 下载源文件 （下载452次）

顶部对齐的CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

的HTML： -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/>意见：1234 </ DIV>
</ DIV>
</ DIV>

结果看起来像这样： -

底部对齐的CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
的HTML： -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/>意见：1234 </ DIV>
</ DIV>
</ DIV>

结果看起来像这样： -

在这里观看演示 | 下载在这里

好像年龄，因为我试图找到一个合理的解决方案，这对准问题。 但现在，这一解决方案，我觉得在小和平。

希望有一天

• 垂直对齐的CSS属性工作表细胞内，无需拐弯抹角
• 至少，设置保证金顶：汽车和利润率底：汽车，将给予相同的结果与margin-left和保证金一套自动
• 有一天会超过浏览器大战。
• 将有一个为所有的浏览器。

下载上述解决方案在这里的CSS和HTML （下载452次）..易懂，CSS是没有得到优化

注：顺便说一下，这些都是一些我点击图片的缩略图...

不是只有少数的灯箱时，你可以找到你谷歌。 灯箱，我发现大部分的问题是，他们似乎都使用一个或其他重JavaScript框架如jQuery，原型，MooTools和喜欢。 他们都是冷静和时髦的期待。 但是，如果你的要求是：“ 但我想一个我的网站的简单和轻量级的灯箱脚本 ”，然后在这里，它是;

这个灯箱一些不错的功能

1. 很轻
   一个。 包装时的脚本4KB（8 KB解压）
   2。 2 KB的CSS
   C。 几行的HTML灯箱容器
2. 简单地理解和贯彻
3. 可以在同一页上有多个灯箱。
4. 相同的灯箱容器用来显示不同​​的内容（这是隐藏在页面部门分别包括），根据选项，点击链接/。
5. 自动居中，同时考虑到所有因素，例如窗口的高度和宽度（屏幕分辨率），页面滚动量和灯箱内容的高度
6. 测试IE 7＆FF

观看演示 |
下载的灯箱来源邮编（下载1804次）

jo.js，jo_pack.js [包装版本]： -一个简单的JavaScript对象集[联办]，其中包含的元素，窗口和文件定位脚本。 你可以打开JO.JS，如果你想创建抽象的功能，一些高级Javascripting让你的手脏，延长元素的属性等。 如果你不是太在Javascripting多少，不要管它。

lightbox.js，lightbox_pack.js [包装版本]： -包含灯箱经理脚本。 如果你是网页设计师，还负责执行页面上的灯箱，你需要了解LightBoxManager。 LightBoxManager基本上包含两个功能showLightBox，和closeLightBox。

lightbox.css： -如果你知道的CSS，你可以发挥与lightbox.css定制的外观，N-感觉lightbox.css

灯箱两种不同的内容，实施的index.html：样品

lb_underlay_bkg.png： -这是光/西米透明图像用于灯箱底图的背景[底图是低于lighbox，防止用户点击页面上的任何其他实体层，而灯箱开放]。 为此目的，你可以使用任何图像或纯色，取决于的页面设计和要求。

icon_lb_close.gif： -灯箱右上角密切灯箱手柄上的形象。 按设计可以使用任何图像

观看演示 |
下载的灯箱来源邮编（下载1804次）

请让我们有您的意见和反馈...

如果你是那些家伙（像我），经常检查CSS以及HTML页面，得到启发或其他，那么你可能已经注意到，我们已经使用人造定位 （我以前的文章中已经提到，我们使用仿的绝对定位：灿烂CCS布局 ）

我们做了一些很好的工作，所以基于此模板以为会很高兴分享.... 下载这个WordPress主题（下载196次）