發表文章

目前顯示的是 七月, 2012的文章

使用jquery做滑鼠移動變換底色

圖片
這標題真的不知道該怎麼下比較好,總之就是用jquery做出滑鼠移動過去改變底色,然後滑開後又換回原本的底色的意思,常用在一般網站上的menu或是navbar,或者是看商品時有時候會出現此功能,利用簡單的技巧增加與使用者的互動性。
同樣的作法寫法有好幾種,這只是其中。


1.首先先建立三個類別名為demo的div
   裡面分別塞入一個P標籤 (->這裡的P標籤是要使用jquery計數的,如圖的1 2 3 數字,就是塞在這個P標籤裡)
   然後準備三張圖隨意命名,我是分別命名為001.jpg 002.jpg 003.jpg
<div class="demo"> <p></p> <img src="001.jpg" width="200" height="160"><br/>PHOTO1 </div> <div class="demo"> <p></p> <img src="002.jpg" width="200" height="160"><br/>PHOTO2 </div> <div class="demo"> <p> </p> <img src="003.jpg" width="200" height="160"><br/>PHOTO3 </div>
2.接下來在<head>標籤裡增加style標籤,
   為class='demo'增加css樣式
  (也不一定真的要放head,只是通常會放那裏)
.demo { background-color:#FFFFFF none repeat scroll 0 0; border:1px solid #999999; margin:5px; padding:5px; position:relative; widt…

超實用的css漸層"按鈕"產生器->css3pie

圖片
快速連結到css3pie http://css3pie.com/

超實用的css漸層產生器

圖片
廢話不多說之超實用的css漸層產生器連結網址(go!): http://www.colorzilla.com/gradient-editor/

用jquery控制checkbox全選或不全選

圖片
今天剛好遇到一個需要用jquery去做checbox出可以全選或是取消全選的功能,這樣的功能常出現在信箱管理,或者是購物清單等等。此做法雖然有很多多餘的句子,但至少還蠻好理解的..(對我來說xd ) 我的作法:
$(function(){ $("input[type=checkbox]:eq(0)").click(function() { if($("input[type=checkbox]:eq(0)").attr("checked")) { $("input[type=checkbox]:gt(0)").each(function() { $(this).attr("checked", true); }); } else { $("input[type=checkbox]:gt(0)").each(function() { $(this).attr("checked", false); }); } }); })

(有中文註解的)
$("input[type=checkbox]:eq(0)").click(function() { //當第一個checkbox被click(按下)之後執行以下function if($("input[type=checkbox]:eq(0)").attr("checked")) //如果第一個checkbox已經有checked的屬性 { $("input[type=checkbox]:gt(0)").each(function() { $(this).attr("checked", true); //那麼第0個(也就是畫面上的第一個checkbox)之後(gt(0))所有的(each)每個checkbox都讓他的屬性變成checked }); } else //不果第一個…

網路演進的教學網站

圖片
這是昨天上網時的新發現
這個網站提供了網路演進的時間圖表  http://evolutionofweb.appspot.com/?hl=zh-tw
非常明瞭的網路演進圖,算是很好的教學網站
他總共分為兩大項 分別為"瀏覽器與技術" ''網路發展史'
真的很受用,可以看一下

製作群Google Chrome 小組的部分成員2011 與 2012 版作者:HyperaktVizzuality2010 版作者:mgmt designGOOD資源Wikipedia、CanIUse.com、W3C、HTML5rocks.com 及 Mozilla Developer Network資訊圖表中的瀏覽器螢幕擷取畫面全都是網路社群的心血結晶。

TIPS: 如何將圖片在網頁變成全螢幕

圖片
好久沒寫東西..。 有礙於我的國文造詣程度,這篇的標題實在很難下,以前我也曾經為了想網頁的效果,想要把一張圖片,100%當作網頁的背景,但是以前一直沒設定成功,不知道關鍵字該怎麼打才能找到我的要的效果,簡單來說就是怎麼把一張圖片變成網頁的背景。今天無意間找了兩個關聯的網址,分別有其教學,可以參考看看,特地記錄下來,以免下次忘記

Make a Full Screen Image Background With a Line of CSS

這是第一個網站,標題換句話說是如何使用css使得圖片在瀏覽器全螢幕 這個教學真的簡潔有力,但全螢幕也是有分cover跟contain的 [contain就是依照圖片的比例去放大到全螢幕(不會有畫面被裁切)]

Perfect Full Page Background Image

這是另外一個教學網站,不過他提供的source比較多,但沒有上面的簡潔有力。 可是他除了有分析不同瀏覽器可以用哪一種css寫法之外 也提供jquery的全螢幕的寫法。

PPT note:jQuery的事件(3)之事件處理

窩窩窩!
終於這幾天慢慢累積看了12個方法,真是濃縮濃縮再濃縮才擠出來的時間,
不過這次看我覺得比較抽象一點.... 我是指event這一類的方法
(後來加上(3)是因為我看了之後發現event還有很多分類,而我剛好看的指示屬下來第三個li。)
還不是很清楚該怎麼實用他
但是總要看過才會有印象,這樣才安全...
就像有經驗的人說的 : 
我們會從工作中實際經驗慢慢累積。

Zen coding for notepad++ Download

Zen coding 是一套極速的css與html開發工具
常使用notepad++開發的人或許會很需要他
第一次接觸到這個zen coding的時候深覺他實在太重要了
zen coding提供很多文件編輯器的外掛安裝
其中notepad++的zen coding外掛網址如下 :

下載網址: http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Notepad%2B%2B.v0.7.zip Zen Coding cheat sheet (PDF)下載網址:http://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdf 安裝方式解壓縮後裡面有個.txt檔會說明
其實只是搬資料到notepad++根目錄裡面的plugins資料夾而已
參考文件 : Zen Coding - 極速開發HTML最重要的利器之一http://code.google.com/p/zen-coding/

PPT note:jQuery的Attributes

隔了整整一周後終於又看了第二種章節
也就是attributes
做了自己看得懂的筆記
jquery真是在我心中真是越來越強大了....

PPT note:jQuery的CSS方法

這是這兩天宅在家寫的筆記,95%都是觀看jQuery的官方文件在學習
這次的筆記用PPT寫,也是剛好拉
看官方文件有些許的乏味..... 一度會看到睡著這是真的...
不過目前還沒有走到應用的層面,所以 關於CSS()的部分,
也只是大概說得出哪個是做什麼用的
待續....  我應該還有三個部分要看.... (看得好慢呀!)
hope help you&me!