Caton + OO + Google =?: javascript

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

2013年11月6日星期三

2013年7月17日星期三

心得 jquery 同步

預設都是非同步的，但是可以設定為同步

async 屬性設為 true 即可以

如下面的程式

$.ajax({
url: "xxx.jsp",
async: false ,
success: function(data){
alert(data);
}
});

參考 :　http://api.jquery.com/jQuery.ajax/

2013年1月8日星期二

由於最近有使用到判斷字串中是否有特定文字的機制，所以紀錄一下。

比如說，有一串字" 這是測試機"，我想要判斷是否有包含'測試' 這兩個字，在javascript 可以使用

String.search ，若有的話則會回傳出現在第幾個位置，沒有的話則回傳-1

當然其他 String.indexof, String.match 等也可以達到相同的效果

或可以參考：

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/search

2012年11月27日星期二

javascript 心得　regexp　replace

標籤： javascript

在範例中是將英文字母由小寫轉換成大寫

我這裡應用是將數字不分加上標籤好套用CSS

ｃｏｄｅ　如下


      function change(text){
         return "<a class='thenumber'>"+text+"</a>";  

       }                     


         
      // 強調數字部份
       function ModifyStyleSubDescription(str){   


       //var str= "11ABC 22 DEF";               


       //match number in range 0-999         


       var _result = "";                   


       var reg = /(\d+)/g; // 使用g　才抓的到第二組    

    
       _result = str.replace(reg,change);        


       return _result;                          


        }

原本使用的函式，但IE8不支援....


    
         
      // 強調數字部份
       function ModifyStyleSubDescription(str){

      var _result = "";

      var reg = /(\d+)/;  

      var parts = str.split(reg);  

       
      for (var i = 0 ; i < parts.length ; i ++){   

           if(parts[i].match(reg)){

       _result +="<a class='thenumber'>"+parts[i]+"</a>"

           }else{

        _result +=parts[i];

            }   

      }    

       return _result;

        }

參考：W3Cschool , http://www.w3school.com.cn/js/jsref_replace.asp

2012年8月16日星期四

心得 Flot 畫圖，參數設定

標籤： javascript, jquery plugin

以下介紹一些使用 Flot 畫趨勢圖的一些心得
首先繪圖函式可以簡單的如下，設定三個變數：


          $.plot(  $("#drawdiv")  , DATAObj, Setting );

drawdiv：要繪圖的 tag
DATAObj：繪圖的資料來源，這裡有他的規定的格式
Setting：其他變數設定，包含X軸、Y軸，滑鼠事件監聽等等

----------------------------------------------------

$("#drawdiv") ：

這裡要注意，記得div 要設定好長度和寬度就好

DATAObj：

一般設定的話，將外部物件 datasets 傳入即可， label 是在圖形上顯示的文字說明


 var datasets =

        {"objA": {"label":"測試物件1","data":[[1336603200000,55],[1336533600000,94]]},

  "objB": {"label":"測試物件2","data":[[1336603200000,77],[1336533600000,88]]},

        "objC": {"label":"測試物件3","data":[[1336603200000,21],[1336533600000,21]]}};

顯示如圖

但若要設定個別設定線段的話就要修正data 的地方，如圖設定
測試物件一為線段、測試物件二為直條圖、測試物件三為點


          $.plot( $("#drawdiv") ,



                   {  data: datasets.objA.data,

               label:datasets.objA.label,

               lines: { show: true}

            },

            {  data: datasets.objB.data,

               label:datasets.objB.label,

               bars: { show: true , barWidth: 15000000}

            },

            {

               data: datasets.objC.data,

               label:datasets.objC.label,

               points: { show: true, fill: true ,fillcolor: null},

               lines: { show: false }

            }]

, Setting );

Setting：

