利用CSS更改滑鼠圖案

滑鼠不可用.jpg. gif. BMP 等圖片格式, 定要用 cur. ani. 等圖片格式.

改用其他圖式
body{cursor:url(http://xxxxx.cur);}/*移到網頁時的滑鼠游標*/
a{cursor:url(http://xxxx.ani);}/*移到超連結時的滑鼠游標*/

預設基本符號:
用法：body{cursor:Pointer;}

Move the mouse over the words to see the cursor change:
1.Auto
2.Crosshair
3.Default
4.Pointer
5.Move
6.e-resize
7.ne-resize
8.nw-resize
9.n-resize
10.se-resize
11.sw-resize
12.s-resize
13.w-resize
14.text
15.wait
16.help

*注意
Pointer (手指)
hand (手指) 僅ie支援

reference
1.如何更改滑鼠圖案
2.w3school

'a' tag的href會重讀

原本為了讓文字有超鏈結的底線而加了href屬性
但在firefox下 似乎會變成重讀頁面(ie不會)
只要加個#，即href='#' 即可。

在網路上另外看到
提交
的方式,通過一個偽鏈接來調用javascript方法.這種方法有一個問題是:
雖然點擊該鏈接的時候不會跳轉頁面.但是滾動條會往上滾,解決的辦法是返回一個false.
如下所示:
< a href="#" onclick="javascript:方法;return false;">提交< /a>

< a href="javascript:void(0)" onclick="javascript:方法;return false;"提交
javascript:void(0)就不會向上跳了:) >

還有一個方法是 #this
< a href="#this" onclick="javascript:方法">

jQuery對select tag的操作

• get
  
  • 取出選擇的值
    

    $("select#Club").val();
    $('select#Club option:selected').text(); 

    以上2方法在單選時相同，但複選時，
    val()會用逗號分開 ex. AA, BB
    text()不會 ex. AABB

  • 取出array
    

    $("select#Club").children("[@selected]").each(function(){
        alert(this.text());
    });

• set
  
  • 使某option變為selected
    

    //使aaa為selected
    $("#select1").children().each(function(){
        if ($(this).text() == "aaa"){
            //jQuery給法
            $(this).attr("selected","true"); //或是給selected也可
    
            //javascript給法
            this.selected = true;   
        ;}
    });
    
    //直接指定... 上面的方法變的有點蠢... 誰寫的... 我....
    $('#select1').val("aaa");
    
    

  • 新增option
    

    $('select').append(new Option('text', 'value')); //之前好像誤寫成 jQuery("new option"); 歹勢呀~

  • 讓新增的option直接為selected
    

    //new Option([text], [value], [defaultSelected], [selected]
    var option = new Option(
                 'text'
                 , 'value'
                 , true     //html裡顯示selected
                 , true     //第四個參數即為selected
               ); 
    $('select').append(option);
    

  • select下拉框的第二個元素為當前選中值
    $('select#Club)[0].selectedIndex = 1;//不知為何要加[0]
    

    ===== K. T. Chen 提到 =====
    在$("")加[0]的意思是把jQuery物件轉為DOM物件。這樣子jQuery物件才能使用DOM底下的selectedIndex方法。

• event
  //改變時的事件

  $("select#Club").change(function(){ //事件發生
      //一次印出
      alert($(this).val());
  
      //印出選到多個值
      jQuery('option:selected', this).each(function(){ 
          alert(this.value);  
      });
  });

• 移除 removeOption(index/value/regex[, selectedOnly])
  

  $('select#Clubs option:selected').remove();

//純javascirpt

<select onchange="alert('Index: ' + this.selectedIndex
    + '\nValue: ' + this.options[this.selectedIndex].value)">
    ...
</select>

參考

• http://www.texotela.co.uk/code/jquery/select/
• http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html
• MSDN - onchange Event
• Add a new option to a select with jQuery

Google code - flot 圖表

http://code.google.com/p/flot/
example

利用jQuery完成的圖表
也不用設定css，而是透過程式裡的參數
這點滿不錯的，免得影響到其他的設定
也滿容易上手的...
雖然偶爾還是卡住... >"<

*自訂x座標文字tick
//1.先做tick array
var titleName = [];
for(i){
//依display順序填入array
titleName.push([i, title_Name])
}

//2.再設定x座標
xaxis: {
min: 0,
ticks: titleName
}


常見問題：
卡住的地方
flot透過一個id名為placeholder的div裡做圖表
雖然是在html裡下的id，但似乎在google裡的js檔還是有靜態命稱
在js檔裡是沒找到placeholder，但當更改命名時，再透過$.plot($("#divName")
就畫不出來，但只要名稱一樣就沒問題

*隱藏圖表問題
如果將圖表隱藏後，得先顯示才能畫
否則Y軸的title會"黏"在原點的Y軸上
或出現錯誤息：throw一個錯誤未handle

JavaScript對ie與firefox的支援性

真是搞死人了...
先寫下來 以後方便查...
雖然Aptana有提示..
不過還是先寫下來好了...氣死

1.innerText
firefox不支援，可利用jQuery的.text即可完成，以td為例

$(td).text();  //取值
$(td).text("要放的值");  //設定值

2.下拉選單option的selected
$("optionA").value //如果value沒給值 firefox會以text代替，而ie則顯示無字串

3.動態產生的html tag
利用jQuery隱藏的物件
例如$('tr#hideTR').hide("slow"); //當hide有下參數slow,normal,fast時
再$('tr#hideTR').show("slow")，整行tr如有3個td，則都會縮成一個td
在ie可以跑 但在firefox會怪怪
其實在hide的同時就table已經變的怪怪的了
但如果show不掛效果的話 還是會正常顯示，不會縮成一個td

4.html tag的宣告
一般< script type=text/javascript>< /script>
ie不支援< script / >, firefox可以

5.jQuery在ie上的問題
有些程式在firefox可以跑，但在ie會有問題時
除了一些支援性的問題外
有可能是在一些語法上的錯誤
firefox可自動避開這些問題
但ie卻會當掉...例如
$.ajax({
dataType: "xml", <====少了逗號時，ie便無法讀
...
success:function(GCList){
...
}, <===================多了逗號也會造成ie無法讀
});

6.href
ie會自動加入完整路徑
ex.
href="a.html" <==在ie下就會變成c:\a.html之類的

jQuery常用方法

整理一下比較常用到的jQuery API v.1.4

Selector

• 找tag的id, class
  $("a"); //找到a的tag
$("a#myId"); //找到id為myId的a tag
$(".classA"); //找到class為classA的a tag
  
• .eq(index) 取得第index個子節點
  $('ul').children.eq(3).text(); //即可取得第三個子節點
  
• 利用屬性內容找節點
  $("input[name='newsletter']"); //找出name為'newsletter'的input
$("input[name*='news']"); //找name的包含'news'字眼的input
$("input[name^='news']"); //找name的開頭字串包含'news'字眼的input

  
• .lt(index), .gt(index) 取得此index前(後)的所有節點
• 其他如:radio :even ...
  $("input:radio"); //找出input type為radio
$("tr:even"); //找出偶數的tr


Manipulation

• 新增一個tag
  var div = $('< div>Some text< /div>');//= js的createElement（'div'）
  

  *****注意*****
  jQuery('div'); //找div tag，不是新建div tag

• append(), prepend(), appendTo(), prependTo()
  
$(div).append("last"); //將span加到此node的最後
$(div).prepend("first"); //將span加到此node的最前
$(div).appendTo(document.body); //將div加到body最後
$(div).prependTo(document.body); //將div加到body最前
  其他after(), before(), clone()自己看囉
• .css() 如同寫html裡的style
  $("span").css("color","red");
  
• addClass(), removeClass() class的新增、移除
  $("#test").addClass("aaa");
$("#test").removeClass("aaa");
$("#test").removeClass("aaa bbb"); //一次移除多個class,利用whitespace即可


Events

• .click(), .change(). focus(). blur()
  $('p').click(function() {
$(this).css('background-color', 'red'); }); //Set up paragraphs so that when you click them they turn red.
jQuery('p:first').click(); //觸發click事件
• keyup(), .mouseup() 多了鍵值
  ('#target').keyup(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keyup() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
• hover()
  $("li").hover(
function () {
$(this).append($(" ***"));
},
function () {
$(this).find("span:last").remove();
}
);

Effects

• .show(), .hide(), toggle()
  $('.target').show(); //顯示target
$('.target').hide(); //隱藏target

//動畫效果
$('.target').show("slow"); //顯示target

Traversing

• .children()
  找該node下的children
  $(clubs).children.each(function(){
//所有子節點
});

  
• .siblings() 與此node屬一個parent的其他nodes
  <ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
--
$('li.third-item').siblings().css('background-color', 'red'); //全都會變紅
  
• .first(),.last() 集合中的first(last)節點
  <ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
--
$('li').first().css('background-color', 'red'); //第一個變紅
$('li').last().css('background-color', 'red'); //最一個變紅
  

Ajax

• $.ajax()
  $.ajax({
type: "GET", //指定method
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
  
• 讀html, xml, txt
  //讀html
$("#htmDoc").load("test.html");

//讀XML
$.get("test.xml",function(xml){
var text = $("title",xml).text();
$("#xmlDoc").html(text);
});

//讀txt
$.get("test.txt",function(txt){
alert(txt);
});

CSS範例

整體網站
CSS Beauty

Table樣式
CSS Table Gallery

綜合
CSS樣式表文章庫

JavaScript範例

• Tab
  dynamicdrive 也有許多利用javascript做的範例
  http://www.scbr.com/docs/products/dhtmlxTabbar/
  http://www.stilbuero.de/jquery/tabs/#fragment-17 利用jQuery完成
• 畫圖
  http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
  
• data table
  http://www.joostdevalk.nl/code/sortable-table/
• 有的沒的
  http://www.powerpc.idv.tw/script.htm
  http://www.dynarch.com/
  http://hk.geocities.com/nuen_fai/teach.htm

轉貼- 介紹幾套好用的檔案上傳元件

1.
SWFUpload

採用 JavaScript + Flash 進行上傳動作，功能強大、一應俱全，雖然每有 ASP.NET 現成的控制項可用，但是有提供使用 ASP.NET 的範例可以參考，是個值得推薦使用的套件！

其功能有：
- 可一次上傳多個檔案。
- 支援 JavaScript 的 Callback 事件。
- 可在檔案開始上傳前取得部分檔案資訊。
- 可以透過 XHTML 與 CSS 客製化上傳的元件。
- 可得知檔案上傳進度。
- 上傳檔案不需要 PostBack，可以等上傳檔案完成後再 PostBack 出去。
- 只要是 Flash 支援的 Browser 都可以用。
- 就算 Flash 或 JavaScript 都無效的時候，也可以正常上傳。
- 可以在「檔案上傳之前」就先判斷檔案大小，超過限制可以不進行上傳。
- 可以在瀏覽檔案時篩選特定的檔案類型
- 支援上傳檔案佇列功能，可以在還沒上傳檔案之前將新增要上傳的檔案或移除要上傳的檔案。

2.
FancyUpload
這個套件就像他的名字一樣很花俏(Fancy)，看過他的 Demo 就是到他的威力了。
其功能有：
- 可一次上傳多個檔案。
- 可以在瀏覽檔案時篩選特定的檔案類型
- 支援 JavaScript 的 Callback 事件。
- 可在檔案開始上傳前取得部分檔案資訊。
- 可以在「檔案上傳之前」就先判斷檔案大小，超過限制可以不進行上傳，也可限制上傳檔案數的上限。
- 只要是支援 Flash 8 的 Browser 都可以用。
- 支援上傳檔案佇列功能，可以在還沒上傳檔案之前將新增要上傳的檔案或移除要上傳的檔案。
- 所有功能都可以設定，文件
- 可得知檔案上傳進度。
- 上傳檔案不需要 PostBack，可以等上傳檔案完成後再 PostBack 出去。
- 就算 Flash 或 JavaScript 都無效的時候，也可以正常上傳。

3.
AjaxFileUpload
這是一個 jQuery Plugin，也算是不錯用，只是功能沒像上面兩個那麼多功能，因為這套是用 JavaScript + IFRAME 的技巧實做的。

如果你想找其他 jQuery Plugins 可以來這裡：http://plugins.jquery.com/

--
jQuery File Upload Plugin

Uploadify jQuery + Flash 可限制檔案類型,單一檔，或同時多個

其他jQuery Plugins

Reference
介紹幾套好用的檔案上傳元件

取出$.get資料

var txtContentA; //global變數
function getText(){
 var txtContentB;
 $(document).ready(function() {
   $.get('1.txt', function(data){
      txtContentA=data;
      txtContentB=data;
   }); 
 });
 alert(txtContentA); //有資料
 alert(txtContentB); //無資料
}

global變數(txtContentA)可以取得1.txt內容
而區域變數txtContentB就沒有了...
另外可直接把data傳給自訂的function

$(document).ready(function() {
   $.get('1.txt',Test); 
});
function Test(data,status){
   alert(data);     //data 就是要的東西
   alert(status);  //status 回報是否成功
}

直接呼叫function name，也不用理參數
不需再delegate的做法
是很方便，不過太簡單反而想好久
多虧老大試出來了...

來吧 jQuery 沒在怕的

官網：http://jquery.com/

• 初學就先學會以下三個吧
  
  • jQuery Core
  • jQuery Selectors
  • jQuery Events

  進階就自己學吧
  看著jQuery API，覺得會用到什麼就去翻一翻就對啦

• 教學
  
  1. jQuery入門指南教程 友善的jQuery教學...素中文滴的啦
  2. jquery 的15天教程
  3. ThickBox 透過jquery實作
  4. 優秀js開源框架-jQuery使用手冊(3) 中文說明jQuery的api使用
• 常用方法
  
  • jQuery常用方法
  • jQuery對select tag的操作
• 效能篇
  
  • 10 Ways to Instantly Increase Your jQuery Performance (中文翻譯)
  • 引用google libraries

  這個算是效能吧 哈

• plugin
  
  • jQuery Plugin
    

    官方整合的Plugin

  • jQuery lightBox plugin
  • 45個新鮮出爐的jQuery插件
  • 37個更加出色的jQuery插件
  • Jtip，實用的提示工具
  • jQuery File Tree
  • jQuery Folder View (BogoFolders)

Flash 取Datagrid的值

搞了好久，總算解決了
看了flash的sdk看半天還是搞不懂
總算在網路上找到了
而且是在庫存檔... 阿密陀佛
原來datagrid.getItemAt(i)
取到的是第幾列...因為要再給定哪一行...
好感動...

//印出所有的資料
function showdata(datagrid){
 var fields = datagrid.getColumnNames();
 var i,j,tempfield="",temprow="",temprec="";

 trace("--Recordset Properties--");
 trace("Recordset length: " + datagrid.getLength());
 trace("Fields: " + fields);
 trace("Begin records...");

 for (var i = 0; i< datagrid.getLength(); i++) {
     temprec =datagrid.getItemAt( i );
     for(var j=0; j < fields.length; j++){
   tempfield = fields[j];
   temprow += tempfield + ': "' + temprec[tempfield] + '"; ';
  }
     trace(temprow);
     temprow="";
 }
 trace("End records...");
 trace("--End Recordset Properties--");
}

JavaScript取得html tag

< div id="divA">
< input type="image">
< input type="button">
< ddiv>

//取得divA
var divA = document.getElementsByTagName("div")[0]; //會取出所有的div，所以是個array
var divA =  document.getElementsById("divA");       //如有設id，可直接取id

//要取得div下的所有input
-doucument.all("divA").getElementsByTagName(input);
-doucument.divA.getElementsByTagName(input);

例2：http://www.javascriptkit.com/jsref/checkbox.shtml

< form name="test">
< input type="checkbox" name="checkgroup" checked />
< iinput type="checkbox" name="checkgroup" />
< iinput type="checkbox" name="checkgroup" checked />
< form>

for (i=0; i < document.test.checkgroup.length; i++){
  if (document.test.checkgroup[i].checked==true)
  alert("Checkbox at index "+i+" is checked!")
}

tag "a" 的href屬性
利用void(0)避開超鏈結時，要注意其他設定要在這之前，不然會被略過

< a href="javascript:void(0); name='test'"> //再利用javascript會抓不到test
< a name='test'" href="javascript:void(0); > //先將name放在前面就ok

JavaScript動態產生html tag

//table

var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerText = "this is the text of td";
tr.appendChild(td);

//button

butt = document.createElement('BUTTON');
butt.appendChild(document.createTextNode('click me!'));
butt.onclick = downloadCourse;

//a

var aElement = document.createElement("< a href=javascript:go() >< /a>");

a的href可以直接呼叫javascript的function


//input

var input1 = document.createElement("input"); // create input node
input.type = "checkbox"; // set type, others like text,radio
input.name ="chk"; // set name as its id

*要在input後面加字，即利用appendChild(document.createTextNode('xx'))

*快速產生

var input2 = document.createElement("< input type=button>"); 

//add attribute

var div = document.getElementById('div1'); 
var attr = document.createAttribute('class'); 
attr.value = 'cssClass1'; 
div .setAttributeNode(attr);

flash與xml

1.查詢
//顯示level為4的節點的title值

trace (kingdaXML.item.(level == 4).title);

//顯示level>2的節點的title值，本處結果大於1，所以是一個XML Array。

trace (kingdaXML.item.(level > 2).title);

//使用屬性用@開頭即可。真方便。

trace (kingdaXML.item.(level > 2).@id);

2.添加或者修改屬性
方便的不能再方便，直接寫即可。爽翻天啊。



//把id == 1的節點level值改為2

kingdaXML.item.(@id==1).level = 2;

//把id==1的節點添加一個屬性 page

kingdaXML.item.(@id==1).page = 100;

trace (kingdaXML.item.(@id==1));

*
name() 取得 => ABC
toXMLString() //印出從開始tag到結束tag
toString() //印出tag間的字
setName("tagName"); //可改tag name

*利用xpath抓的到是nodelist
var stateNode:XML=XmlDoc.region;會失敗
因此要用list接
或加上陣列[0]

*如果只有一個子節點
.children()會抓不出來

flash cs3 熱鍵

Ctrl+enter 執行
Ctrl+F7 開啟UI元件面板
shift+F7 元件參數面板
F9 開啟actionscript視窗(focus在影格上)