經驗交流分享與備忘

If you noticed I have a ‘Back to top’ link appearing at the bottom right everytime you scroll down the page. Wonder how it was made? I’ll tell you. It’s quite simple. What you need is a div containing the text, apply some css and add an event using jQuery.

<div id="toTop">^ Back to Top</div>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

How to add records in json-store ?? Using ExtJS

You need to define a record type, create it and at it, e.g:

TaskLocation = Ext.data.Record.create([

由於select 的選項有效參數只有disable，readonly 的參數對select 無作用。
有時是為了做一些限制，不讓使用者選擇，

但預設選擇的欄位值(form field value)仍是要傳遞(submit)。
使用了部份的方式來達到這樣的作用。

//光棒效果  
var _bgColor;  //存放原始的 背景颜色  

$(document).ready(function()  
{     

Hello,

I have an select box:

<select id="selectBox"> 
<option value="0">Number 0</option> 
<option value="1">Number 1</option> 
<option value="2">Number 2</option> 
<option value="3">Number 3</option> 
<option value="4">Number 4</option> 
<option value="5">Number 5</option> 
<option value="6">Number 6</option> 
<option value="7">Number 7</option> 
</select> 

I'd like to set one of the options as "selected" based on it's selected index.

For example, if I am trying to set "Number 3", I'm trying this:

@addClass( class )
// 在節點裡加入class = "selected"
// 移除 : removeClass( class ).
$("p").addClass("selected")

@attr( name )
// 取得<img src="test" alt="" /> 裡的src值
// before : <img src="test.jpg" alt="" />
// Result :  test.jpg
$("img").attr("src");
 
@attr( properties )
// 將<img alt="" />  加入 src="test.jpg" alt="Test Image"
// before : <img alt="" />
// Result :  <img src="test.jpg" alt="Test Image" />
$("img").attr({ src: "test.jpg", alt: "Test Image" });
 
@attr( key, value )
// 指定物件 的 key 並 設定 value
// 將 <img alt="" /> 加入 src = "test.jpg"
// before : <img alt="" />
// Result :  <img src="test.jpg" alt="" />
$("img").attr("src","test.jpg");
// 將
<input /> 加入 value = "test.jpg"
// before :
<input />
// Result :
<input value="test.jpg" />
$("input").attr("value","test.jpg");
 
@attr( key, fn )
// 在<img alt="" />裡加入 title
//title 值 則是用function 回傳
//Before: <img src="test.jpg" alt="" />
//Result: <img title="test.jpg" src="test.jpg" alt="" />
$("img").attr("title", function() { return this.src });
//Before : <img title="pic" alt="" /><img title="pic" alt="" /><img title="pic" alt="" />
//Result: <img title="pic1" alt="" /><img title="pic2" alt="" /><img title="pic3" alt="" />
$("img").attr("title", function(index) { return this.title + (++index); });
 
@html()
// 取得
<div> xxx</div>
xxx <= 取得的東西
// Before :
<div> xxx</div>
// Result : xxx
$("div").html()
 
@html( val )
// 改變
<div>xxx</div>
為
<div><strong>new stuff</strong></div>
// Before :
<div> xxx</div>
// Result :
<div><strong>new stuff</strong></div>
$("div").html("<strong>new stuff</strong>");
 
@removeAttr( name )
//移除
<input disabled="disabled" />
// Before :
<input disabled="disabled" />
// Result :
<input />
$("input").removeAttr("disabled")
 
@removeClass( class )
//移除裡的 class
// Before :
Hello
// Result :
Hello
 
$("p").removeClass()
// Before :
Hello
// Result :
Hello
 
$("p").removeClass("selected")
// Before :
Hello
// Result :
Hello
 
$("p").removeClass("selected highlight")
 
@text()
//取得裡的字串
// Before :
<strong>Test</strong> Paragraph.
Paraparagraph
 
// Result : Test Paragraph.Paraparagraph
$("p").text();
 
@text( val )
//取代內的字串
// Before :Test Paragraph.
 
// Result :
<strong>Some</strong> new text.
 
$("p").text("<strong>Some</strong> new text.");
// Before :
Test Paragraph.
// Result :
<strong>Some</strong> new text.
 
$("p").text("<strong>Some</strong> new text.", true);
 
@toggleClass( class )
// 將有 移除 , 如果沒有 則加入
// Before :
Hello
Hello Again
// Result :
Hello,Hello Again
 
$("p").toggleClass("selected")
 
@val()
// 抓取 INPUT 的 VALUE值
// Before :
<input type="text" value="some text" />
// Result :  "some text"
$("input").val();
 
@val( val )
// 將INPUT 的 VALUE 值 改變為指定
// Before :
<input type="text" value="some text" />
// Result :
<input type="text" value="test" />
$("input").val("test");

原文出處: http://blog.shian.tw/jquery-attributes.html 

用Jquery可以少寫程式, 稍微Google一下可以找到很多資料, 通常會用 $('#ID') 去抓取某個 ID的表單元件的資料值, 或者它的事件, 並且, 做後續的處理. 在一般表單元件都是自己打造的前提, ID是可以自己加上去的 (直接在HTML Code裡) ,但是, 如果你的表單, 是透過 Pear 的 HTML_QuickForm 之類的套件去產生 ,則預設產生的表單元件, 並沒有賦予 ID 只有表單元件的 NAME .

這樣的情況, 將沒有辦法使用標準的 $('#ID') 去編寫 Jquery 的事件行為  ,

解決此種情況, 最簡單的方式, 便是直接透過 $("element['name=xxx']") 來取得元件, 並且, 進行後續程式碼的編寫.

其中 element 代表表單元件的類型, 例如: select 下拉式選單, input 輸入框 ...等等, 舉個例子來說, 要替 Select 下拉式選單增加 change 的事件, 可以這樣寫

使用方式:在需要檢查的欄位中放入 fieldname=”欄位名稱” chk=”true” 即可，javascript是通用的，無需修改

參數說明:
fieldname: 檢查不通過，alert時所顯示的欄位名稱
chk: true表示要檢查
min: 複選欄位至少選幾項

//验证Email 输入是否正确？

請參考以下的程式碼

function checkEmail(oNum)  
{

在填寫表單資料時 ,某些時候會需要使用者填寫日期 ,比方寫一個電子報發送系統 ,那麼需要指定未來發送的電子報排程日期 ,並且進行比較動作 ,那麼該怎麼進行呢?

其實只要透過 JavaScript 的 Date.parse() 與 valueOf() 參數去完成 ,請參考以下的程式碼範例 ,有問題歡迎留言討論喔 ,謝謝 .

執行結果

动态设置上传文件enctype类型

以下是最常见上传文件片段 
<form id="upform" name="upform" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadfile[]" />
<input type="file" name="uploadfile[]" />

 各種不同的瀏覽器對於網頁程式開發者來說 ,是一種很苦惱的事情 ,尤其遇到瀏覽器版本更新卻不支援某些舊的語法時 ,便會讓人感到很火大 ,就在開發公司的網站專案時 ,遇到PNG格式的透明圖無法正常顯示的狀況 ,一直以來我都是新版IE的支持者 ,所以一但新版IE發佈了 ,我一定立即就更新 .

這一天 ,在製作公司新版網頁的資料庫程式時 ,同事反映它的畫面不正常 ,仔細查看才發現 PNG透明圖的問題 ,雖然最簡單的是直接改用GIF格式的圖檔做透明圖 ,但是 GIF格式的圖檔解析度就低了 ,畫面就不會好看 ,不會好看老闆就不滿意 ,老闆不滿意,我就完蛋了...

透明圖無法正常運作的範例 ,在ＩＥ６才會

剛好有機會用到，所以我整理了Javascript關於IE列印的一些寫法，一般比較少見的，就是區塊列印以及區塊預覽列印，可能很多人都不曉得要怎麼處 理，以下是我查了一些語法資料，然後自己寫個sample測試出來的code，我的寫法不一定是最好的，如果大家如果有發現更好的寫法，希望可以互相交流 一下。

整頁列印:
html部分:
<INPUT TYPE="button" value="整頁列印" onclick="print()">

Javascript部分:

Question,

I have any question about checkbox, if I have 10 checkboxes in my form, and I want to limit my visitors cannot select more than 3 checkboxes, what can I do and how to write the JavaScript? Please let me know.

如何透過 javascript 限制核選box的核選數量 ,並且執行判斷的動作?

Ans,

這樣的問題 ,您可以參考以下的範例達成需求.

許多郵件系統都會採用的 全選 / 取消全選的功能 ,如 Google mail 的郵件清單 ,就有提拱這樣的功能

那麼 ,它該如何製作呢 ? 請看以下的簡單範例 ...

以選取興趣為例 ,在表單裡有以下的內容呈現 .. 使用者可以透過 下面的 全選 / 取消選取 / 反向選取 三個功能鈕操作

許多的部落格平台為了方便使用者或管理者複製文章的內容 ,因此都會提供 Copy Button  的功能

讓使用者不用再手動按 "複製" 就能將指定的文字區域的文字內容 複製到 剪貼簿 暫存

要達成這樣的需求 ,可以在下面這段 JavaScript 函式去達成它.

<script type="text/javascript">
function cmdA(el) {