- Dec 04 Sun 2011 22:30
利用css實作導航欄
- Dec 03 Sat 2011 16:17
由Html5的佔位文字(placeholder text)搭配css的應用....
HTML5定義了10幾種的新的輸入型別，有興趣的朋友可以上W3CSchool看看詳細的教學文章，每個都能把玩看看，相當簡單易學。
今天在玩佔位文字時，突發奇想，要如何改變placeholder的文字顏色或者背景顏色呢? 上網爬文了一下，能用CSS解決。
- Dec 02 Fri 2011 22:45
用Dart試寫動態效果
- Nov 30 Wed 2011 22:13
Dart Learning Notes - Say Hello!
- Nov 27 Sun 2011 22:01
新一代的前端語言-Dart
在九月時，Google推出了前端結構化語言-Dart，簡單的說，就是以物件導向的方式撰寫前端語言，再透過Dart Editor的編譯，輸出一個js檔供前端網頁調用，意味著所有的瀏覽器均可執行Dart編譯出來的js。而另一種方式，是透過瀏覽器所內建的虛擬機器編譯，而程式透過<scripttype="application/dart"src="hi.dart"></script>方式(目前只有Chrome能以此種方式執行)匯入到html中。dart副檔名為就好像.cs or .vb一樣，可以把它看成是個類別檔。
而要在各家瀏覽器中裝載Dart的VM，除了Google自家的Chrome，Google承諾會裝載VM外，微軟首先持反對票，也許是商業利益上的考量吧，姑且不論這些瀏覽器廠商間的角力賽，Dart為程式設計師帶來的是更具可讀性、複用性更高的coding方式，一改javascript長久以來的許多詬病。看來前端網頁設計師也得學物件導向了XD。
- Nov 27 Sun 2011 19:22
Web SQL Database實作
HTML5的另一項功能，本地端資料庫，很可惜IE8、9目前尚未支援，採用的是SQLite的嵌入式資料庫，試寫了一次，還蠻簡單的，令人眼花撩亂的call back function除外
<!DOCTYPE html>
<html>
<head><title>Web SQL Database Test</title>
<script>
function pageLoad() {
//1024 * 1024 = 1 MB
//採用SQLite Script，Create Table :http://www.sqlite.org/lang_createtable.html
//W3C文件:http://www.w3.org/TR/webdatabase/#dom-sqltransaction-executesql
var SQLScript = 'create table if not exists tCustomer(id integer primary key autoincrement ,name varchar(10) default "")';
var db = openDatabase('dbBOM', '1.0', 'test database', 1024 * 1024);
document.getElementById('create').addEventListener('click', function () {
db.transaction(function (t) {
t.executeSql(SQLScript);
}, function (e) {
alert(e.message);
});
}, false);
document.getElementById('set').addEventListener('click', function () {
db.transaction(function (t) {
t.executeSql("insert into tCustomer(name) values('andy')");
t.executeSql("insert into tCustomer(name) values('bill')");
}, function (e) {
alert(e.message);
});
}, false);
document.getElementById('drop').addEventListener('click', function () {
db.transaction(function (t) {
t.executeSql("drop table tCustomer");
}, function (e) {
alert(e.message);
});
}, false);
document.getElementById('get').addEventListener('click', onGetData, false);
function onGetData() {
db.readTransaction(function (t) {
t.executeSql('select * from tCustomer', [], SetData);
});
}
function SetData(t, r) {
for (var i = 0; i < r.rows.length; i++) {
for (var o in r.rows.item(i)) {
alert(r.rows.item(i)[o]);
}
}
}
}
</script>
</head>
<body onload="pageLoad();">
<input value="建立資料表" id="create" type="button"><br>
<input value="刪除資料表" id="drop" type="button"><br>
<input value="插入資料" id="set" type="button"><br>
<input value="取得資料" id="get" type="button"><br>
</body>
</html>
- Nov 27 Sun 2011 14:40
LocalStorage筆記
1.根據預設在每個網域下為5MB的容量，IE8也支持LocalSorage，容量為10MB。
2.在Chrome中，localstorage的資料是以SQLite資料庫的格式存放。路徑(win 7)為C:\Users\用戶名\AppData\Local\Google\Chrome\User Data\Default\Local Storage。下載位址:http://www.sqlite.org/download.html，下載後點選localstorage的檔案按右鍵->開啟->從已安裝程式的清單選取程式 選擇以sqlite3開啟，如圖所示:
- Oct 31 Mon 2011 20:47
利用Reflection機制動態產生下拉式選單
有時候，我們會以下拉式選單呈現的方式讓User選擇想要的功能，再執行該功能。例如以下拉式選單增加兩個項目，匯出DOC及匯出PDF，並建立兩Class:CExportDOC、CExportPDF。分別在Class中建構匯出文件的程式碼，然後在aspx檔的Code Behind中寫個switch條件式，去產生新的執行個體執行方法。Ex:
CExportDOC doc = new CExportDOC();
- Oct 26 Wed 2011 20:12
利用PageMethods、JQuery AJAX、WebService接收DataTable型別的資料
有時候在前端頁面中想要到資料庫中查詢少許的資料，憑此資料寫相對應的判斷式。如果以postback方式回後端，會將整個頁面的資料(含ViewState、ControlState)一併傳回後端，再次歷經Page的生命週期，對系統來說，無一不是種負擔。即使是以UpdatePanel方式回後端，也同樣會巡覽Page一次，與PostBack不同之處，只是使用UpdatePanel的方式會將部分資料重新Render後回傳回前端(有包UpdatePanel的區塊)。其實，可以利用ScriptManager的PageMethods來實現ajax。網路上已有許多教學文章可供參考學習。如以下連結:
前端網頁相關技術 (5)
