蕃茄腦袋: AJAX

顯示具有 AJAX 標籤的文章。顯示所有文章

[+/-] : swffit 一支能動態的讓 swf 自動符合視窗大小的 Library

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : [jQuery] jQuery UI

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 再來一發根據LightBox 所開發的連結效果

張貼者：蕃茄 (Tomato) 1 Comments

[+/-] : 跟LightBox 很像的 VideoBox

張貼者：蕃茄 (Tomato) 1 Comments

[+/-] : [AJAX] 不用寫程式就可以線上動態排序表格！！

張貼者：蕃茄 (Tomato) 1 Comments

　　網頁上要整理各式的資料，我想大多數的人應該都會使用表格吧！

　　如果放入的資料想要先經過排序，我想先把資料放入ＷＯＲＤ或是ＥＸＣＥＬ裡都是很好的選擇，經過排序後想要放回ＤＲＥＡＭＷＥＡＶＥＲ也很簡單，只需要使用＂複製＂和＂貼上＂，表格就做好囉！

　　但是如果你想讓使用者自己可以做排序，是任何一個欄位都能排序，而且是使用者想排就排，哇～不用說，寫程式就對了，要怎麼寫我想頭就大了吧！

　　今天要介簡的這個好用的 JavaScript 套件，就是針對上述的使用情況來地，下圖是還沒使用時的表格長像。

　　這張圖就是使用後的長像，它在表格的標題列會上底色，使用者只要在想排序的欄位上按一下，就會出現像第一欄的 Name 一欄的＂三角形＂，三角形向上就是遞減（由大到小）排序，三角形向下就是遞增（由小到大）排序，很方便吧！

　　這個方式最重要的是，不用寫程式，而且使用很方便哦～

　　底下就是使用方法，請照著做即可。


先將 sorttable.js 檔案下載到網站資料夾下，再把以下的 JavaScript 貼入到 <head> </head> 中即可~

<script src="sorttable.js"></script>
<style type="text/css">
    /* Sortable tables */
    table.sortable thead
    {
        background-color:#eee;
        color:#666666;
        font-weight: bold;
        cursor: default;
    }
</style>

最後再將你的表格加上一個 Class 的屬性即可，就是把 <table> 標籤，後面加上class="sortable" ，改成 <table class="sortable"> 就可以使用囉～

官方網站：http://www.kryogenix.org/code/browser/sorttable/
直接下載：http://www.kryogenix.org/code/browser/sorttable/sorttable.js...
Read more

[+/-] : [Hacks] 讓你的 IE 變正常 - PNG 透明 - :hover 效果（2008/5/5更新）

張貼者：蕃茄 (Tomato) 10 Comments

要寫這篇時，光是標題，我就想了好久，一直想不出要怎麼下這個標題，很難用一句話來形容這個爛東西，後來又回到我要介紹這個好用的 JavaScript library 作者的網站，看到他下的標題 A JavaScript library to make MSIE behave like a standards-compliant browser. 我看了後，就覺得＂讓你的 IE 變正常＂應該是這個作者的初衷吧！

IE 是個讓設計師很頭疼的產物，總是可以讓設計師有很多事跟工作做的產物，為了 IE ，一個 CSS 檔必須寫出多種不同 IE 使用的版本或是語法，而明明就是標準的 CSS 也會有一堆的語法在 IE 裡不被支援，而 png 檔，這麼好用的檔案，也不支援，還有一堆罄竹難書的事。

好啦！回到正題，IE 的行為修正檔，我想在網路上一大堆，但是這個作者寫的修正檔是我看過以及使用過最完整，而且目前也還沒發現任何 Bug ，我目前也有搭配 jQuery 的 FrameWorks 一起使用，目前是還沒遇到問題，如果有，我會再回來報告使用情況。

使用方式很簡單，只要將作者寫好的 JavaScript 檔，引用到文件中，就可以生效了，其它什麼動作都不需要，檔案有二個，一個是將所有 IE 修正成為跟 IE7 一樣的行為，另一個是 IE8 ，但是目前 IE8 的瀏覽器也還在 Beta 版的階段，我想應該是不太需要使用，因為使用者還不多，也不會有使用者使用 Beta 版的瀏覽器做為主要上網的工具吧！

步驟一：請先下載 IE7.js or IE8.js
步驟二：再使用下列語法即可（貼入到<head></head>）

IE7.js
將 IE5-6 修正成跟 IE7 相同


<!--[if lt IE 7]>
<script src="IE7.js" type="text/javascript"></script>
<![endif]-->

IE8.js
將 IE5-7 修正成跟 IE8 相同（記得 IE8.0 還在測試階段，不建議你使用）


<!--[if lt IE 8]>
<script src="IE8.js" type="text/javascript"></script>
<![endif]-->

你將 js 檔放入你的網站後，再引用上述的語法，就可以開始輕鬆的寫網頁啦，使用這個方法只有一個問題，那就是使用者如果將 JavaScript 的功能關閉，那你的網頁就會破功啦！但是現在沒使用 JavaScript 的人少之又少，這算是最好最偷懶的方式之一囉。

2008/4/22更新

