魚乾的筆記本: 6月 2008

星期三, 6月 25, 2008

CSS Hover在ie下無法顯示

在css裡設定hover在ie下總是無法正常顯示

外掛做法
這裡提供了csshover.htc可以解決
主要的做法是在css裡，遇到hover改成用mouseover等改寫
1. 下載csshover.htc
  Version 1.42.060206 (:hover and :active) download
2. 設定path
  path: 就先放在同一資料夾吧
3. 程式碼
  (1)在CSS裡
  已產生的dom可直接在css裡下
```
body{
  behavior:url(csshover.htc)
}
```
  (2)在JS裡
  動態產生的dom，因為放在css裡的已執行過，所以之後才產生的html tag似乎不會被改變，因此要javascript再跑一次
```
if (document.all && /MSIE (5\.5|6)/.test(navigator.userAgent) 
  &&  document.styleSheets 
  && document.styleSheets[0] 
  && document.styleSheets[0].addRule)
{
  document.styleSheets[0].addRule('*', 'behavior:url(csshover.htc)');  //csshover.htc的路徑
}
```
備註：
動態再呼叫javascript跑csshover.htc似乎會造成程式花了很多時間改寫hover
有建議將hover指定詳細減少搜尋改寫hover的時間
#menu li:hover ul { //指定li hover 再指出ul下
...
}
指定html版本
其他方法
據說設為W3C 4.01, ie就會乖乖聽話了
在html檔裡，最前面加上以下字串
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```

Reference

jQuery無法改table caption
當dom裡的caption是空白時，browser似乎會省略
導致後制的jQuery找不到caption
$('table caption').text('test'); <=無法出現test
因此得避免caption為空

table裡每列加form導致該td多一空白列
查半天都看不出為什麼那一列多出一個行空白
本以為是css設定問題
後來才發現在每個td利用form包一個input
就會造成該td多一個空白可能是擠不下的關係所以多出一列
氣死...平麼padding, margin全設了還是不行
把form刪了就ok了

仿apple的滑動選單

很漂亮的滑動選單
http://jqueryfordesigners.com/slide-out-and-drawer-effect/

*在ie下無法正常顯示
由於此選單透過png做透明
但ie5,6下對png支援不好所會出搥
不過已經有解決方案了
檔案：http://www.twinhelix.com/
說明：只改动CSS让IE6支持透明PNG

主要讀圖時透過twinhelix上提供的iepngfix.htc讀取就可以完成了

星期三, 6月 11, 2008

jquery radiobox取值，checkbox取值，radio選中，checkbox選中，select選中，及其相關

textbox

$("#text").val();     //get
$("#text").val("hi"); //set

radiobox

取得被選中的值

var item = $('input[name=items][@checked]').val();
//or
$('input[name=items]:checked').val();

使第二個radiobox被選中 (無法用在checkbox上)

$('input[name=items]').eq(1).checked = true; //法1
$("input[type=radio]").eq(1).attr("checked",true); //法2

觸發click事件

$("input[type=radio]").eq(1).trigger('click');  

//由於利用程式選中，並不會觸發click，所以結合兩者
$("input[type=radio]").eq(1).attr("checked",true).trigger('click');

取得多組 (:enabled, :disabled,:selected都同方法)

$('input:checked').each(funciton(){
    ...
});

//:select 方法差不多，不過多個option
$("select option:selected").each(function () {
     ...
});

checkbox
checkbox取值，給值

alert($("#checkbox").attr("checked"))； //是否勾選 true or false
$("#checkbox").attr("checked",false);  //不打勾
$("#checkbox").attr("checked",true);  //打勾

select

$("#sel").attr("value",'-sel3');  //設置value=-sel3的項目為當前選中項
$("11112222").appendTo("#sel");  //添加下拉框的option

事件
用click 觸發改變事件(用change 還得再點旁邊才會觸發)

//html
<input name="RadioName" value="hi">
//js
$("input[name='RadioName']").click(function(){
   $(this).val(); //即hi
});

References:

對select的操作
http://www.cnblogs.com/xlfj521/archive/2008/01/29/1057375.html

星期二, 6月 10, 2008

jQuery each迴圈中的continue及break

continue :return true;
break :return false;
也可以利用return即可跳出jQuery

星期五, 6月 06, 2008

td裡文字無法置中前面的圖片

明明對td設定了style="vertical-align:middle"
但就是沒辦法置中

氣到...又請出源大師出馬
果然幫我解決了
不過也不知原因...總之在img tag裡也加入style="vertical-align:middle"
就ok啦，原td的style甚至不用設定了

星期四, 6月 05, 2008

jQuery 套件

1.jQuery Treeview Plugin

jQuery有個project提供了Treeview plugin，看起來還不錯的樣子
Demo網址

用法
1.先下載pack，目前v3
2.方便測試，在demo檔案夾裡，新增一個html當自己的測試檔
3.打開demo檔案夾裡的index.html，看html碼直接把下列這幾行貼到自己的html裡

< link rel="stylesheet" href="../jquery.treeview.css">
< script src="../lib/jquery.js" type="text/javascript">
< script src="../lib/jquery.cookie.js" type="text/javascript">
< script src="../jquery.treeview.js" type="text/javascript">

4.demo.js是原本的javascript檔，可直接改這裡來測試，如果自己寫新的js的話，記得加上$("#browser").treeview();才會完整啟動treeview，不然會像下圖一樣

魚乾的筆記本