仙人的設計之路

2012年10月31日星期三

HTML與JQuery處理Event事件的注意事項(二）

延續上一篇，我們來看一下解法，很簡單，只要把註冊函式的內容用$(document).ready(function()包起來就好了，請看下面程式碼的修改，你會發現，現在不論用Script 前區段或Script 後區段都正常了。這是因為$(document).ready(function()是告訴瀏覽器，當整份文件讀取好了之後，才來執行我的Ready()函式，這樣就不會有JQuery想取用，但是該ID物件尚未產生的情形。所以放哪裡都無所謂了。可以自己把<script>放到後段去試看看。

有個觀念要弄清楚，<script>原本的用意，是在HTML需要程式動態產生內容地方，用來做出動態內容，或特殊效果，但是發展至今，JQuery是讓你方便透過ID或CLASS來取用HTML的元件（把一切都物件化了），然而衍生出了「取用的ID的物件尚未產生」的問題，也用了Ready()函式來解決，但是記得，這樣會讓HTML載入之後，就立刻執行Ready()的內容，所以這裡多半用來註冊函式與事件，或宣告函式，而不是直接去操作物件做什麼事情，除非你真的有這種需求，要在HTML載入之後，操作什麼物件。

<!doctype html>

<head>

<title>jQuery (document).ready 教學</title>

$(document).ready(function()
{
var divClickCount = 0;

  $(".btnCount").click(function(e)
  {
$(".OutDiv").text( "Count = " + divClickCount );
divClickCount++;
});
});

</script>

.OutDiv

{

width:600px;

height:400px;

border:solid;

cursor:n-resize;

}

</style>

</head>

<body>

<button class = "btnCount" >Counter</button>

</body>

</html>

HTML與JQuery處理Event事件的注意事項(一）

首先，我們先看一段用HTML處理Event的程式碼，將以下的程式碼貼到Dreamware或是文字編輯軟體，然後執行此HTML檔，在瀏覽器觀看其結果。然後把Script 前區段遮掉，改把Script 後區段打開，然後執行此HTML檔，在瀏覽器觀看其結果。會發現結果是一樣的，沒有任何差別，就是在按鈕Click之後，在DIV裡面顯示被按了幾下。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery (document).ready 教學</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

  
<script>
var divClickCount = 0;
function BtnClick()
{
  $(".OutDiv").text( "Count = " + divClickCount );
  divClickCount++;
}
</script>

  
<style type="text/css">
.OutDiv
{
width:600px;
height:400px;
border:solid;
cursor:n-resize;
}
</style>

</head>

  
<body>
  <div class = "OutDiv"></div>
<button class = "btnCount" onClick="BtnClick()" >Counter</button>
</body>
</html>




---------------------------------------------------------------------------------------------------------------

再來，我們改用JQuery來處理事件，改成在Script區段註冊Event函式，並完成函式內容。如以下程式碼，你會發現，這次執行之後，點按鈕不會在DIV顯示訊息了。如果把前區段遮掉，改把後區段打開，發現，就正常了。

<!doctype html>

<head>

<title>jQuery (document).ready 教學</title>

var divClickCount = 0;

$(".btnCount").click(function(e)
{
  $(".OutDiv").text( "Count = " + divClickCount );
  divClickCount++;
});

</script>

.OutDiv

{

width:600px;

height:400px;

border:solid;

cursor:n-resize;

}

</style>

</head>

<body>

<button class = "btnCount" ~~onClick="BtnClick()"~~>Counter</button>

</body>

</html>

<!--

var divClickCount = 0;

$(".btnCount").click(function(e)
{
$(".OutDiv").text( "Count = " + divClickCount );
divClickCount++;
});

</script>

-->

為什麼會這樣？這是因為，如果把Script寫在前面，則網頁載入時，會先載入Script這塊，但此時JQuery所要的ID元件根本就還沒產生，因為還沒執行到Body，所以才會異常。能有什麼解決的方式嗎？有，請看 HTML與JQuery處理Event事件的注意事項(二）

2012年10月16日星期二

圓角與各家瀏覽器之間的注意事項

基本圓角語法：

border-radius
最早，在W3C的CSS3草案當中就已經定義了這個圓角元素。以 Presto 為引擎的瀏覽器（Opera 與 IE ）支援這個屬性，但IE9.0之後才實作進去。

衍生的語法：

-webkit-border-radius:5px;
-moz-border-radius: 5px;

在全面支援正規的 border-radius 之前，以 webkit 為引擎的瀏覽器（Safari, Chrome）則支援 -webkit-border-radius 的圓角，而 Mozilla 引擎的瀏覽器（Firefox）則支援 -moz-border-radius 的屬性，如果瀏覽器版本夠新，只要寫基本圓角語法 border-radius 就可以了不用針對各特殊瀏覽器來寫特別屬性。

不論正規或是衍生的語法都有子屬性，可針對左上角、左下角、右上角、右下角來作設定，比方：-moz-border-bottom-right-radius: 5px; 就是針對右下角設定圓角，給的數字越大，圓角越大、越圓。

圓角的屬性，在 body 跟 html 這兩個 TAG 有作用的，可是，只有在非IE或IE9.0以上的瀏覽器才有。

2012年8月26日星期日

手機網頁跟一般網頁差別

手機版的網頁，並不是一般網頁的縮小就行了

參考文章：謝子斌（Zi-Bin）發表於
http://www.techbang.com/posts/3928-moving-a-label-is-working-on-mobile-version-of-website

用手機上網正夯，但是有些網站會無法正常顯示，因為這些網頁是設計給電腦上觀看，如果網頁開發者沒有考慮到手機的裝置特性以及人們的閱讀習慣，就無法設計出手機上方便閱讀的網頁。說的簡單，但是要把既有網頁砍掉重練、再移植到手機上是一門大工程，筆者歸類四大方向。

一、與電腦共用同一套網頁

這裡的與電腦共用網頁，指的是電腦用的網頁完全不經修改、就直接給手機瀏覽。前提是網站本身的元素要夠簡單、版面不能太複雜。

二、製作手機專用網頁

這個做法在90年代非常盛行，當時電信業者的GPRS／WAP廣告打得正火熱，手機能瀏覽的網站都是WAP網站，也就是用WML編寫的手機網，WML是很簡陋的HTML，內容通常只有文字跟選單。

三、用瀏覽器來判斷裝置

Opera有桌面版和手機版，同樣的Chrome、Safari、Firefox也是。有的網站會使用瀏覽器嗅探機制(browsersniffing)來判斷你是用哪一種、什麼裝置的瀏覽器，不過browsersniffing的設定很繁瑣，而且經常出差錯。最快的方法是在網頁上加入各種版本的連結，讓瀏覽者可以自由選擇格式。