經過 Jason 的提醒，原來這個修正檔還是不能使 png 檔完全正常顯示，我後來不死心，又去找了一些資料，都是一樣，不行就是不行，目前所有的修正檔都是只要背景使用PNG透明格式，那麼背景可以透明，但是就不能重覆，原因是出在 progid:DXImageTransform.Microsoft.AlphaImageLoader 這一支函式的問題，要使用它才能把PNG透明格式轉成透明的GIF格式，但是卻不支援重覆的屬性，所以我看，IE要完整支援PNG大概是沒望了。

還有，如果你有使用修正檔，不管是那一支，大多會有以下的幾個問題：
1. PNG背景圖位置定位失效及重複背景圖不能使用。
2. 超連結不能正常使用（這個會發生在透過修正檔讓PNG圖片背景可以透明時，這時使用PNG為　背景圖的div這個區塊內的超連結都會點不到）。
3. 圖片一定要指定圖檔的寬和高，否則圖檔的顯示會有問題。
4. 有些會要求一定要符合某些檔名規範（使用起來不順手）。
5. 在IE6中圖位置更動時，會造成某些元件的顯示不正常（如這個網站下部份的範例http://clientside.cnet.com/）
6. 我還沒想到，不過應該是還有的啦！

還有IE也不支援 a 以外的屬性使用 hover，這也很爛，還有不支援子選取器.....等，不過可以使用我介紹的這支，它可以修正這些問題，如果單純使用PNG的修正檔，我想大多數都差不多，只差在上述的問題，你比較討厭決解什麼問題，不然我還是推目前這支，即可以修正PNG還可以順便修正其它IE的問題，一兼二顧是吧！

如果只是要修正PNG的話，那除了 IEPNGFix 不錯外，也可以試試這支 jquery.pngFix.js ，這支看名字應該就知道是使用最近很火熱的 jQuery（什麼不知道，快去查查吧！）所開發，也是針對PNG透明問題的修正檔，執行效能也很不錯，使用也很簡單，網站最後面有教你，只要三個步驟，而且不需要特別的檔名，只要是PNG就可以了。

有新的發現，我會再回來補充的，請隨時注意囉！

2008/5/5更新

我今天又發現了一個修正 PNG 透明背景的修正檔，這個檔案跟其它的修正做的事差不多，只是它用的是現在很流行執行效能也很好的 Jquery ，所以我想這個東東應該效能也會不錯吧～

我還沒試，有空再來試試，我一樣會回來補充地。
http://jquery.andreaseberhard.de/pngFix/

- 看不懂上面 [if lt IE 8] 的語法，你可以參考這一篇詳細說明
- 原始網站
- Demo 及測試頁面（原作者做的相當的完整而且易懂，我就不再做範例囉）
- JS 檔直接下載（我將二個JS檔壓縮在一起了）...
Read more

[+/-] : DreamWeaver CS3 也能製作 AIR ...

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : [SWFObject] SWFObject 2.0 讓你輕鬆的插入及控制 Flash

張貼者：蕃茄 (Tomato) 3 Comments

插入 Flash 到網頁，自從有了 DreamWeaver 後，一直都不是難事，就算都不會任何編輯器，在 Flash 的匯出選項裡也能直接產生插入好 SWF 檔的 HTML ，所以插入 Flash 這件事，一直沒有受到大多數人的重視。

一直到 Win XP 發佈 Service Pack 2 後，一切通通變得不一樣了，因為如果沒有很好的插入語法及觀念，你的 SWF 動畫檔在網頁上沒辦法被使用者直接使用，因為會出現虛線，還需要使用者在動畫上點左鍵一下才能使用，也因為這樣，在網路上又開始出現一大堆的修正檔，這一切都是 IE 搞的鬼啊～

重點是，DreamWeaver 8.1 版後，也幫使用者修正了這個問題，當然 DreamWeaver CS3 也重新改寫了 AC_RunActiveContent.js 這個修正檔，這支修正檔會在你加入 SWF 檔後，第一次儲存時，就會出現提示準備儲存檔案（如下圖）。

當你按了確定後，就會依照上述的路徑，將檔案儲存在你的網站資料夾下（如下圖）

原則上，這樣就完成插入 SWF 檔及修正 IE 的安全性問題，BUT，問題其實從這裡才開始，有什麼問題呢？繼續看吧！

如果你希望做出來的網頁能符合搜索引擎最佳化的原則、還能做出真正通過 text/html 的頁面，而不是 ~~application/xhtml+xml~~ 以及網頁標準化的話，你就不能只知道上面的方式囉。

因為使用 DreamWeaver 插入 SWF 檔時，它會使用 <object> <embed> 等非標準化的語法，而且語法非常的複雜難以管理（如下圖反白處）。

你看到了嗎？只為了一個簡單的 SWF 檔，就搞出一大堆的原始碼，而且還沒有達到標準化的要求，真是糟，有多糟呢？我想大多數的人都不知道，這支程式糟到連 Adobe 自己開發的，自己卻不想要用，所以，他們這次的網站改版放 SWF 檔也是用我們這次要介紹的 SWFObject （Adobe 網站大改版），連開發者自己都不想用，我們還在用，這有點好笑吧！

