表達它

隨著各種有旋轉木馬，以及MooTools的很多，我還是決定寫我自己的傳送帶類，一些很好的理由
1。 想要一個尋呼功能（能夠跳到一個特定的幻燈片/傳送帶一步）。
2。 要安置的左，右按鈕/鏈接的自由，我曾經請。
3。 在幻燈片的步驟更多的控制權。

我設法創建一個新的傳送帶，具有上述特點如下...隨意提出的任何修改，你會需要！！！

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

觀看演 ​​示 | 下載MooTools的傳送帶尋呼版本1.0 （下載1998年）

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 （下載1998年）

MooRating是一個簡單的（跨瀏覽器，當然，因為它使用的MooTools的庫的電源），輕量級和優秀MooTools的評級解決方案的基礎。 它不稱為“星級”，只是因為，評級的圖像可能是你選擇（我已經提供下載的明星，酒吧和心，但你可以創建自己的各種剛落）。

它是如何看起來像：

	Mootools的評價有不同的圖像觀看演 ​​示
	Mootools的評價與百分比值觀看演 ​​示
	Mootools的評價與分數值觀看演 ​​示

下載Mootols星級腳本 （下載720次）

評價數據：整數，小數或百分比
目前腳本的目的是顯示整個值（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星級腳本 （下載720次）

我一直在尋找雙固定滑塊使用的是MooTools（有兩個旋鈕，最大和最小的滑塊）。 雖然，我沒有找到做得好雙固定滑塊在MooTools的論壇，唯一的問題是，所有這些滑塊力選定的範圍標記。 終於來了！ 我決定創建自己的。 好吧！ 我使用的原代碼並修改它有一個滑塊的背景，選擇的範圍，在我下面的例子直觀。 藍色區域表示值的範圍內選擇。

查看2.2版本演示 | 下載Mootools的雙鉸接滑塊版本2.2 （下載11860次）

你可以很容易改變的外觀和感覺範圍指示燈（藍色在上面的例子），旋鈕，滑塊，滑塊軌道需要通過修改的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

觀看演 ​​示 |
下載的燈箱來源郵編（下載1808次）

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： -燈箱右上角密切燈箱手柄上的形象。 按設計可以使用任何圖像

觀看演 ​​示 |
下載的燈箱來源郵編（下載1808次）

請讓我們有您的意見和反饋...

如果你是那些傢伙（像我），經常檢查CSS以及HTML頁面，得到啟發或其他，那麼你可能已經注意到，我們已經使用人造定位 （我以前的文章中已經提到，我們使用仿的絕對定位：燦爛CCS佈局 ）

我們做了一些很好的工作，所以基於此模板以為會很高興分享.... 下載這個WordPress主題（下載197次）