仙人的設計之路

2012年11月4日星期日

在使用圖片檔的時候，無法（也不要）寫在CSS裡

我雖然不知道原因
但是網路上查到的資訊是這樣告訴我的，如果有錯，麻煩可以回文告訴我一下

img 這個 tag，如果你要把圖片來源 src = "xxxx.png" 寫在CSS裡，是沒有辦法的，應該說，寫了沒有用。雖然 Dreamwave 的 intelligent senses 還是會引導你在 CSS 的程式片段中幫你引導出 Src 的程式類似這樣：src:url(img/close-button.png);可是，實際執行，圖片就是不會出來。

解法一：
在 CSS 中不要用 src 屬性，而改用 background-image 屬性，當然，您也想到了，這樣很怪，且，這樣圖片會多出一個外框，無法消掉.......，這樣不算解決方案。

解法二：
不要寫在 CSS 當中，直接寫在 HTML 裡<img class = "ImgStyle" src="img/button.png" ></img>，這樣就解決了，只是，這個無法放到CSS當中，不知道的人，可能得花好久的時間才找得出原因呢。

CSS的註解是 /* xxxx */ 而不是別弄錯呀

因為Dreamwave CS6 有對程式碼做色彩區分
所以我相信他所以當我用  來加註解的時候，該段程式碼確實變成灰色，但是.......
實際上，他不是變成註解，導致整個CSS片段都被當成錯誤的而跳過
意外的多花費了我一個上午的時間找出為什麼我的 DIV 都突然無法正常呈現大小。

後來查很久才知道，原來是註解寫法寫錯了（昏）

2012年11月2日星期五

MouseDown之後的MouseMove時（拖動），控制滑鼠游標注意事項

底下這段程式碼最下方body內有四行被遮住的，可以逐一打開其中一個來感受一下，當你滑鼠游標滑入該物件裡面時，滑鼠游標會變成十字移動圖示，但是當你按著滑鼠移動，就會有不同了，在div跟table會顯示為輸入文字的符號，而在button跟img則顯示為移動的十字符號。怎麼回事？這是因為，前兩者是可包容其他物件的區塊物件，用來排版的，而後兩者是不可包容其他物件在其中的功能物件，系統預設按著滑鼠移動叫做拖動，而針對上述兩種類型的物件都預設了滑鼠的圖示，而且無法改（目前我還不會）。

所以如果要拖動物件，而且拖動的對象是個區塊物件，譬如拖動視窗，那會做不出效果來，建議可以放個功能物件在區塊物件上，就像是放個標題列一樣意思，讓使用者在功能物件上按下滑鼠，才觸發移動，並對區塊物件做移動，這樣就行了。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mouse Move</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>


<script>
$(document).ready(function(e)
{
$(".TheObj").mousemove(function(e)
{
$(".TheObj").text( "mouse moving" );
$(".TheObj").css( "cursor", "move" );
});
})
</script>


<style type="text/css">
.TheObj
{
width:600px;
height:400px;
border:solid;
cursor:pointer;
}
</style>

</head>


<body>





</body>
</html>

2012年11月1日星期四

iframe是無法處理事件的

iframe是無法處理事件的，首先，你在Tag裡頭，想輸入<iframe onClick = "aFunc()"，如果你在Dreamwave 或 Visual Studio 這類有 intelligent senses（忘記是不是這樣拼了）的提示功能的開發工具，你會發現他的提示當中，並沒有onXXXXX，也就是他不處理事件。而且如果想透過JQuery的方式來加入事件跟函式的關連，你會發現，intelligent senses有提示你Enevt可用，但是寫了之後，沒有作用。

你可以用底下的程式碼執行在瀏覽器看看，在body內，有遮掉三行，分別為div, span, iframe，你可以個別打開看看，會發現只有iframe沒有作用。所以，盡量不要在你的架構上「需要去處理iframe」的Event，不然，就不要用iframe了，把該頁面直接寫在這個HTML或PHP就好了。

當然，Google一下，你也會找到解法，比方從iframe內部的頁面傳事件到Parent來，或用AddListener之類的方式，但是有比較困難，暫時還是先避開就好吧。

<!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 language="javascript">
$(document).ready(function(e)
{
$("body").click(function(e)
{
alert('Mouse Click body.')
$(".OutScreen").text( "Click body" );
});

$(".button").click(function(e)
{
alert('Mouse Click button.')
$(".OutScreen").text( "Click button" );
});

$(".OutScreen").click(function(e)
{
alert('Mouse Click Screen.')
$(".OutScreen").text( "Click Screen" );
});
});
</script>



<style type="text/css">
.OutScreen
{
width:600px;
height:400px;
border:solid;
background:#FF6;
}
</style>
</head>

<body>
這個網頁展示的是在 Body 主體上，放了一個按鈕，跟一個來比較的物件，可發現，iframe是無法處理事件的<br>




<button class = "button">按鈕</button> <br>
</body>

</html>

FireFox與JavaScript的不相容：MousePosition與MouseEvent

先看Event吧

$(".DivDialogTitle").click(function (e) { DivClick(event); });
這種JQuery的寫法，可以把某個TAG物件的Click事件跟某個指定的函式關連在一起，可正常運作，沒有問題。

$(".DivDialogTitle").mousedown(function (e) { DivMouseDown(event); });
但是想把Mouse的事件跟某個指定的函式關連在一起，抱歉，FireFox辦不到（以後會不會更新成可支援，不曉得）

該怎麼做？得回到最原始的HTML語法在Tag中把事件跟函式綁定
<div onmouseup = "DivMouseUp(Event)" >

是的，改成這樣就行了
-------------------------------------------------------------------------------------------

再看滑鼠位置吧

事件函式假設如下

function DivMouseDown(e)
{
// 如果 e 是 null （有時候吧，意外發生），就把 e 設定為 window 的 event
if ( !e )
{
e = window.event;
}

var IeMousePosition = e.X;

var FireFoxMousePosition = e.PageX;
}

如上頭所列，想取得Mouse的位置，如果是IE或Chrome或Safari或Opera，你可以這麼用：e.X。如果是FireFox，那你得用e.PageX。

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事件的注意事項(二）

訂閱：文章 (Atom)

2012年11月4日 星期日

2012年11月2日 星期五

2012年11月1日 星期四

2012年10月31日 星期三

2012年11月4日星期日

2012年11月2日星期五

2012年11月1日星期四

2012年10月31日星期三