一些平鋪直敘技術相關文: 8月 2012

2012年8月23日星期四

好用的程式碼編輯器Sublime Text

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

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

2012年8月20日星期一

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>
</body>
</html>

使用HTML5方式 :

優: 不需額外匯入jquery.
缺: 只能在可以使用HTML5的瀏覽器.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>搜尋框預設文字+點按後預設字消失</title>
  <style>
  #target {color: #666;}
  button{background: #555;coloR: #fff;}
  </style>
</head>
<body>
<form>
  <input id="target" name="target" type="text" placeholder="type something" />&nbsp;<button>search!</button>
</form>
</body>
</html>

2012年8月18日星期六

瀑布流布局練習

前些陣子有一次在看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/

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

目前在資料庫都建好資料了，其中一欄可以設定倒數計時的時數，型態是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="sec time_block"></div>
<div class="buybtn"><a href="#" title="buynow"></a></div>
</div>

<script language="JavaScript">
    var DIFFERENCE_HOUR,DIFFERENCE_MINUTE,DIFFERENCE_SEC =1; 
    var hoursms = 60 * 60 * 1000;    
    var Secondms = 60 * 1000;      
    var microsecond = 1000;

function clock()
    {
      var Expiration_time = new Date("2012/8/18 21:00:00");   //到期時間
      var time = new Date();//取得現在的時間資料
      var minute = time.getMinutes();//現在的分
      var second = time.getSeconds();//現在的秒
      //計算現在的時間資料與倒數標的之差異
      var convertHour = DIFFERENCE_HOUR;
      var convertMinute = DIFFERENCE_MINUTE;
      var convertSecond = DIFFERENCE_SEC;
      var Diffms = Expiration_time.getTime() - time.getTime();
      DIFFERENCE_MINUTE = Math.floor(Diffms / hoursms);
      Diffms -= DIFFERENCE_MINUTE * hoursms;
      DIFFERENCE_SEC = Math.floor(Diffms / Secondms);
      Diffms -= DIFFERENCE_SEC * Secondms  ;
      /*$('.day').html="";  $('.ho').html="";   $('.min').html="";*/   //div區塊內容初始化 可略
      if(convertMinute != DIFFERENCE_MINUTE){$('.ho').html(DIFFERENCE_MINUTE)};
      if(convertSecond != DIFFERENCE_SEC){$('.min').html(DIFFERENCE_SEC)};
      var dSecs = Math.floor(Diffms / microsecond);
      $('.sec').html(dSecs);  
      setTimeout("clock()",1000);//每1秒不斷自動呼叫 clock() 每秒更新一次
    } 
  </script>

</body>
</html>

2012年8月15日星期三

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() {
    $('#slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...source:http://jquery.malsup.com/cycle/basic.html
    });
});
</script>


</head>

這段內容都沒有問題
首先一定要匯入jQuery.js <script type="text/javascript" src="js/jquery-1.6.min.js"></script>
再來要匯入jQuery Cycle Plugin的js<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>

然後貼上javascript

$(document).ready(function() {
    $('#slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...source:http://jquery.malsup.com/cycle/basic.html
    });
});

id為slidshow的div區塊套用fade的這個特效。

接下來來看div id="slideshow"的內容 :

<div id="container"> 
  <div id="slideshow">
  <img src="images/20110914-03.jpg" alt="照片slideshow"  />
  <img src="images/002.jpg" alt="照片slideshow"  />
  </div>
</div>

整個html頁面的程式碼如上，瀏覽時問題出現了，效果不但沒有起作用，而且還出現consolelog的問題:

順個這個log去看一下jquery.cycle.all.latest.js:28 第28行，很好，看不懂 = =
最後比對與之前做過的練習結果才發現問題在於img的width跟height的屬性，(當初還以為是圖片格式還是我的selector下錯。)

最後解決的方法是，被套用效果的該div標籤的img加上width="" 屬性跟 height=""屬性(其中一個有加就可以work)，就可以運作了。

<img src="images/20110914-03.jpg" alt="照片slideshow"  />
<img src="images/002.jpg" alt="照片slideshow"  />

可運作code:

<img src="images/20110914-03.jpg" alt="照片slideshow" width="500" height="200"/>
<img src="images/002.jpg" alt="照片slideshow"  width="500" height="200"/>

//width跟height屬性，只要其中一個有就可以運作。

-end

2012年8月12日星期日

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

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

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"其背景為紅色。

*什麼情況選擇一才會奏效呢?

TEST

<div class="red">

this is yellow!

</div>

</div>

像這樣就會，寫在div id="test"裡面的所有有使用到class="red"的元素，那麼選擇一那種空一格的寫法才會奏效。

有點抽象，多錯幾次就知道了

Note by DOFI: 空格表示階層，不空格表示屬性

(曾經失敗的人留)

訂閱：文章 (Atom)

一些平鋪直敘技術相關文

2012年8月23日星期四

好用的程式碼編輯器Sublime Text

2012年8月20日星期一

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

2012年8月18日星期六

瀑布流布局練習

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

2012年8月15日星期三

jQuery Cycle Plugin的consolelog的一個問題

2012年8月12日星期日

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

Vue multiselect set autofocus and tinymce set autofocus

關於我自己

2012年8月23日 星期四

2012年8月20日 星期一

2012年8月18日 星期六

2012年8月15日 星期三

2012年8月12日 星期日

2012年8月23日星期四

2012年8月20日星期一

2012年8月18日星期六

2012年8月15日星期三

2012年8月12日星期日