JS1K
這是限制javascript檔案大小 >1 kb = 1024bytes。
10K Apart
而這是以前端為目的，可以使用最新的html 5 或css 3 來寫，也不限使用資料庫，但是不許使用flash或者silverlight。
這個倒設計的較美觀，雖然檔案大小限制在10kb，但似乎還算寬裕，但是既然用到html 5的話，那麼很
最近沒空，留著改天再來欣賞。
2010年10月12日 星期二
2010年9月19日 星期日
程式設計員小抄大全
轉貼自：http://coolshell.cn/articles/1566.html
這篇也很棒，筆記一下…
你是否會經常忘記一些CSS中的函數名或是一些屬性名，那個時候，你一定覺得，如果手邊有一個「小抄」（Cheat Sheet）就好了。當然，這個「小抄」不是給你作弊用的，這個「小紙條」就是可以讓你馬上知道那個你最想知道的東西。這個「小抄」上也不需要有所有的東 西，就需要那些經常用的就行了。現在，網上有很多這樣的「小抄」，它們可能是PDF格式的，可能是PNG格式的，你可以很方便地把其打印出來（可以打印得 很小），然後貼在你的電腦旁，一但需要，瞟一眼就可以了，這對於我們的工作是相當方便的。
之前，酷殼也有兩篇關於速查卡的文章《Web設計的速查卡》和《Vim命令速查卡》，不過都不如本貼多。
下面是N多的各種和樣的「小抄」，其中包括了Ajax, C++, Java, Python, PHP, Perl, ASP, Unix, Ruby, Google, HTML, CSS, XML ……..，讓我們姑且叫做「程序員小抄大全」吧。當然，他們都是英文版的，可能某些鏈接你可能需要翻牆軟件才能訪問。我這裡就不教你怎麼翻牆了，這樣的貼 子網上多的是。
這篇也很棒，筆記一下…
你是否會經常忘記一些CSS中的函數名或是一些屬性名，那個時候，你一定覺得，如果手邊有一個「小抄」（Cheat Sheet）就好了。當然，這個「小抄」不是給你作弊用的，這個「小紙條」就是可以讓你馬上知道那個你最想知道的東西。這個「小抄」上也不需要有所有的東 西，就需要那些經常用的就行了。現在，網上有很多這樣的「小抄」，它們可能是PDF格式的，可能是PNG格式的，你可以很方便地把其打印出來（可以打印得 很小），然後貼在你的電腦旁，一但需要，瞟一眼就可以了，這對於我們的工作是相當方便的。
之前，酷殼也有兩篇關於速查卡的文章《Web設計的速查卡》和《Vim命令速查卡》，不過都不如本貼多。
下面是N多的各種和樣的「小抄」，其中包括了Ajax, C++, Java, Python, PHP, Perl, ASP, Unix, Ruby, Google, HTML, CSS, XML ……..，讓我們姑且叫做「程序員小抄大全」吧。當然，他們都是英文版的，可能某些鏈接你可能需要翻牆軟件才能訪問。我這裡就不教你怎麼翻牆了，這樣的貼 子網上多的是。
25個jQuery的編程小抄
轉貼自：http://coolshell.cn/articles/2964.html
太多了，筆記一下…
以前本站向大家介紹過「程序員小抄大全」，這裡是25個jQuery的小抄，有的還可以設置成你的電腦桌面。這些東西可以讓你很快速地記得一些常用的東西，就好像軟件的快捷鍵一樣。希望它們對你會有幫助。
太多了，筆記一下…
以前本站向大家介紹過「程序員小抄大全」，這裡是25個jQuery的小抄，有的還可以設置成你的電腦桌面。這些東西可以讓你很快速地記得一些常用的東西，就好像軟件的快捷鍵一樣。希望它們對你會有幫助。
2010年4月27日 星期二
開始HTML5 – Video
轉貼自：http://blog.colorbase.tw/web-development/947
在HTML5以前若我們要在網頁中播放影片時，需要使用ActiveX或Plug-in的方式來達到，例如：Flash Player、QuickTime等等，但在HTML5之後這些東西成了標準，我們不需再透過額外的外掛來達成，相信這也意味著Web的 相關應用將更趨於豐富化。
現在就連 YouTube 也開始測試使用HTML5的Video來做為影片播放介面，因此在實際應用上雖然我們並不一定要走在時代的尖端，但瞭解一下新技術是有其必要的。
在HTML5以前若我們要在網頁中播放影片時，需要使用ActiveX或Plug-in的方式來達到，例如：Flash Player、QuickTime等等，但在HTML5之後這些東西成了標準，我們不需再透過額外的外掛來達成，相信這也意味著Web的 相關應用將更趨於豐富化。
現在就連 YouTube 也開始測試使用HTML5的Video來做為影片播放介面，因此在實際應用上雖然我們並不一定要走在時代的尖端，但瞭解一下新技術是有其必要的。
2010年4月9日 星期五
jquery外掛【Lazy loader】延遲圖片加載，痞客邦及Blogger也可使用
轉貼自：http://steachs.com/archives/1501
最近在一些網站上看到一個圖片效果，是用來延遲加載圖片的功用，主要並不是減少流量，而是降低主機瞬間負載，特別是圖片爆多的網站，如果一頁有20張圖片，一次開啟完的話不僅訪客開的很累，對網站主機也是一種負荷，因此我們可以加上一支簡單的jquery外掛【Lazy loader】來延遲圖片開啟，當訪客往下拉到圖片位置時再去讀取圖片，非常建議圖片量大的網站加載。
最下方有痞客邦及Blogger加載的方式，無名沒意外應該是不能使用，尚未測試，有興趣的人可以依痞客邦的方式加載試試是否有效果。
Lazy loader：
安裝方式：
如果你的網站是Wordpress架設，下載jquery外掛後解壓縮上傳到你的佈景資料夾裡，在你的header.php裡 的</head>之前加入以下語法，即可使用：
如果你網站是其它像是Discuz或是joomla，甚至是自己撰寫的網站，只要將上列語法修改為你放置lazyload.mini.js的路徑即 可，也就是下面這一行。
痞客邦或是Blogger用戶加載方法：
痞客邦用戶請在側邊欄新增一個版面，在自訂內容裡輸入以下語法即可。
Blogger用戶則是在側邊欄新增一個Html/Javascript欄位，再加入以下語法即可。
最近在一些網站上看到一個圖片效果，是用來延遲加載圖片的功用，主要並不是減少流量，而是降低主機瞬間負載，特別是圖片爆多的網站，如果一頁有20張圖片，一次開啟完的話不僅訪客開的很累，對網站主機也是一種負荷，因此我們可以加上一支簡單的jquery外掛【Lazy loader】來延遲圖片開啟，當訪客往下拉到圖片位置時再去讀取圖片，非常建議圖片量大的網站加載。
最下方有痞客邦及Blogger加載的方式，無名沒意外應該是不能使用，尚未測試，有興趣的人可以依痞客邦的方式加載試試是否有效果。
Lazy loader：
網站位址：http://www.appelsiini.net/projects/lazyload
jquery 外掛下載：請 點我
效果展示：http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
安裝方式：
如果你的網站是Wordpress架設，下載jquery外掛後解壓縮上傳到你的佈景資料夾裡，在你的header.php裡 的</head>之前加入以下語法，即可使用：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/lazyload.mini.js"></script>
<script type="text/javascript"> jQuery(document).ready(function($){jQuery("img").lazyload({effect:"fadeIn",placeholder: "http://image.steachs.com/Files/grey.gif"});
});
</script>
如果你網站是其它像是Discuz或是joomla，甚至是自己撰寫的網站，只要將上列語法修改為你放置lazyload.mini.js的路徑即 可，也就是下面這一行。
<script type="text/javascript" src="你放置的路徑/lazyload.mini.js"></script>
痞客邦或是Blogger用戶加載方法：
痞客邦用戶請在側邊欄新增一個版面，在自訂內容裡輸入以下語法即可。
Blogger用戶則是在側邊欄新增一個Html/Javascript欄位，再加入以下語法即可。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://image.steachs.com/Files/lazyload.mini.js"></script>
2010年3月17日 星期三
2010年3月14日 星期日
用 jQuery 做畫廊 – jQuery 版的 Nike 首頁產品展示
轉貼自：http://abgne.tw/jquery/apply-jquery/jquery-nike-gallery.html
昨天梅干傳了一個 Nike.com.tw 的網址過來，讓筆者以為梅干要轉行賣鞋或是透過他買鞋可以拿到流血價咧！結果是...看到了它首頁的產品展示效果蠻不錯的，想討論看看是否能用 jQuery 來做出類似的功能。
昨天梅干傳了一個 Nike.com.tw 的網址過來，讓筆者以為梅干要轉行賣鞋或是透過他買鞋可以拿到流血價咧！結果是...看到了它首頁的產品展示效果蠻不錯的，想討論看看是否能用 jQuery 來做出類似的功能。
利用 jQuery 來製作網頁頁籤(Tab)
轉貼自：http://abgne.tw/jquery/apply-jquery/jquery-web-tabs.html
在網路知識爆炸的 Web 2.0 時代，一個頁面上要顯示的資訊越來越多，但總不可能把全部的內容都一次顯示出來塞滿整頁吧！所以就出現了頁籤(Tab)這樣的展示方式。
在網路知識爆炸的 Web 2.0 時代，一個頁面上要顯示的資訊越來越多，但總不可能把全部的內容都一次顯示出來塞滿整頁吧！所以就出現了頁籤(Tab)這樣的展示方式。
黑暗jQuery工具包1-動態加入預設Style設定
黑暗jQuery工具包1-動態加入預設Style設定: "
"
對我來說，Javascript在處理CSS上一直有一個小困擾...
一般在習慣上，為了方便開發人員修改，多半會將Style設定獨立放在.css檔案裡，應用者可視需要覆寫或修改之。但有蠻多時候，應用者根本不打算更動CSS內容，只想直接沿用預設CSS設定，但部署時還是少不了要Copy相對應的.css檔案，網頁也必須多加上<style src="...">宣告。
我總覺得，最理想的方式是將預設css與js融和在一個檔案裡。當開發者想自行定義CSS樣式，可將其寫在.css中加以引用，或在HTML中以<style>逕行宣告；若只想用預設內容，則只需參照.js就大功告成。
今天遇到類似需求，索性寫了幾個小函數，試著實現上述想法。
我的設計概念是這樣的: 先透過document.styleSheets.cssRules比對某個CSS Selector(例如: div.cCountryPicker)，若已被定義過，表示網頁已透過參照.css檔或直接宣告<style type="text/css">方式定義了div.cCounterPicker，此時就不需加入預設的div.cCountryPicker樣式規則；反之，若沒有定義該規則，則透過$("head").append("<style type=\"text/css\">....")的方式加入Style宣告。
程式碼如下:
(PS: 我規劃用jQuery.Darkthread.*蒐集我陸續開發出來的工具函數，最前面的$.extend用來將多個.js中宣告的jQuery.Darkthread.*函數彙整在一起)
/*** Darkthread's Tools for jQuery ver 1.0 **by Jeffrey, 2010-02-25, http://blog.darkthread.net=======================================================checkStyle: to check if specific style selector is definedaddStyles: add <style type="text/css"> dynamicallyaddDefaultStyles: if specific style selector isn't defined, add style setting*/jQuery.extend(jQuery, { Darkthread: {} });jQuery.extend(jQuery.Darkthread, { tools: { //ruleSelector sample: a:hover, .myClass, #someIdcheckStyle:
function(ruleSelector) { //REF: http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml var cssCol = document.styleSheets;ruleSelector = ruleSelector.toLowerCase();
for (var i = 0; i < cssCol.length; i++) {
var rules = cssCol[i].cssRules || cssCol[i].rules; for (j = 0; j < rules.length; j++) if (rules[j].selectorText.toLowerCase() == ruleSelector)return true;
}
return false;
},
/*styleDictionary sample: { "a:hover": { "background-color": "red", "color":"yellow" }, "#dvTest": { "border", "solid blue 1px" } } Note: it's for <style> declaration, not for jQuery.css, so don't use backgourndColor instead of "background-color" */addStyles:
function(styleDictionary) { var sb = [];for (var selector in styleDictionary) {
sb.push(selector + " {"); var props = styleDictionary[selector];for (var p in props) {
sb.push(p + ":" + props[p] + ";");
}
sb.push("}");}
$("head").append("<style type=\"text/css\">\n" +
sb.join("\n") + "\n</style>");
},
addDefaultStyles:
function(ruleSelector, styleDictionary) { if (!$.Darkthread.tools.checkStyle(ruleSelector))$.Darkthread.tools.addStyles(styleDictionary);
}
}
});
應用方式挺簡單的，將以下的程式寫進.js，等於將預設的.css一起藏進.js裡，就不必再多搞出一個預設用途的.css檔案囉!
$.Darkthread.tools.addDefaultStyles(".dttl_BookingBlock", { ".dttl_BookingBlock": {float: "left", position: "absolute",
margin: "0px", padding: "0px", height: "100%",
"font-size": "9pt", "background-color": "#dddddd",
"border-left": "solid #444444 1px",
"border-right": "solid #444444 1px"
},
".ddtl_Timeline": { border: "solid red 1px" }
});
(以上的程式碼，會在網頁本身沒有宣告.dttl_BookingBlock且所有參照的.css中也沒有該宣告時，加入.dttl_BookingBlock及.dttl_Timeline兩條CSS規則，賦與預設Style設定。)
"
30+最新強大jQuery插件和教程
30+最新強大jQuery插件和教程: "
"
jquery的廣泛使用已經讓人快忘記了其它javascript框架的存在，甚至有時候會忘記了jQuery是一個JS庫，冒出「我不是在編寫Javascript代碼」，而是在編寫「jQury代碼」的愚蠢想法。
從長遠來看，過度依賴於jQuery並不是件好事。但jQuery已侵蝕Web設計師的身心。說的誇張點，即使你不懂Javascript，你也可以學會jQuery的大部份使用。即使你不懂jQuery，你也可以使用它的無數插件創造出炫目的網頁特效。
本文為你介紹30+最新強大jQuery插件和教程，在這之前，讓我們之前本站發佈的相關的jQury插件和教程文章:
- 14條改善jQuery代碼的技巧
- 13個增強Web設計界面的Javascript腳本
- 15款jQuery幻燈片插件
- 30+ jQuery中文教程和資源
- 6款jQuery圖表插件
- Easy Slider: 功能強大簡單易用的jQuery滑動門插件
- 3款基於jQuery的Twitter插件
更多請查看jQuery專欄。
教程
1. How to add preloader with loading image in a gallery using jQuery
在圖像畫廊載入過程中使用 jQuery 預加載技術。演示 | 教程
2. Simple Lava Lamp Menu Tutorial With jQuery
創建一個獨特的熔岩燈動畫效果的 jQuery 導航菜單。演示 | 教程
3. How To Create a 3D Tag Cloud in jQuery
使用 jQuery 創建類似 Flash 形式的 3D 標籤雲。演示 | 教程
Web 應用程序的拖放功能提供了豐富的用戶界面，瞭解如何使用 jQuery 來創建此種用戶界面。演示 | 教程
5. Awesome Horizontal Animated menu using Kwicks for jQuery
使用 jQuery Kwicks 插件建立一個可定製的，靈活的橫向動畫菜單。演示 | 教程
6. Create a Thumbnail Gallery With Slick Heading & Caption effect
7. Create an Attractive jQuery Menu with fade in and out effects
創建一個有吸引力的 jQuery 菜單，鼠標懸停時具有淡入背景效果。演示 | 教程
8. jQuery PHP AJAX Autosuggest
Autosuggest 是目前的 Web 應用程序中一個有用的功能。瞭解如何使用 jQuery 和 PHP 來創建。(...)
繼續閱讀 30+最新強大jQuery插件和教程
轉載請註明: 來源於 30+最新強大jQuery插件和教程
原訂閱地址即將失效，請大家更換到新的訂閱地址: http://feed.paranimage.com/
© 帕蘭 for 帕蘭映像, 2010 |
添加到 del.icio.us
通過這些關鍵詞: jquery, jQuery插件, jQuery教程 找到更多你可能喜歡的內容
第5工作室 - 付費設計: 自定義個性化網頁設計, 承接付費WordPress主題定製, PSD轉XHTML等設計業務.
第7網賺室 - 在線賺錢: 向你推薦最熱門最真實的在線賺錢途徑, 讓你在寫博同時, 輕鬆賺取美元!
第9主機室 - 國外主機: 低於5美元/每月, 支持PayPal付款的美國虛擬主機, 直觀圖析評測導購, 幫您做出明智的選擇.
訂閱：
文章 (Atom)
