jessewth's blog: Javascript

顯示具有 Javascript 標籤的文章。顯示所有文章

2010/08/05

如何為你的 jQuery 程式除錯

如何為你的 jQuery 程式除錯

http://msdn.microsoft.com/zh-tw/scriptjunkie/ee819093.aspx

2010/03/08

解決jquery.blockUI v2 在IE6會出現安全性警告的問題

以下針對jquery.blockUI v2.16的版本做修改。

因為jquery.blockUI在MSIE的處理上, 為了避免下拉選單的破洞問題, 使用了iframe做層級的處理
但因為ie6針對iframe的src若沒有設定值的話, 會有安全性的警告跑出來, 很惱人

以下為修改方式:

1. 做一個空白的頁面, 命名為blank.html, 放在根目錄
2. 修改jquery.blockUI.js 第187行, 把iframe的src屬性, 由src='about:blank' 改成 src='/blank.html'

如此一來, 在ie6就不會再有安全性警告跑出來了

參考:
http://malsup.com/jquery/block/#
http://support.microsoft.com/kb/261188/zh-tw

2009/07/24

解決ie6,ie7的select option disabled沒有作用的問題 Select, Option, Disabled And The JavaScript Solution In IE7, IE6, IE5.5

解決方案:
http://www.lattimore.id.au/2005/07/01/select-option-disabled-and-the-javascript-solution/

下載js檔, 並include到頁面即可, 作法是把頁面的select element找出來, 判斷有disabled的option就變顏色且不可選擇
http://www.lattimore.id.au/files/examples/select-option-disabled-emulation.js

因為只有在ie7以下的版本有問題, 其他瀏覽器沒問題, 所以我改寫了一下

if (navigator.appVersion.indexOf("MSIE 5.5") >= 0 || navigator.appVersion.indexOf("MSIE 6.0") >= 0 || navigator.appVersion.indexOf("MSIE 7.0") >= 0) {
           window.onload = ReloadSelectElement;
       }
       function ReloadSelectElement() {
           if (document.getElementsByTagName) {
               var s = document.getElementsByTagName("select");
               if (s.length > 0) {
                   window.select_current = new Array();
                   for (var i = 0, select; select = s[i]; i++) {
                       select.onfocus = function() { window.select_current[this.id] = this.selectedIndex; }
                       select.onchange = function() { restore(this); }
                       emulate(select);
                   }
               }
           }
       }
       function restore(e) {
           if (e.options[e.selectedIndex].disabled) {
               e.selectedIndex = window.select_current[e.id];
           }
       }
       function emulate(e) {
           for (var i = 0, option; option = e.options[i]; i++) {
               if (option.disabled) {
                   option.style.color = "graytext";
               }
               else {
                   option.style.color = "menutext";
               }
           }
       }

2009/05/15

jQuery Test Suite

測試你的瀏覽器是否支援 jQuery --> http://jquery.com/test/

2009/01/22

javascript - 幫js檔減肥:使用 yuicompressor 壓縮js檔

年終了,發現很多該寫的都沒有寫....= =
所以趁機整理一些平常會用到的工具,以免放假放太久會忘記。

今天寫yuicompressor的用法

首先下載yuicompressor:
http://developer.yahoo.com/yui/compressor/

指令:
java -jar yuicompressor-2.3.6.jar --type js --charset big5 -o <產出檔案> <來源檔案>

壓縮後會把.js檔裡的空白及註解都移除

2008/11/07

用asp.net去取得client side的javascript var 值

.NET - Access JavaScript variables on PostBack using ASP.NET Code
....
沒想到還能這樣玩 = =

2008/11/03

javascript: n位元的四捨五入

四捨五入無小數點 --> Math.round(4.5) // return 4.5
四捨五件指定位數 --> Math.toFixed(4.0005,3) // return

2008/10/28

javascript: 以javascript取得query string (Netlobo.com | Get URL Parameters Using Javascript)

http://www.netlobo.com/url_query_string_javascript.html



function gup( name )
{  
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
    var regexS = "[\\?&]"+name+"=([^&#]*)";  
    var regex = new RegExp( regexS );  
    var results = regex.exec( window.location.href );  
    if( results == null )    
        return "";  
    else    
        return results[1];
}

var myid= gup("id");

2008/10/22

javascript : jquery ajaxStart and ajaxStop 的用法

ajaxStart和ajaxStop主要是在頁面觸發ajax時,呼叫其他function或程式碼做處理。
要加在$(document).ready(function(){});內

