憂藍夢境‧部落格 » Web 2.0 http://blog.linym.net 我的學習心得、筆記 Fri, 09 Dec 2011 12:33:34 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 [CSS]滑鼠移過表格列變色及附加連結效果 http://blog.linym.net/archives/219 http://blog.linym.net/archives/219#comments Sat, 08 Mar 2008 05:06:43 +0000 lym520 http://blog.linym.net/archives/219 老實說這個標題不知道要怎麼下比較好理解。我想要滑鼠移過表格某一列時會變色，而且不只超連結的文字可以點，而是整列都有連結效果....囧...先直接看 Demo 吧！
要達到這種效果，很多教學都是使用 JavaScript 裡的 onmouseover、onmouseout 及 onclick 事件來達成，不過現在有純 CSS 的解法，並且通用多數瀏覽器，這個技巧其實在很多國外網站看過，不過昨天向艾德請教之後才真正學起來^^


#tb td a {
    display: block;
    height: 35px;
    line-height: 35px;
    background: #FFF9E0;
}
#tb td a:hover {
    background: #E2D9B2;
}

關鍵就是使用 display: block 將 a 顯示為區塊元素，然後依照需求設個高度或寬度給它即可，line-height 給予相同高度可以確保文字垂直置中，這樣比使用 JavaScript 方便多囉。

]]> http://blog.linym.net/archives/219/feed 5 UrMap API 基本應用 http://blog.linym.net/archives/164 http://blog.linym.net/archives/164#comments Thu, 02 Aug 2007 17:13:14 +0000 lym520 http://blog.linym.net/archives/164 UrMap 和 Google Map 都是很不錯的線上圖資系統，不過由於 UrMap 是由國人開發維護的，所以目前還是比較適合台灣人使用，尤其在查詢街道方面比 Google 精確。

而這兩套系統也都有釋出各自的 API，讓我們可以做許多的應用，這次幫同學的專題作一個簡單的 Demo，功能是假設有個程式會透過 GPS 接收器取得座標，然後將座標寫入檔案，Web Server 網頁則會定時讀取及更新地圖，標示出目標現在的位置，算是一個基本應用囉！

首先不管是 UrMap API 還是 Google Map API，使用之前都要先申請授權碼(Key)，並且將它加入您的網頁裡面，所以只能在您登錄的網址顯示地圖。

接下來顯示地圖部份請參考 Demo 網頁原始碼，其他功能在 API 說明文件都寫得很詳盡。

]]> http://blog.linym.net/archives/164/feed 0 jQuery Plugin http://blog.linym.net/archives/135 http://blog.linym.net/archives/135#comments Wed, 09 May 2007 17:44:50 +0000 lym520 http://lym.fyman.idv.tw/blog/archives/135 jQuery 是個不錯的 JavaScript library，可以省略不少繁瑣的細節，且檔案大小又不大，最近都用它來開發網頁。同時也注意到了一些好用的 Plugin，主要是應用在 Ajax 上，有現成又好用的就不用再自己寫囉！

  1. Validation
    可用來做即時欄位驗證
  2. History
    無法回上一頁算是 Ajax 的一項缺點，用這個 plugin 可以做出回上頁的效果
  3. jEditable
    提供就地編輯(Edit In Place)的功能
  4. ajaxFileUpload
    利用隱藏 iframe 達到不換頁上傳檔案
  5. Ajax File Manager
    加強 tinymce 這個線上編輯器，可瀏覽檔案及上傳檔案
  6. Interface
    提供非常大量的動態效果，必試。
  7. Form
    使用 Ajax 送出表單資料
]]> http://blog.linym.net/archives/135/feed 0 [CSS] 使多欄式版面高度等高 http://blog.linym.net/archives/134 http://blog.linym.net/archives/134#comments Mon, 07 May 2007 07:21:25 +0000 lym520 http://lym.fyman.idv.tw/blog/archives/134 解決了上一篇的高度不能自動延伸的問題之後，馬上會遇到另一個問題。#container 和 #content 延伸了，旁邊兩個區塊卻仍然維持原本的高度，如果要指定背景就很麻煩了。

01.png

解決方法：
加入以下 CSS：


#container {
	overflow: hidden;
}
#left, #right {
	padding-bottom: 1000px;
	margin-bottom: -1000px;
}

利用 padding-bottom 設一個足夠容納所有內容的值
再用 margin-bottom 設相同的負值，將版面拉回來
這樣超過的版面就會被 overflow: hidden 隱藏，達到我們想要的效果。

參考文章

]]> http://blog.linym.net/archives/134/feed 0 [CSS] 重直多欄式版面自動延伸高度 http://blog.linym.net/archives/129 http://blog.linym.net/archives/129#comments Mon, 07 May 2007 07:06:05 +0000 lym520 http://lym.fyman.idv.tw/blog/archives/129 最近製作網頁開始試著用純 CSS 來排版了，習慣之後發現真的比表格排版更方便，不過當中也會遇到一些問題，其中一個就是這篇要講的。
現在有個三欄式版面，如圖：

01.png


#container {
	margin:0 auto;
	width: 780px;
	height: 100px;
	background: #ffc;
	border: 1px solid #000;
}
#left {
	float: left;
	width: 260px;
	background: #9cf;
}
#content {
	float: left;
	width: 260px;;
	background: #fcf;
}
#right {
	float: right;
	width: 260px;
	background: #9cf;
}

原本預期當任何區塊內容過多時，外層 container 要能夠自動延伸，包住裡面的子區塊，但實做之後會發現變成這樣：
02.png
解決方法：
#container 裡不要指定高度，也就是維持預設的 height:auto; 同時加入 overflow: hidden; 即可。


