2012年4月1日 星期日

頁面遮罩


我們常常可以在Web上看到,當有事件在背景執行時,Web會跳出半透明的視窗遮住後面的頁面,如:


這裡主要是利用JavaScript控制layer(Z-Index),以及style的opacity和style的display達成,layer控制element之間的stack,也就是MS office裡面常常提到的,"往上/下一層",style.opacity則是透明度,style.display控制顯示或隱藏,這些就可以達成頁面遮罩的功能了。
<!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>
  <script type="text/javascript">
//<![CDATA[
    function show() {
      document.getElementById("xie").style.display = "";
      document.getElementById("content1").style.display = "";
      document.getElementById("content1").innerHTML = "內容<br/><input onclick='hide()' type='button' value='確定'/>";
    }

    function hide() {
      document.getElementById("xie").style.display = "none";
      document.getElementById("content1").style.display = "none";
    }
  //]]>
  </script>
  <title>JavaScript Mask</title>
</head>

<body>
  <div style=
  "filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; width: 100%; background-color: White; display: none; height: 100%; position: absolute; left: 0; top: 0;"
       id="xie"></div>

  <div style=
  "width: 100px; background-color: Red; display: none; height: 53px; position: absolute; left: 144px; top: 100px;"
       id="content1"></div>

  <input onclick="show()" type="button" value="顯示" />
</body>
</html>





2012年3月24日 星期六

動態產生HTML element -- document.createElement


我們可以利用document.createElement()動態的產生HTML的element,再利用Node.appendChild()插入某個Node底下,或利用Node.removeChild()自某個Node底下移除,更多資訊可以參考[1]。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>auto table</title>
</head>

<body>
  <table id="brook" summary=""></table>
  <script type="text/javascript">
  //<![CDATA[
    function create_new_row_button(eT, msg) {
        var eR = document.createElement("tr");
        var eC = document.createElement("td");
        var eB = document.createElement("input");
        eB.type = "button"
        eB.value= msg;
        eB.style.width = "100px";

        eT.appendChild(eR);
        eR.appendChild(eC);
        eC.appendChild(eB);
    }
    var station = [
        {name: "CHT"},
        {name: "TW"},
    ];
    for (var i = 0; i < station.length; i++) {
        create_new_row_button(document.getElementById("brook"),
                              station[i].name);
    }
  //]]>
  </script>
</body>
</html>






2012年3月3日 星期六

glibc讀書心得 -- Ch2 Error Reporting


在glibc中會去偵錯並且回傳錯誤值,通常我們都應該去檢查這些回傳值,並且作error-handling,比如開檔 open()/fopen(),並非每次都會開成功,所以,open()/fopen()通常都會去檢查return value是不是有正確。

2.1 Checking for Errors
glibc的return value通常是-1、NULL或是EOF,這只能知道錯誤發生,至於發生何種錯誤,都是存在errno這個變數中,當您要使用errno必須include <errno.h>。這個header file也定義很多error code,都是以E為開頭,這些error code在Ch 2.2中有說明,用到再查就OK啦。

2.2 Error Codes
這個章節主要說明定義的error code,值得注意的是EAGAIN和EWOULDBLOCK的值一樣,所以不能放在同一個case switch中,其實我常用的error code大概只有他列的1/5不到吧,看看就好。

2.3 Error Messages 基本上我們都是希望report的錯誤是文字型態,而不是只有error code,所以glibc有提供一些轉換的function:
char * strerror(int errnum)[Function]
char * strerror_r(int errnum, char *buf, size t n)[Function]
void perror(const char *message)[Function]
char * program_invocation_name[Variable]
char * program_invocation_short_name[Variable]
void error (int status, int errnum, const char *format, . . . )[Function]
error_at_line (int status, int errnum, const char *fname,unsigned int lineno, const char *format, . . . )[Function]

char * strerror(int errnum)
將errnum轉成相對應的字串
#include <stdio.h>
#include <errno.h>  // EINTR
#include <string.h> // strerror()

int main(int argc, char *argv[])
{
    printf("%s\n", strerror(EINTR));
    // print out "Interrupted system call"
    return 0;
}

char * strerror_r(int errnum, char *buf, size t n)
strerror的reentrant版本,mutli-thread就一定要用這個版本。
#define _GNU_SOURCE
#include <stdio.h>
#include <errno.h>  // EINTR
#include <string.h> // strerror()

int main(int argc, char *argv[])
{
    char buf[32];
    printf("%s\n", strerror_r(EINTR, buf, sizeof(buf)));
    // print out "Interrupted system call"
    return 0;
}

void perror(const char *message)
效果和printf(stderr, "%s:%s", message, strerror(errno))相似,把error message寫到stderr去,接著冒號後面再接errno的message。
#include <stdio.h>
#include <errno.h>  // EINTR
#include <string.h> // strerror()

int main(int argc, char *argv[])
{
    perror("my_perror_msg1");
    // print out "my_perror_msg1: Success"
    errno = EINTR;
    perror("my_perror_msg2");
    // print out "my_perror_msg2: Interrupted system call"
    return 0;
}

char * program_invocation_name / char * program_invocation_short_name
該程式的名稱,和argv[0]的值一樣。
#include <stdio.h>
#include <errno.h>  // EINTR
#include <string.h> // strerror()

int main(int argc, char *argv[])
{
    printf("%s\n", argv[0]);
    // print out "./a.out"
    printf("%s\n", program_invocation_name);
    // print out "./a.out"
    printf("%s\n", program_invocation_short_name);
    // print out "a.out"
    return 0;
}


void error (int status, int errnum, const char *format, . . . )
status不為0時,就等同exit(status),後面的參數errnum和format用途類似perror(),當errnum為0時,就不會印後面的message,但是perror()會印Success。
#include <stdio.h>
#include <errno.h>  // EINTR
#include <string.h> // strerror()

int main(int argc, char *argv[])
{
    error(0, 0, "%s", "msg");
    error(0, EINTR, "%s", "msg");
    // print out "./a.out: msg: Interrupted system call"
    error(1, EINTR, "%s", "msg");
    // print out "./a.out: msg: Interrupted system call" and exit(1)
    return 0;
}


error_at_line(int status, int errnum, const char *fname, unsigned int lineno, const char *format, ...)
error_at_line()和error()很像,只是多了fname和lineno印出檔案名稱和行號。
#include <stdio.h>
#include <errno.h>  // EINTR
#include <string.h> // strerror()

int main(int argc, char *argv[])
{
    error_at_line(0, 0, __FILE__, __LINE__, "%s", "msg");
    // print out "./a.out:error_at_line.c:7: msg"
    error_at_line(0, EINTR, __FILE__, __LINE__, "%s", "msg");
    // print out "./a.out:error_at_line.c:8: msg: Interrupted system call"
    error_at_line(1, EINTR, __FILE__, __LINE__, "%s", "msg");
    // print out "./a.out:error_at_line.c:11: msg: Interrupted system call"
    return 0;
}



    參考資料:
  • The GNU C Library, Chapter 2



熱門文章