$().ajaxStart(function() {
            $.blockUI.defaults.pageMessage = "<table class='loader' summary='Loader Layout' border='0' cellpadding='5' cellspacing='1' width='300px'><tr><td align='left' valign='baseline'><div id='innLoader' style='position: absolute; z-index: 999; border-right: #bbbbbb thin solid; border-top: #bbbbbb thin solid; border-left: #bbbbbb thin solid; border-bottom: #bbbbbb thin solid; width: 300px; background-color: white;'><table><tr><td><img src='/res/layout/v5/ps_loading.gif' width='80' height='80' align='left' style='margin: 3px;' alt='請稍候' /></td><td><p><strong>資料處理中, 請稍候....</strong></p></td></tr></table></div></td></tr></table>";
            $.extend($.blockUI.defaults.pageMessageCSS, { margin: '-50px 0 0 -125px', top: '50%', left: '50%', color: '#000', backgroundColor: '#fff', border: '0px solid #aaa' }); $.blockUI();
        }).ajaxStop($.unblockUI);

2008/10/21

javascript: string to JSON


string myJSONText = "{ /"name/", /"jessewang/", /"age/", /"18/"}";
var myObject = eval('(' + myJSONtext + ')');

如果不想使用eval這個函數,可以下載JSON Parser來使用會比較安全。
下載: The open source code of a JSON parser and JSON stringifier is available.
參考: JSON in JavaScript

下載後,include到html裡,使用以下指令即可:


var myObject = JSON.parse(myJSONtext);

2008/10/13

jquery: 取出指定form內的所有select物件

在myform裡取出所有select name 開頭是'att'的值:


$("form[name='myform'] select[name^='att']").each(function(){
    alert($(this).val());
});

判斷瀏覽器是否為Google Chrome的二種方法

1. 使用jquery,但要先加入一個jquery plugin, 可以以下連結下載:

jQuery Browser Plugin

下載後,include到你的html裡,然後直接下指令即可:


if ($.browser.name == "chrome")
    alert("google chrome!");

2. 直接判斷navigator.userAgent裡的文字, 請參考:Detecting Google Chrome Using Javascript


var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

2008/10/09

Javascript convert XML to string

Javascript convert XML to string to XML

firefox only

相容IE,請參考: DOMParser for IE and Safari

2008/09/11

jQuery: working with select options | Jerad Bitner:

jQuery: working with select options Jerad Bitner:

取出select option裡的文字:


$('#role').html($(this).children("[@selected]").text()).show();

2008/05/14

jquery 的$(document).ready 在 firefox 有 onclick 的問題

最近在使用jquery 1.2.3 版本,發生了奇怪的問題….

通常我們在送出一個form表,會使用一個function檢查form的內容,

例如以下為一個CheckForm的Function


<script language="javascript" type="text/javascript">
    
    Function CheckForm(thisForm){

        $(document).ready(function(){
            If (thisForm.text1.value != “") {
        thisFrom.submit();
}
}
}

</script>

若使用


<a href="javascript:CheckForm(this.form);">submit button</a>

完全沒問題,在IE及FireFox都正常!
但若使用button


<input type="button" name="btnSubmit" value="submit button" onclick="javascript:CheckForm(this.form);">

在FireFox則會無法送出form,原因出在於CheckForm()裡的$(document).ready()沒有反應…跑到這裡就停住了…

查了許久,仍查不出原因,初步推斷可能是jquery 1.2.3在firebox的一個onclick的bug,因為在jquery 1.1.1時是沒有問題的。

現在的解決方式是,在


<script language="javascript" type="text/javascript"></script>

裡,
加一段:


$(document).ready(function(){

});

如此一來正常work了…只是沒找出真正的原因,要花點時間去找找官方的討論區。

2008/04/22

JavaScript : 數值轉成字串

JavaScript number-to-string conversion

a = a+'' // This converts a to string
b += '' // This converts b to string

簡單又有用的作法....= =

2008/04/16

javascript : How to call opener function & set opener element ?

Opener window : openerwindow.html


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Opener window</title>
</head>
<script type="text/javascript" language="javascript">
function OpenNewWindow()
{
    window.open("newwindow.html");
}
function CallMe()
{
    alert("hello!");
}
</script>
<body>
<form action="#" method="post" name="form1">
<a id="clickme" href="#" onclick="OpenNewWindow();">Click me !</a>
<br />
<input name="textbox1" type="text" value="" />
</form>
</body>
</html>

New window : newwindow.html


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>New window</title>
</head>
<script type="text/javascript" language="javascript">
function CallOpenerFunction()
{
    if (!window.opener.closed)
    {
        // call opener function
        window.opener.CallMe();
    }
}
function SetOpenerElement()
{
    if (!window.opener.closed)
    {
        // set opener element
        var tf = opener.document.forms[0];
        tf.textbox1.value = "hi!";
    }
}
</script>
<body>
<a href="#" onclick="CallOpenerFunction();">call opener function</a>
<br />
<a href="#" onclick="SetOpenerElement();">set opener element</a>
</body>
</html>

訂閱：文章 (Atom)