藍藍分享：

祝訂閱博客的網(wǎng)友們國慶節(jié)快樂！

http://metroui.org.ua/， metroui網(wǎng)站css俱全，各色控件代碼方便調(diào)用。截圖如下：

前言：該文收集了前輩們的一些關于圖片優(yōu)化的技巧，在此收攏到一起，對于各個方法的優(yōu)化原理做了一些研究，希望能給大家對于圖片優(yōu)化這一塊起到拋磚引玉的作用。

提到圖片，我們不得不從位圖開始說起，位圖圖像(bitmap)，也稱為點陣圖像或繪制圖像，是由稱作像素（圖片元素）的單個點組成的。這些點可以進行不同的排列和染色以構(gòu)成一副圖片。當放大位圖時，可以看見賴以構(gòu)成整個圖像的無數(shù)單個方塊。

常見的格式中JPG、PNG、GIF亦屬于位圖，所以它們的數(shù)據(jù)結(jié)構(gòu)大致相同，只是每一種圖片格式都有不同的壓縮算法，不同的掃描方式，但是優(yōu)化的方法都有一個共同點，都是圍繞著每個像素顏色值來下手，具體如何進行優(yōu)化呢？
下面來給大家介紹一下圖片的一些基本原理和優(yōu)化的方法：

1.JPG原理與優(yōu)化
JPG是一種對彩色或灰階之類連續(xù)色調(diào)圖形作壓縮和解壓縮的標準．這個標準是由ISO/IEC JTC1/SC29 WG10所訂定。
壓縮算法為正、反離散余弦轉(zhuǎn)換，如下圖：

網(wǎng)頁設計中彈出窗一般用于簡短的文字介紹，是十分常用的一個代碼。通過CSS3動畫樣式，我們可以實現(xiàn)不同交互的彈出框。

下面這個DEMO演試有19種不同動畫效果的彈出窗，如向上、向左、右、全屏、漸變展示等等。

在線演試 代碼下載

　　一個頁面的細節(jié)，從重構(gòu)的角度去看，頁面的精細度，代碼的可讀性、擴展性，為下游服務的代碼注釋，交互接口樣式的書寫，代碼的壓縮，圖片的優(yōu)化等都可以歸為細節(jié)處理，我的理解是，剛才提到的細節(jié)處理是每個重構(gòu)工程師都應該具備的基本技能，不能算是真正意義上的細節(jié)，好的細節(jié)處理應該是從用戶出發(fā)，應該是發(fā)自內(nèi)心對用戶的一種關懷。下面有兩個小例，都是我們做頁面時常見的板塊，如果我們細心處理一下，也許會讓用戶會倍感貼心。

一.摘要

本系列文章將帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗和解決方案,  即使你會使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.

本文是介紹兩個最常用的jQuery插件. 分別用于表單驗證和自動完成提示(類似google suggest).

二.前言

研究別人的作品真是一件花時間而且痛苦的過程. 當然也和本人英文不好有關. 總覺得控件作者寫了很多文檔但是都不夠系統(tǒng), 需要深入研究很多的實例后才能了解作者的思路.所以學習和研究一個插件需要很高成本, 如果發(fā)現(xiàn)了Bug并修復需要的成本也是未知數(shù)(本次我花了較少的時間解決了自動完成提示插件的一個中文bug, 但是如果復雜的bug就不會這么簡單了.).

對于簡單應用我首先推薦上文中的jQuery UI. 但是jQuery UI解決的問題有限. 使用jQuery插件是我們最后的一個好辦法---還算是好辦法, 起碼比自己開發(fā)要好吧?

很多jQuery的插件編碼異常優(yōu)美, 看一看藝龍首頁現(xiàn)在的城市輸入框控件, 除了需要為輸入框手工添加很多很多屬性(onkeyup, onkeydown等等), 而且還不夠通用, 占用服務器資源和網(wǎng)絡資源.但是當初也是花費了很久的時間完成的作品.

站在巨人的肩膀上, 讓我感覺寫腳本和寫設計C#程序一樣, 都有高度和深度可以挖掘. 除了使用作者開發(fā)好的功能, 還可以學習如何開發(fā)和封裝javascript控件. 看過優(yōu)秀的jQuery插件作者的代碼和設計思想后, 常常自嘆設計水平差距居然如此之大, 增加自認為腳本高手, 比較過后就是C#程序員和架構(gòu)師之間的差距.