簡單設定如下， Y軸設定加上單位 "unit",
X軸設定格式是時間、時間的格式、最大時間、最小時間、時間間隔，
series: 整體設定顯示為線段、但data部份中有指定的話以data指定的為優先
grid: 這裡設定事件滑鼠移動事件的開啟與否


 $.plot( $("#drawdiv") , DATAObj,
                       { yaxis: { min: 0 , 

                         tickFormatter: function(val){ 

               return val + "unit";

     }

   },

     xaxis: { 

             mode: "time" ,

      timeformat: " %0m/%0d %H:%M",

      min: 
1336602600000,

      max: 
1336535600000,

      minTickSize: [4, "hour"]

    },

     series: {

       lines: { show: true }

    },

    grid: { hoverable: true, clickable: true }

       }

           );

參考： flot API + 自己使用心得

2012年7月4日星期三

轉貼 jquery ui 外掛 Timepicker

標籤： javascript, jquery plugin

jquery ui 中有一個功能是可以選取日期 Datapicker 的功能，但是若要詳細到時間的話就沒有辦法了，Google 一下後找到這個外掛剛好可以達成這個功能 timepicker.

參考： http://trentrichardson.com/examples/timepicker/

2012年6月26日星期二

轉貼　javascript minify and beautifer

標籤：知識, javascript

偶爾會使用到xxx.min.js 的javascript 檔案，　一直在想要怎麼製作，原來線上就有編輯的功能，　如　：　Online Javascript Compression Tool　，優點應該只是縮小檔案容量。

不過有　min 當然也有還原的程式，　如　http://jsbeautifier.org/

2012年6月13日星期三

Jquery 外掛紀錄：讀取中鎖螢幕 BlockUI Plugin

標籤： javascript, jquery plugin

這邊分享一下一個好用的 jquery 外掛：jQuery BlockUI Plugin

我會用到的使用時機，
1. 使用AJXA loading 資料時可以用，先將螢幕鎖住等到讀取完成在解鎖。
2.或強調特別功能

效果如下圖，

參考：jQuery BlockUI Plugin

2012年6月1日星期五

jquery 圖表plugin： Flot plugin

標籤： javascript, jquery plugin

Flot 雖然用起來有點功能單調，不過實際找一下相關的文件，發現其實有很多人提供相當時用的plugin ，像是泡泡圖，雷達圖、甘特圖都有相關的plugin 補充加強原本的功能。

不過我覺得比較實用的是tool tip 。

詳細請參閱： http://code.google.com/p/flot/wiki/Plugins

2012年3月21日星期三

轉貼 AJAX cache更新問題

標籤： javascript, jquery plugin

自己要用到一個AJAX 更新資料的網頁發現的，預設的cache 是打開得，所以會存放上次的資料，但是我是要每一段就要更新的，所以必需要找個方式吧cache 關掉或繞過他才能達到我想要得效果。

在＊中有提到四個方式：

1.在請求的URL後面加一個時間參數,如: time=new date() 當然也可以添加其他性質參數，只要是隨機參數就可以,
open("GET",url+"?t="+Math.random(),false) 或者 url+"?timeStamp="+new Date().getTime(); 　

2. 　新增　js 代碼 　　