好啦！我們進入正題，什麼才要進入正題，那上面那一大堆的字在做什麼，嗯～沒辦法，我話太多了，我在想，以後是不是用錄的比較快。

如果你受不了了，想要馬上使用，只要三個步驟就搞定囉！
Setup1 - 請先下載 SWFObject.js 或是將整個 SWFObject 壓縮檔下載回去

Setup2 - 請將 SWFObject.js 放入你的網站資料夾

Setup3 - 將以下的 Code 放入你想出現 Flash 的地方即可


<script type="text/javascript" src="swfobject.js"></script>

<div id="mySWF">
        這裡是當瀏覽器不能播 Flash 時，放入你想出現的訊息。
</div>

<script type="text/javascript">
        swfobject.embedSWF("test.swf", "MySWF", "550", "400", "9.0.0");
</script>

很簡單吧！從需要一大堆的原始碼，變成那一點點的 xhtml & css & javascript 是不是比較容易觀看呢？待會咱們再來解釋它是怎麼運做的吧！

SWFObject 的語法非常的簡單易懂，以下我們就來看看它的使用方式吧～


swfobject.embedSWF(swfUrl, replaceElementId, swfWidth, swfHeight, flashVersion,expressInstallUrl, flashvars, params, attributes);
=========================================================
swfUrl ======> 這個要寫你的ＦＬＡＳＨ檔名；
replaceElementId ======> 這個是你要替換成 flash 的 DIV 的 ID 名稱；
swfWidth ======> 這個就是你的 swf 的寬度；
swfHeight ======> 這個就是你的 swf 的高度；
flashVersion  ======> 這個是播放 swf 的 player 版本，可設定至小數點，但是一般來說整數版本就可以囉；
expressInstallUrl ======> 這個很好用哦～這是當 Flash Player 的版本比你指定的還舊時，他就會自動地到上述的位置，更新安裝 Flash Player 。
flashvars ======> 這是傳值進 Flash 用的；
params  ======> 這是控制 Flash 參數用，如需不需要選單；menu="false" ；
attributes ======> 這是為 flash player 控件的屬性值設置；如 id: "myDynamicContent"

[+/-] : [JavaScript小技巧] 鎖定網頁上的文字不能選取

張貼者：蕃茄 (Tomato) 0 Comments

要讓人不能 Copy 網頁上的文字，除了鎖右鍵外，還可以加上這一段語法，就可以讓使用者，連使用左鍵做 Mark 的動作都不行。

只要再 <body> 加上 onSelectStart="event.returnValue=false" 就可以使用囉！

不過像這種東西，只能使用在 IE 上，只要遇到 FireFox 不管你多會鎖，一樣都可以簡單的破解掉，有興趣的自己試試吧！

完整語法如下


<body onSelectStart="event.returnValue=false">

[+/-] : [線上手冊] JavaScript 入門及釋疑....

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : [AJAX by framework] mootools 滑動捲軸

張貼者：蕃茄 (Tomato) 2 Comments

這個非常好用的 FrameWork ，你可以上它的網站上去看看它的 Demo ，好啦！下面這個簡單的應用是讓網頁上常常用到的［錨點］可以不要這麼單調，你只要將下面的 mootools.js 檔下載到你的網站下，然後再你的網頁的檔頭裡貼上以下的 Code 即可讓你的錨點產生滑動式的效果哦！

-下載 mootools.js


<script language="javascript" type="text/javascript" src="mootools.js"></script>
<script language="javascript" type="text/javascript">
window.onDomReady(
function(){
　　new SmoothScroll({duration: 600});
　　　　  }
);
</script>

你可以試著修改滑動速度這個參數（例如：duration: 1000）數字越大，滑動的速度就會越快。...
Read more

蕃茄腦袋

[+/-] : swffit 一支能動態的讓 swf 自動符合視窗大小的 Library

[+/-] : [jQuery] jQuery UI

[+/-] : 再來一發根據LightBox 所開發的連結效果

[+/-] : 跟LightBox 很像的 VideoBox

[+/-] : [AJAX] 不用寫程式就可以線上動態排序表格！！

[+/-] : [Hacks] 讓你的 IE 變正常 - PNG 透明 - :hover 效果（2008/5/5更新）

[+/-] : DreamWeaver CS3 也能製作 AIR ...

[+/-] : [SWFObject] SWFObject 2.0 讓你輕鬆的插入及控制 Flash

[+/-] : [JavaScript小技巧] 鎖定網頁上的文字不能選取

[+/-] : [線上手冊] JavaScript 入門及釋疑....

[+/-] : [AJAX by framework] mootools 滑動捲軸

[+/-] : [AJAX by framework] Adobe開發的Spry framework for Ajax

[+/-] : [AJAX] LightBox 超熱門秀圖方式

##HIDEME##

Who care Fanchie (蕃茄)

訂閱我吧！

搜尋文章

文章分類

最新回應

贊助廣告

贊助廣告

我不認識的好朋友們～

每日一句

Good Link (歡迎推薦或交換連結哦!)

All Post