希望大家通過本章節(jié)介紹的兩個插件, 除了學會如何使用,  還能夠略微領悟到如何封裝和設計javascript控件.

一.摘要

本系列文章將帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗和解決方案,  即使你會使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.

本文是實戰(zhàn)篇. 使用jQueryUI完成制作網(wǎng)站的大部分常用功能. 

二.前言

經(jīng)過公司內(nèi)部收集, 整理了一些經(jīng)常使用javascript實現(xiàn)的功能.  實現(xiàn)這些功能的主角不是讓人眼花繚亂的jQuery插件,  而是jQuery UI.

如果你還在為了一個小小的而去下載并安裝插件, 發(fā)現(xiàn)Bug還沒有人替你解決. 記住插件是我們沒有辦法的最后選擇.

使用插件有太多的壞處:

1.不利于維護

2.增加頁面大小

3.不利于成員間交流共享,具有學習成本.

4.不夠健壯, 不能保證插件版本一直更新并修復所有問題.

下面就引入今天的主角:jQuery UI

一.摘要

本系列文章將帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗和解決方案,  即使你會使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.

我們經(jīng)常要使用腳本處理各種業(yè)務邏輯, 最常見的就是數(shù)組和對象的操作. jQuery工具函數(shù)為我們操作對象和數(shù)組提供了便利條件.

二.前言

大部分人僅僅使用jQuery的選擇器選擇對象, 或者實現(xiàn)頁面動畫效果. 在處理業(yè)務邏輯時常常自己編寫很多算法. 本文提醒各位jQuery也能提高我們操作對象和數(shù)組的效率. 并且可以將一些常用算法擴充到jQuery工具函數(shù)中, 實現(xiàn)腳本函數(shù)的復用.

一.摘要

本系列文章將帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗和解決方案,  即使你會使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.

本篇文章屬于臨時插播,  用于介紹我在本公司的jQuery實施方案. 

二.前言

有了前幾章扎實的基礎知識我們已經(jīng)可以在項目中投入使用jQuery了.再繼續(xù)深入學習jQuery前插播一下我的jQuery實施方案.

每個公司的情況都不同.比如我們公司的頁面文件都為用戶控件, 物理路徑和虛擬路徑?jīng)]有絕對的關系, 所以無法使用相對路徑(否則生產(chǎn)環(huán)境中會找不到文件).  項目繁多, 同一個虛擬目錄的不同文件夾對應不同項目工程等等.

此方案并不是通用的, 但是有些方法可以借鑒, 同時也是希望能和大家一起討論幫忙指正. 

一.摘要

本系列文章將帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗和解決方案,  即使你會使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.

開發(fā)人員一直痛疼做動畫. 但是有了jQuery你會瞬間成為別人(那些不知道jQuery的人)眼里的動畫高手! 本文將介紹jQuery的動畫相關函數(shù).原來做動畫如此簡單!

二.前言

本系列文章的實例都是針對某一個技術細節(jié)的, 因為我們要學習的是基礎知識, 雖然總有人希望要復雜一些的應用示例, 但是我想還是讓我們先把基礎打牢,  有了扎實的基礎憑借每個人的智慧一定能創(chuàng)造出更多更好的應用.

就在寫這篇文章的前幾天, 還有不止一個同事在為了"彈出層"效果而犯愁. 但是以后再面對這樣的功能看過本篇文章的每一個人都可以開心的微笑了. jQuery,  make work easy !

一.摘要

本系列文章將帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗和解決方案,  即使你會使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.

本篇文章講解如何使用jQuery方便快捷的實現(xiàn)Ajax功能.統(tǒng)一所有開發(fā)人員使用Ajax的方式.

二.前言

Ajax讓用戶頁面豐富起來, 增強了用戶體驗. 使用Ajax是所有Web開發(fā)的必修課. 雖然Ajax技術并不復雜, 但是實現(xiàn)方式還是會因為每個開發(fā)人員的而有所差異.jQuery提供了一系列Ajax函數(shù)來幫助我們統(tǒng)一這種差異, 并且讓調(diào)用Ajax更加簡單.