2013年10月14日 星期一

Javascript的array排序(包含2維array)

JS的array怎麼宣告使用?如下,宣告array時不用告知長度,就要多少用多少。

var MyArray = [];
MyArray[0] = 10;
MyArray[1] = 20;



那二維array怎麼用呢?如下,同樣的概念,要多少用多少,然後告知那個位址是個array就好

var MyArray = [];
MyArray[0] = [];
MyArray[1] = [];
MyArray[0][0] = 10;
MyArray[0][1] = 15;

MyArray[1][0] = 20;
MyArray[1][1] = 30;


不過二維array有個指定用法,說明如下,一樣是二維array,但是,用的是指定該column的名稱的方式,這樣在後續使用的時候,可以不用記得是第幾維,只要指定正確的column名稱就好了。

var MyArray = [];
MyArray[0] = [];
MyArray[1] = [];
MyArray[0]["id"] = 10;
MyArray[0]["id"] = 15;

MyArray[1]["Email"] = 20;
MyArray[1]["Email"] = 30;




準備工作完成,瞭解JS的array使用方式之後,來看看排序吧
一維array很簡單,就呼叫MyArray .sort(),就這樣(如果想瞭解工作的原理,請看本文最下方的補充。)MyArray就會變成排序完成的Array(所以如果要保留原本的Array,請利用 var SourceMyArray = MyArray.slice(0);這個函式)


二維就比較複雜一些。要告訴sort()函式,我要用哪一維來排序,方法為何。這個寫法上就是:

MyArray.sort( function(a,b)
{
return a["id"].toUpperCase() < b["id"].toUpperCase() ? -1 : ( a["id"].toUpperCase() > b["id"].toUpperCase() ? 1 : 0 );
//return a["id"].toUpperCase() > b["id"].toUpperCase(); 錯誤的寫法,漏掉了等於的情況
});



大概的意思就是告訴排序函式幫我用id這個欄位幫我做排序,排序方法則是拿兩者比大小,並根據結果傳回-1或1或0。其中有個有趣的發現,當你用了上面我註解掉的那一行的錯誤的寫法,在10筆資料內的排序都會正確,一旦超過10筆,就會排序錯誤,為什麼?還真研究不出來,日後若有人知道原因,煩請告訴我喔。



這個範例程式放在這裡



可以自行貼到http://jsfiddle.net/或者是http://htmledit.squarefree.com/來做測試喔



補充說明JavaScript的Sort:

  • sort 在適當的位置排序陣列的元素。
var a = ['Wind', 'Rain', 'Fire'];
a.sort();
print(a); // Fire,Rain,Wind
sort 也可以接受 Callback 函數來決定如何排序陣列的內容。這個函數會對兩個值做比較,並返回下列三個值其中之一︰
  • 如果 a 在排序系統中小於 b,返回 -1(或任意的負數)
  • 如果 a 在排序系統中大於 b,返回 1(或任意的正數)
  • 如果 a 和 b 被認為是相等的,返回 0。
例如,下面的例子會以字串的最後一個字母來排序︰
var a = ['Wind', 'Rain', 'Fire'];
function sortFn(a, b) {
  var lastA = a[a.length - 1];
  var lastB = b[b.length - 1];
  if (lastA < lastB) return -1;
  if (lastA > lastB) return 1;
  if (lastA == lastB) return 0;
}
a.sort(sortFn);
print(a); // Wind,Fire,Rain

2013年9月29日 星期日

CheckBox用CSS變更大小 的方法(Chrome並不支援)

如同標題,很遺憾的 HTML5 內建 CheckBox 是無法在 Chrome 用CSS變更大小的
在其他瀏覽器呢?可以透過以下簡易的方法:

-ms-transform: scale(1.3); /* IE */
-moz-transform: scale(1.3); /* FF */
-webkit-transform: scale(1.3); /* Safari and Chrome */
-o-transform: scale(1.3); /* Opera */

雖然上頭註解寫著Chrome ,但可惜他就是不支援


複雜一點的方法,就是自己用img元素,自己架構一個CheckBox
或者用第三方元件,JQuery UI之類的。

2013年9月26日 星期四

jquery-1.10.2.min.map not found

最近更新了JQuery的使用版本,從1.7改用到1.9、1.10
發現了一些影響不大的DEBUG的訊息
比方:「 jquery-1.10.2.min.map not found

上網查詢了一下
這是因為我有漏(或是亂刪)該存在的檔案
而這個.map的檔案,是用來讓DEBUG的時候可以看懂JQuery的程式碼,因為通常jquery-1.10.2.min.js這種.min.js的JQuery的JS檔是經過壓縮的,而.map檔案就是紀錄著被壓縮的TAG的位置,這可以讓Chrome瀏覽器可以使用這個檔案,把被壓成了沒有籪行的、無法識別的亂碼在DEBUG模式之下還能看到程式的原有格式。

$.browser這個物件在JQuery 1.9版過後就被拿掉了

$.browser這個物件在JQuery 1.9版過後就被拿掉了,變成以其他的Plug-in的方式存在,有人提到,這可能是一種建議,希望避免開發者去偵測判斷瀏覽器。

如果引用了JQuery 1.9版之後的版本,在瀏覽器(特別指Chrome)執行並偵錯時,會看到以下錯誤的。
$.browser.msie cannot read property 'msie' of undefined

2013年9月18日 星期三

$(function() 是甚麼意思?


之前一直看不懂$(function() ,所以很多JQuery UI也都沒有在用,現在終於瞭解了,$(function() 等同於$(document).ready()


$(function() 
{
    $( "#datepicker" ).datepicker();
});

等同於
$(document).ready(function() 
{
    $( "#datepicker" ).datepicker();
});

也就是網頁好了之後,立刻執行的Function。

2013年9月6日 星期五

2013年8月26日 星期一

如何讓一個DIV包含另外一個DIV ------ 如何控制網頁元素(Tag element)讓元素從原本的位置(指的是親子位置)變更到其他位置

我在設計網頁的時候,經常會需要用一個Design的DIV來試著排版,但這內容可能在一開始得隱藏,並且之後是在按下按鈕之後才出現在PAGE的主要DIV當中,所以得用JS來動態的在按鈕事件中將物件元素搬移或加入到另外一個DIV中。

原本以為會用到的是 JQuery 的 add(),但是跟想像的有所差異

add()是用來把指定的元素加入自己所在的集合,然後一起去做什麼事情。比方說
這個例子,他是把所有的DIV加上邊框,之後包含著<P>元素來做把背景變成黃色。然而,<P>元素本身並不會變更其親子關係,也就是<P>元素如果在其他DIV中,這個關係不會變。




應該要用 JQuery 的 append(), prepend(), after(), before()來做,才是真正的把元素加到某個元素中。差異說明(請先下載範例):




畫面被分割成上、中、下:Div_Header、Div_Content、Div_Footer三個區塊,每個區塊各自放了一些方塊,而「我會被搬走」這個方塊則是在按下上方的按鈕之後,會被移動,可從上方的藍色框線看出Div_Header的範圍,進而判斷出是否DivAdd01在Div_Header之中。

1.比方我要把DivAdd01這個ID的DIV放到Div_Header中,則該使用append(),跟prepend(),兩個函式,會把DivAdd01加到Div_Header中,並決定放置在最後或最前面的位置。

2.另外,after(), before()則是會把DivAdd01加到Div_Header的父親層,讓DivAdd01跟Div_Header處於同一層,然後差異也在於放在之前或之後。

3.按下add按鈕,則會把left連同Top_left,具有這兩個class的元素都會被設定為被景色白色。