[宅] javascript筆記(5) - 關於z-index、visibility和滑鼠點擊事件

好吧，我承認這篇的主題很亂...

z-index、visibility

首先，z-index的概念很簡單，只要他的值越大代表離你越近，也就是越上層。
visibility則是可以設定成"hidden"或"visible"。

這兩個css屬性是我今天在寫一個light-box的時候所用到的，程式碼如下：

<div id="sb-container" style="visibility: hidden;">
</div>
<div onclick="$('#sb-container').css('visibility','hidden')" style="background-color: black; height: 100%; left: 0px; opacity: 0.8; position: fixed; top: 0px; width: 100%; z-index: 9;">
</div>
<br />
<div id="info-box" style="background-color: white; height: 440px; position: fixed; top: 100px; width: 540px; z-index: 10;">

最外層的"sb-container"是把裡面的兩個div裝起來的這不用多說，裡面的第一個div經由以上的設定後會向一層半透明(opacity:0.8)的遮罩蓋住整個可視範圍。

而在剛創建這個物件時發現有些網頁物件的層級比他稍高，所以我增加了z-index的屬性並設定為比較高的數字(9)，這層遮罩就蓋住了整個頁面。

在遮罩之上還要有一個類似dialog的視窗來顯示內容，而他勢必要比遮罩還上面一層，否則會被遮掉，這裡可以看到他的z-index為10。

我想讓這個功能跟facebook顯示圖片的方式一樣，點選黑黑的地方就可以把這個 light  box關掉，所以大家可以看到在遮罩的部分有個$("#sb-container").css("visibility","hidden")的onclick事件。

運用z-index和visibility就可以做出簡單的 light  box效果了。



要補充說明的是，在一般的佈版及配置下，即使visibility為hidden的物件還是會占空間的，若要在隱藏時不要占用空間，可用display:none;

滑鼠點擊事件

當滑鼠點下時，我們可從e中找到一個button屬性，內容可能是0~2其中一個，分別代表是哪個滑鼠按鍵被按下：
0 - 左鍵
1 - 中鍵
2 - 右鍵

[宅] javascript筆記(4) - jQuery selector

以對<table id="t">下所有<td>加掛click事件為例，多半會寫成: 
$("#t td").live("click", fn); 或 $("#t").delegate("td", "click", fn);

學習了學習了~感謝暗黑執行續大大
(http://blog.darkthread.net/post-2011-10-14-delegate-vs-live.aspx)

[宅] javascript筆記(3) - 正規表示式以及undefined的定義

About 正規表示式...

今天在coding的時候發現傳遞正規表示式的過程中似乎會默認它的型態為String，例如：

var reg = /\S/; //此時還是正規表示式

var str = "kevin";

check(reg, str); //丟進function後就變成String了

這時在check()中的reg.test(str)就會失效

經過survey後發現正規表示式其實是一個物件，在javascript中我們可以這樣來定義他：

var patt=new RegExp(pattern,modifiers);

//or below:

var patt=/pattern/modifiers;(pattern,modifiers);

實際的使用方法可以參考w3school的教學：
http://www.w3schools.com/js/js_obj_regexp.asp

所以在開頭提到的例子中我們可以先在check()的scope裡以str為變數新增一個正規表示式，如下：

var pat = new RegExp(reg);

alert(pat.test(str));

這樣就沒問題了~ :)

About "undefined"...

今天也遇到了讀取物件不存在的attribute會傳回undefined的問題，因為我們事先並不知道這個attribute是不是被建立了，所以我們可以用

typeof(obj.attr)=="undefined";

來判斷~

[ROR] slide

分享到人人 Rails 新特性說明 2.1 正體中文版 Learning Rails 3 JRuby on Rails

[宅] javascript筆記(2) - JSON, Object, String

要在javascript下建立一個obj只需要用以下的方法：

var obj = {key1:value1, key2:value2};

可以用"obj.key"的方式取得obj中的attribute，例如：

alert(obj.key);

有時候為了試用別人寫好的lib，會需要JSON格式的data，可以用字串轉JSON的方式人工產生，像這樣：

var value = 3;
var data = "{key:value}";//string
var json = eval('(' + data + ')');//json

這樣一來當你執行

alert(json.key);

就會跳出"3"了，如果希望以字串的方式寫死在value裡，可以用下的方式：

var data = "{key:'Hello JSON!'}";//string

至於JSON轉成object的方法，我們可以用jquery提供的parseJSON：

var obj = jQuery.parseJSON('{"name":"John"}');

[宅] javascript 筆記(1) - 關於input標籤

一般來說，要取得<input>標籤內的輸入值，幾乎都可以透過jquery所提供的.val()來取得，其中select以及text類別的內容取得都還算容易，只要丟入id即可，但在type=radio的情形下就稍微比較特殊，要透過以下的方式來取得。
舉例來說：

<input name="StationName" type="radio" id="lbf_0" value="0" />

<input name="StationName" type="radio" id="lbf_1008" value="1008" />

<input name="StationName" type="radio" id="lbf_1011" value="1011" />

<input name="StationName" type="radio" id="lbf_1015" value="1015" />

<input name="StationName" type="radio" id="lbf_1017" value="1017" />

<input name="StationName" type="radio" id="lbf_1025" value="1025" />

<input name="StationName" type="radio" id="lbf_1319" value="1319" />

<input name="StationName" type="radio" id="lbf_1120" value="1120" />

因為每個選項都有自己的id，所以在selector的設定上就要費點心思，在這個情形下我們能用以下方式解決：

$("input[name='StationName']:checked").val();

這邊要注意的是，如果在selector中沒有加上"checked"這個條件，val()回傳的會是他所找到的第一個選項的value，而不是真正被check的選項。

宅文化的逆襲!!!

(圖片來源：http://www.62e.net/)

我想我自己在很多人眼中一定是個宅男(肯定)
貓桑自己可說是每天起床第一件事就是揉揉眼睛坐到電腦前，大約16小時後才又揉揉眼睛躺回床上
其實我也是有出去走走的啦......從家裡的電腦到辦公室的電腦......

為什麼談宅文化，畢竟咱們IT人還是需要一些"文化"涵養的啊~(其實只是今天比較累不想講太正經的事)

不過我想我接著要談的"宅文化"可能跟大家想的不一樣