#container {
	margin:0 auto;
	width: 780px;
	background: #ffc;
	border: 1px solid #000;
    overflow: hidden;
}

記得不能指定高度，否則溢出的內容會被隱藏。

解決這個問題之後通常會遇到下一個問題...

]]> http://blog.linym.net/archives/129/feed 13 Lightbox 收集 http://blog.linym.net/archives/106 http://blog.linym.net/archives/106#comments Sat, 10 Jun 2006 17:00:02 +0000 lym520 http://lym.fyman.idv.tw/blog/archives/106 最近很容易可以看到這個效果，也就是當您點選網頁中的圖片或連結時，背景會立即變暗並且出現 Loading... 然後跳出一個美美的方框顯示圖片或網頁，這種效果就叫做 Lightbox，底下收集了一些許多人開發或修改的 Lightbox，通常都會有 Demo，看個人喜好選擇囉。

‧Lightbox JS
典型也是最常見的一個，目前也出了 2.0 版，不過似乎只能顯示圖片而已。

‧ThickBox
這個也是很常見，可以顯示圖片、網頁，並且可指定方框的大小，推薦。

‧Greased Lightbox
提供裝在瀏覽器的擴充套件，平常看圖片時就會有 Lightbox 效果。

．GreyBox
這個就厲害了，除了可以用於圖片和網頁外、連 flash、影片都可以顯示在 Lightbox 彈出的方框裡面。

‧Lightbox Gone Wild!
也是可以顯示網頁、圖片，效果還不錯。

‧Lightbox plus
增加圖片縮放功能，對於圖片尺寸大於螢幕解析度時可以點選放大的圖示，觀看圖片完整尺寸。(由 RB 補充)

‧Lightbox Jojo
在顯示圖片前可以先瀏覽一張圖片，圖片開啟後可以在圖片的上個圖層再放一張圖片。(由 RB 補充)

]]> http://blog.linym.net/archives/106/feed 8 [Ajax] 實作 Gmail 的載入訊息 http://blog.linym.net/archives/94 http://blog.linym.net/archives/94#comments Tue, 02 May 2006 10:48:42 +0000 lym520 http://lym.fyman.idv.tw/blog/archives/94 進入 Gmail、Calendar 等 Google 的服務，時常會看到右上角有個紅底白字的「載入中...」，拿來當第一個 Ajax 的練習。
基本作法就是利用一個 DIV 區塊，預設為不顯示，等到呼叫 JavaScript 建立 XMLHttpRequest 時，將 DIV 區塊設為顯示，最後等伺服器後端傳回訊息時再隱藏區塊即可。這個範例是使用者輸入訊息，由 PHP 處理並顛倒字串印出。
Demo
網頁部分：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Ajax Test</title>
<script type="text/javascript">
var ajax;

function createHttpRequest() {
    if (window.ActiveXObject) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                return null;
            }
        }
    } else if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return null;
    }
}

function ajaxSendRequest(url) {
	var msg = document.getElementById('msg').value;
    document.getElementById('loading').style.display = "block";
    ajax = createHttpRequest();
    ajax.onreadystatechange = showResult;
    ajax.open("GET", url + '?message=' + msg);
    ajax.send("");
}

function showResult() {
    if (ajax.readyState == 4 && ajax.status == 200) {
        document.getElementById('loading').style.display = "none";
		document.getElementById('echo_msg').innerHTML = ajax.responseText;
    }
}
</script>
<style type="text/css">
#loading {
	position: absolute;
	width: 50px;
	height: 20px;
	line-height: 20px;
	top: 5px;
	right: 5px;
	font-size: 12px;
	background-color: #C44;
	color: #FFF;
	text-align: center;
}
</style>
</head>

<body>
<div id="loading" style="display:none">載入中...</div>
請輸入英文訊息：<input type="text" id="msg" /><br />
<div id="echo_msg"></div>
<input type="submit" id="Submit" value="送出" onclick="ajaxSendRequest('echo.php')" />
</body>
</html>

PHP 部分：


<?php
$message = $_GET['message'];
sleep(2); // 睡一下吧,不然"載入中"會太快消失
echo strrev($message);
?>
]]> http://blog.linym.net/archives/94/feed 8 跨平台網頁設計：使用 Web 標準技術 http://blog.linym.net/archives/66 http://blog.linym.net/archives/66#comments Mon, 06 Feb 2006 15:12:09 +0000 lym520 http://lym.fyman.idv.tw/blog/archives/66 如果還不知道什麼是 WEB 標準、什麼是 W3C，或者你的網頁只能在 IE 正常瀏覽，換到其他瀏覽器就完全走樣，那就更應該看這本書。從不符合標準網頁所產生的問題開始，完整的帶領我們進入 WEB 標準的世界，並且以專題形式撰寫符合標準的網頁，是一本觀念很完整的書。
1310602695.gif

]]> http://blog.linym.net/archives/66/feed 0 CSS 網頁設計師手札 http://blog.linym.net/archives/64 http://blog.linym.net/archives/64#comments Mon, 06 Feb 2006 15:02:25 +0000 lym520 http://lym.fyman.idv.tw/blog/archives/64 想要寫出符合 Web Standards 又美觀的網頁，CSS 的運用一定是少不了的，所以幾個月前買了幾本 CSS 的書籍，這本書列出了 101 個將 CSS 運用在網頁上常會遇到的問題和技巧。尤其是後面的『CSS 定位與版型』，對設計 Web Standards 網頁有非常大的幫助。
1261981769.jpg

]]> http://blog.linym.net/archives/64/feed 0