2008 2008年 12月 25日

載入JavaScript的動態

有時保持pageweight下來......我們我們的腳本分割成片段......這些JavaScript片段,可以裝載在有需要時(事件或點擊一個鏈接或按鈕等)。

載入JavaScript的動態很簡單,相當平直向前如下...

= “text/javascript” > < 腳本 類型 =“文本/ javascript”>
功能loadNewScript(源){
VAR = document.createElement方法(“腳本”)
s.setAttribute('型','文本/ javascript“);
s.setAttribute('src'中,源);
瑭插綋銉(S);
}
</ SCRIPT>

你可以有以下調用鏈接在身體的任何地方,或者你可以有這個腳本文件本身“的onLoad”...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a ><a href =“JAVASCRIPT:loadNewScript(”myDynamicScript.js);“>負載動態腳本</ A>

<body onload="loadNewScript('myDynamicScript.js');">


2008 2008年 12月 17日

不當行為:IE8的CSS佈局破損(針對在IE8中使用Meta標籤的瀏覽器版本)

如果你是CSS的人,你想知道的痛苦,在獲得工作的跨瀏覽器的佈局。 IE8是我們開發的工程中的又一扳手。 anywaz! 如果你打這個問題時,像我一樣昨天,你完全工作在IE7的CSS(或更早)和Firefox突然開始扔在IE8發脾氣,試試這個...很好,這似乎是解決問題的那一刻我....

使用meta聲明,我們可以指定我們想IE8的使用的渲染引擎。 因此,強制IE8的渲染IE7 ...插入文檔的頭部以下Meta標籤: -

<meta http-equiv="X-UA-Compatible" content="IE=7"

IE瀏覽器默認情況下,元將是: -

<meta http-equiv="X-UA-Compatible" content="IE=8"
這將使IE8的渲染頁面,使用新的標準模式。

如果需要,此語法可以用來容納其他瀏覽器如下:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4"


更多關於文檔類型:

如果你不熟悉的動物,被稱為“DOCTYPE”排序...這裡是一些快速閱讀
什麼是文檔類型? 什麼是瀏覽器怪癖嚴格模式?
設置在XSL中的DOCTYPE

為深入了解更多有關文檔類型,嘗試訪問這些鏈接...
除了 ​​一個列表:有了正確的DOCTYPE,修復您的網站!
除了 ​​一個名單:超越的DOCTYPE:Web標準,向前兼容和IE8

注:雖然我們很多的HTML / CSS的人都被忽略在我們的文件重要性的DOCTYPE decleration的,設置正確的DOCTYPE,通常是跨瀏覽器的問題的答案。


2008 2008年 12月 9日

簡單的傳送帶分頁使用的是MooTools

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

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

我的例子看起來像... [ 查看演示 ]
隨著尋呼Mootools的傳送帶

觀看演 ​​示 尋呼版本1.0下載MooTools的傳送帶 (下載1983次)


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的傳送帶 (下載1983次)


2008 2008年 12月 2日

簡單的跨瀏覽器Mootools的評價腳本

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

它是如何看起來像:

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

下載Mootols星級腳本 (下載716次)

評價數據:整數,小數或百分比
目前腳本的目的是顯示整個值(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星級腳本 (下載716次)


NDK的家 | 表達它 表示唇齶裂 表示Penmenship 表示敬畏 表達自己