function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}　
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
processXML(xmlObj.responseXML);
}
else{
document.getElementById ('playernews').innerHTML='採用AJAX來實現資料的讀取,正在載入...';
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function show() {
ajaxRead('*.jsp');
setInterval("ajaxRead('new.php')",30000); //自動更新
}

　　

3.加上
xmlhttp.setRequestHeader("Cache-Control","no-cache"); 　

4.在XmlHttpRequest發送請求之前加上 XmlHttpRequest.setRequestHeader("If-Modified-Since","0"), 如:在 XXXXX.send(YYYYYY).

我沒有全部利用過，只使用過1就能達成效果。

參考:＊解決Ajax更新不及時的途徑，IT專家網

2012年3月20日星期二

心得，網站播放音效

標籤： javascript

要在網頁上播放音樂有很多方式，在[1]中介紹了許多方式如：

使用API 如 yahoo API(sample) , Google (sample)
Using Plugins, 不同瀏覽器有不同的plugin，這裡我知道的有quick time, flash
使用 embed 標籤，像ie 的話是直接call mediaplay 播放的樣子，Firefox 需要額外裝Quick time的外掛
使用 object 標籤, 沒用過
使用 audio 標籤, HTML5方式[2], 好用，但是IE6~8 要使用的話需要額外設定，這裡就不深入討論
其他

其他相關找到的用法：

[3] 也是用 HTML5
[4] 利用flash 來播放

為了單純方便播放聲音，我簡單利用jquery 和embed 的方式寫一個呼叫聲音的函式，測試過 Firefox 需要額外裝Quick time的外掛, IE 和 Chrome 可以直接播放。


function JPlaySound(_soundlocation){           

          // _soundlocation like "music/sample.mp3"         


   $('embed#objJSound').remove();       // remove duplicate tag    

   var $newdiv = $('<embed autostart="true" hidden="true" id="objJSound" src="'+_soundlocation+'"></embed> ');      // hidden embed  tag        

   $('body').append($newdiv);     // append to body   

       
}

----------------------------------------------------------------------------------------
補充1 純粹使用 javascript 的 code


 function JPlaySound(_soundlocation){

 // delete old tag if exist 

var olddiv = document.getElementById('objJSound');

if(olddiv!=null)

 document.body.removeChild(olddiv);

 var newdiv = document.createElement('embed');

 newdiv.setAttribute("id","objJSound");

 newdiv.setAttribute("src",_soundlocation);

 newdiv.setAttribute("hidden","true");

 newdiv.setAttribute("autostart",true);

 document.body.appendChild(newdiv);

 }

---------------------------------------------------------------------------------------
補充2 混用 HTML5 (支援ie 6,7,8)

設定 tag 和判斷是否支援HTML5


// HTML5 audio tag


<!-- html5 tag  -->

 <audio id="a1"  style="visibility:hidden;" controls>    
 </audio>




 // 判斷是否支援HTML5





 <script type="text/javascript">

 var isSupportHTML5 = true;

 </script>

// 不支援（小於ie9）將 isSupportHTML5 設為 false




 <!--[if lt IE 9]>

 <script type="text/javascript">

 //您正在使用的瀏覽器為 ie9 或比 ie9 更新的版本 

 isSupportHTML5 = false;

 </script>

 <!--<![endif]-->

呼叫程式:



 /**     
     _soundlocation like "music/sample.mp3" 

 // Firefox  不支援  mp3
  **/ 

 function JPlaySound(_soundlocation){

 if(isSupportHTML5){

 var audio = document.getElementById("a1");

 audio.src=  _soundlocation;

 audio.load();

 audio.play();

 }
       else{

 // delete old tag if exist

 var olddiv = document.getElementById('objJSound');

 if(olddiv!=null)

   document.body.removeChild(olddiv);

 var newdiv = document.createElement('embed');

 newdiv.setAttribute("id","objJSound");

 newdiv.setAttribute("src",_soundlocation);

 newdiv.setAttribute("hidden","true");

 newdiv.setAttribute("autostart",true);

 document.body.appendChild(newdiv);

 }

 }

參考：
[1] W3cSchools.com, HTML Audio Sounds
[2] HTML5 audio tag
[3] jPlayer
[4] flashsound
[5] Conditional Comments [if IE] : IE 專用 (IE only) 條件式 HTML 註解的語法
[6] Audio and Video processing in HTML5

2011年12月2日星期五

分享 Google MarkerClusterer

標籤： google map api, javascript

這裡分享一個Google Map 的 library. 簡單的說就是在地圖上顯示多少個節點。

如下圖，到Google Map API 的範例就可以找到[2].

要使用的話記得引用 markerclusterer.js 及定義要匯入的JSON，這些在範例都找得到。

更多範例 [3], 在[1]裡面找一下就有，不過為了方便先列出來。

參考：

[1]: google-maps-utility-library-v3
[2]: Google Map API Sample, MarkerClusterer
[3]:MarkerClusterer v3 Examples

2011年9月6日星期二

心得 Flot 畫圖時區問題

標籤： javascript

若要使用 Flot 畫圖有想要設定時區的話，還是老老實實的從server 吧時間的變數轉好（我是過要轉成long 格式），要在 client 端設定時區目前還是不支援。

參考: http://efreedom.com/Question/1-5663821/Time-Zone-Problem-Flot-JQuery-Plugin

心得 json eval 在手機上網無法顯示狀況

標籤： javascript

嘗試一下利用AJAX 呼叫 json 的方式在網頁上讀取，配合的 library 還包含 jquery.mobile 和 flot ，不過使用AJAX Post 回傳摭取直的時候利用 eval 的方式可以在一般電腦網頁上的FF 和 Chrome 是可以執行取得json，不過在我的 Android 2.1 下是不行的... ，估計應該是手機版的瀏覽器對於 eval 的支援比較差。

我也用過 JSON.parse 不過直接跳到 complete.

所以我還試紙好用伺服器來取得直接寫入，不過這樣 AJAX 的 loding 動畫我就不知道在哪放了，只好放棄用loading動畫了。

2011年9月1日星期四

心得 JQuery 繪圖 Plugin , jqPlot 和 Flot

標籤： javascript, jquery plugin

介紹一下兩個繪圖的plugin， jqPlot 和 Flot ，我主要是用在手持裝置上顯示圖片的，因為flash 在手持裝置上執行有些地方含是有問題，像我的 android 2.1 手機就不行。

個人心得
jqPlot ：

支援JSON 格式的文件
Sample 比 Flot多
官網文件比較多，而且有整理過
官網： http://www.jqplot.com/

Flot :

同樣也支援JSON 格式的文件
可以支援 JQuery Mobile, jPlot 目前版本沒辦法顯示圖形（或很難我不會用），
目前我搭配最好的各版本 jquery 1.5.x, jquery.mobile-1.0a4.1.min.js, flot 0.7，

主要是 flot 0.7 是以 jquery 1.5.x 為基礎的，看他所附得lib 就可以看到
jquery.mobile 目前最新的是 jquery.mobile-1.0b2 但是用起來搭配 jquery 1.6.x 比較好

官網： http://code.google.com/p/flot/

心得 jquery mobile 撰寫手持裝置網頁的好幫手

標籤： javascript, jquery plugin

不得不推薦一下 jquery mobile 這個 plugin, 利用簡單的預設套件就可以做出配合觸碰及有質感的網頁，
附帶一題他是使用HTML5 的功能，

詳細參考可參閱官方網頁: JQuery Mobile Framework.

2011年8月30日星期二

心得 Jquery checkBox 檢查語法

標籤： javascript, jquery plugin

想要取得 check box 回傳的值，原本以為很簡單，不過還是有點給他小困難，

以下是作範例的 checkbox, chkRemember



<input type="checkbox" name="chkRemember" id="chkRemember" class="custom" />

下面是用來取值的語法

var _r1 = $('input[name=chkRemember]').attr('checked');

var _r2 = $('input[name=chkRemember]').is(':checked');

var _r3 = $('#chkRemember:checked').val();

#var _r4 =$("#chkRemember").prop("checked");

以上是在jquery 1.6 下測試的

我在Firefox測試後，只有 _r2 和_r4 可以取值，其他可能是我語法敲錯，一時間也茶不出來

! 此外在 jquery 1.5 _r4 的語法不支援

參考：

[1].jquery API

[2]. How to check and uncheck a checkbox with jQuery

[3].【Jquery】關於1.6.1 checked, rx836

2011年8月9日星期二

心得遇到傳說得 parseint 08 錯誤

標籤： javascript

今天檢查程式時，居然發現錯誤，檢查了一下原來是 javascript 的 parseInt 的問題，
parseInt 不是很聰明的玩意，所以當 parseInt('08')時，他會判斷為8進制或2進制，所以08,09 就會變成0....., 解決方式就是告訴他要實際的進制規則，將判斷式修正為 parse('08',10) 即可

參考：傳說中 JavaScript 的 parseInt('08')

2011年7月4日星期一

心得 jquery 動態新增欄位

標籤： javascript, jquery plugin

參考以下的來源利用 jquery 達成動態的新增移除 text欄位

以下是 code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Test Jquery dyamic</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.4");



function AddItem() {

document.getElementById('newitems').innerHTML +=

      "<div class=\"rowElem\" >"+
     "<label> ITEM ID: </label>"+
        "<input name=\"serid\" id=\"serid\" type=\"text\" maxlength=\"11\"/>"+
        "<input type=\"button\" value=\"add\"  onclick=\"AddItem()\" /> "+
        "<input type=\"button\" value=\"delete\" onclick=\"DeleteItem()\"/>"+
    "</div>";  
 
 
 
  // 先抓到是哪一個 tr
  var sids= $('input:button', '#reg');

  if(sids.length<4){
 var _count= sids.length-3;  
 sids.eq(_count).hide();  
  }
  else{
   var _count= sids.length-3;  
 sids.eq(_count-1).hide();
 sids.eq(_count).hide();   
  }


}


function DeleteItem() {

  // 先抓到是哪一個 tr
  var txts= $('input:text', '#reg');

  var _count= txts.length-1;
  // 移除它
  var rownow = txts.eq(_count).parent();
  rownow.remove();

    


    // BTN 顯示先前的
  var btns= $('input:button', '#reg');  

  var _bcount= btns.length-1;
 if(_bcount==0){
  btns.eq(_bcount).show();
 }
 else{ 
  btns.eq(_bcount-1).show();
  btns.eq(_bcount).show();
 }

}

function check(){

 var txts= $('input:text', '#reg');
 var _count= txts.length;
 var _str ="";
 for (var i=0;i< _count; i++){
_str = _str +i + ": " + txts.eq(i).val()+" ";
 }

 alert(_str);
}




</script>
</head>
<body>


 <div id ="fromBody" >
   <form id ="reg"  method="post" action="#" ">
     

    <div class="rowElem">
     <label> ITEM ID:  </label>
        <input name="serid" id="serid" type="text" maxlength="11"/>
        <input type="button" id="additem" value="add"  onclick="AddItem()" />               
    </div>

    <div id = "newitems">
 
    </div>
 
    <div class="rowElem">      
       <input type="submit"  value="Send" onclick="check()"/>           
    </div>
 
</form>


</body>
</html>

注意落利用他的jquery plugin 要注意 DOM的資料結構會變動，如圖使用 jqTransform

參考:

[1]: jquery eq

[2]: jquery parent/

[3]: jquery remove/

[4]: jQuery 選取元素 (Selectors)

2011年6月28日星期二

轉貼, ie 下 window.open 自動關閉

標籤： javascript

應該是 IE 的安全性的關係，在 FireFox 下狀況是正常，開啟後會自動關閉，我是在設定新視窗是MS word format 格式下發生的。

我測試的例子是開啟新視窗 MS word format，這個方式 ie8 會出現封鎖警告訊息，按下載就可以將 word 檔下載，達成我想要得結果。

code：


function openNewWindow()
{
window.open('TEST.html', '_self' );

}

附註：

原本的預想流程，網頁上有一連結可以開新視窗->以word 格式瀏覽，原頁面和新視窗產生的文件都存在瀏覽器上。
現在流程，按下連結後下載檔案，不過 chrome 或 FF 下載完要改副檔名，下完是.aspx 檔，改成doc 就可以達到效果了。遇到情況是我是用asp.net 來作伺服器的。

參考:http://tommyhu.cn/ie-window-open-bei-zuzhi/

訂閱：文章 (Atom)

2013年11月6日 星期三

2013年7月17日 星期三

2013年1月8日 星期二

2012年11月27日 星期二

2012年8月16日 星期四

$("#drawdiv") ：

DATAObj：

Setting：

2012年7月4日 星期三

2012年6月26日 星期二

2012年6月13日 星期三

2012年6月1日 星期五

2012年3月21日 星期三

2012年3月20日 星期二

2011年12月2日 星期五

2011年9月6日 星期二

2011年9月1日 星期四

2011年8月30日 星期二

2011年8月9日 星期二

2011年7月4日 星期一

2011年6月28日 星期二

2013年11月6日星期三

2013年7月17日星期三

2013年1月8日星期二

2012年11月27日星期二

2012年8月16日星期四

2012年7月4日星期三

2012年6月26日星期二

2012年6月13日星期三

2012年6月1日星期五

2012年3月21日星期三

2012年3月20日星期二

2011年12月2日星期五

2011年9月6日星期二

2011年9月1日星期四

2011年8月30日星期二

2011年8月9日星期二

2011年7月4日星期一

2011年6月28日星期二