發表文章

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

好用的程式碼編輯器Sublime Text

圖片
Sublime Text
昨天同事介紹給我的這個編輯器,試了一下真的很好用呢。
真的是繼notepad++之後名列第二個我最愛的編輯器了,介面好看也比較不傷眼睛,
folder資料夾管理也很好用,
用起來就很想學好東西(開玩笑的,沒這麼誇張xd)。

-推薦給正在尋找好用文字編輯器的朋友們。

input欄位預設文字+點按後預設字(value值)消失

圖片
今天有個朋友問我這個問題,結果我還真的忘記這個功能怎麼做....。
所要的需求就是網頁上有個input欄位,類似那種搜尋框吧
然後希望點按到搜尋框時,預設的文字可以消失。

使用jQuery的方法:
優: 適用於不支援html5的瀏覽器(IE8以上).
缺: 必須先匯入jquery.
     在IE必須先允許執行ActiveX控制項.

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>搜尋框預設文字+點按後預設字消失</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <!--匯入jquery是必要項目--> <style> #target {color: #666;} button{background: #555;coloR: #fff;} </style> <script type="text/javascript"> $(function(){ $('#target').click(function() { //$(this).val(""); $('input[name="target"]').val(""); }); }); </script> </head> <body> <form> <input id="target" name="target" type="text" value="type something" />&nbsp;<button>search!</button> </form>…

瀑布流布局練習

圖片
前些陣子有一次在看taobao 部落格文章(同事推薦看的)的時候,其中有一篇提到"瀑布流布局",第一次聽到這個名詞,今天終於有機會可以試一下,其實不會很複雜,大概的原理也很容易摸索的到,(但是有的網站瀑布流看起來好像做的很深奧...,想說應該大部分是用浮動去做,但有看過有的是用絕對定位跟相對定位,搭配top跟left的位置去做)。
上網查一下沒想到還真的有"瀑布流"這個名詞,我的作法類似於taobao的這篇教學文章`,但不是完全,只是去猜測他的做法而做的 ,當然也有看過 其他做法的,但比較難理解,還是覺得taobao寫的易懂多了。
詳細的教學請看這篇 : 瀑布流布局浅析
kissy的waterfull教學[代碼詳細選擇多=>推薦] : http://docs.kissyui.com/docs/html/demo/component/waterfall/ 至於 瀑布流的名詞解釋 可看: http://baike.baidu.com/view/7151782.htm 有做瀑布流網站 :
http://pinterest.com/danilobrizola/mobile-user-interface/?timeline=1 http://wow.taobao.com/

尋找解決方式:javascript的倒數計時....

圖片
自從不知道多久之前看到了網購網站的倒數計時的功能,心裡有個底大概能夠理解那是怎麼弄出來的,很想試一下,還稍微美編過我的圖,但是我弄不出來 = = "(跪)。

目前在資料庫都建好資料了,其中一欄可以設定倒數計時的時數,型態是int,想要利用最low的迴圈的方式載入每一筆的資料以及其倒數時數,分別倒數各筆資料的時間。

現在在網路上爬文的結果多半都是靜態的方式,做一個倒數的功能,所以javascript的事件都放在body標籤裡onload,所以我現在正卡我想要讓他迴圈,各筆資料跑各筆資料的倒數時數。
is anyone have better way to do?
疑問:有沒有可以不要用onload的方法來達成這個範例?

mycode:
(這個code來源是參考網路四面八方的範例,google搜尋:javascript倒數計時,基本上搜尋到的結果大同小異 )
主要參考來源:
[PHP][JavaScript][CSS] 倒數計時之範例
[jQuery] 倒數計時(還有X天X時X分X秒)


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>只是練習</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body onload="clock();return true">
<div class="wrapper" >
  <div class="ho time_block first"></div>
  <div class="min time_block "></div>
  <div class="…

jQuery Cycle Plugin的consolelog的一個問題

圖片
jQuery Cycle Plugin應該很多人都用得很習慣了。只要是想要做幻燈片效果的,或是圖片動畫特效,一般來講我只會想到jQuery Cycle Plugin或是fancybox這兩種。jQuery Cycle Plugin算是非常好上手,步驟最簡單的不超過3步驟,就能達到效果:

link css跟js檔案 貼上javascript加上要輪播照片的div 跟id   img標籤。

先來個jQuery Cycle Plugin的連結 http://jquery.malsup.com/cycle/

然而今天再練習套用jQuery Cycle Plugin的時候發現了一個bug,關於圖片的bug,這個標題很難下,但說不定只有我有這個問題?!,看到這個問題還蠻訝異的,之前套用這個效果非常成功,但今天重新套用卻出了問題,在我的chrome console log 出現了[以下]這樣的問題。


[cycle] 1 - img slide not loaded, requeuing slideshow: http://127.0.0.1/myweb/images/20110914-03.jpg 0 0
行數 :/myweb/js/jquery.cycle.all.latest.js:28
了解一下整個html檔的狀況:
先來一段<head>標籤之前的內容:<html> <head> <title>練習</title> <script type="text/javascript" src="js/jquery-1.6.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $(&…

CSS寫法,一個空格差很多...

圖片
這是最近常犯的愚蠢錯誤,可見是少練習CSS的錯誤,那就是"空一格"。
做個簡單的解說 :
/-----------------------------------------------------------------------------------:
Q : 比方說在一個html檔案裏建立一個div id名為test的區塊,
其class為red(我想要讓他背景變成紅色)
此時CSS該如何下?

<div id="test" class="red"> TEST </div>
(參考結果,圖片故意放小的,怕眼睛太閃)

選擇一 : #test .red{background:yellow}   (#test與.red有空一格)
選擇二 : #test.red{background:red}       (#test與.red沒有空一格)
答案是選擇二,選擇一是錯的,並不是因為background打成yellow而錯,故意寫yellow是要來除錯用的,為什麼是選擇二呢(沒有空一格的),因為<div id="test" 後面緊接著class="red">因此其css中間不需要空一格,想想CSS為甚麼叫做CSS,串接樣式表阿~,#test.red換成中文的講法就是#test"的(.)"class"red"其背景為紅色。


*什麼情況選擇一才會奏效呢? 
<div id="test"> TEST <div class="red"> this is yellow! </div> </div>
像這樣就會,寫在div id="test"裡面的所有有使用到class="red"的元素,那麼選擇一那種空一格的寫法才會奏效。 有點抽象,多錯幾次就知道了
Note by DOFI: 空格表示階層,不空格表示屬性
(曾經失敗的人   留)