Archive

文章標籤 ‘jquery’

網頁表格隔行變色大整理

2009年8月12日 2 則評論

什麼是表格隔行變色呢?  看下圖就知道我要說的是什麼了!!

用戶插入圖片

整理目前在網路上針對網頁表格隔行變色的處理方式，用背景圖及一行一行設定的方法就不列入啦，其它大致如下:

CSS Expression

文字：color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
背景：background-color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');

這是先前有在使用的方法，當初看上他是因為簡短的code就能達到該效果，不過後來才知CSS Expression並不是W3C標準的語法，只能在IE7以下使用，IE8 (微軟想開了，還是回歸標準了)及 FireFox都不支援，所以大家看看就好，還是不要用這個來處理!! 不是標準就是不會長長久久的。

CSS 定義

<style type=”text/css”><!–
#raw0 {background:#cccccc;}
#raw1 {background:#ecf6fc; }
–></style>
<!– 以下為html code–>
<table>
   ＜tr class=”raw0″>…
   ＜tr class=”raw1″>…
</table>

這雖然和一行一行寫顏色差不多，但至少他用了CSS 所以方便以後更換Style，所以還是介紹一下

CSS + Javascript

<style type=”text/css”><!–
#senfe {
   width: 300px;
   border-top: #000 1px solid;
   border-left: #000 1px solid;
}
#senfe td {
   border-right: #000 1px solid;
   border-bottom: #000 1px solid;
}
–></style>
<script language=”javascript”><!–
function senfe(o,a,b,c,d){
   var t=document.getElementById(o).getElementsByTagName(“tr”);
   for(var i=0;i<t.length;i++){
       t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
       t[i].onclick=function(){
           if(this.x!=”1″){
               this.x=”1″;//本來打算直接用背景色判斷，FF獲取到的背景是RGB值，不好判斷
               this.style.backgroundColor=d;
           }else{
               this.x=”0″;
               this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
           }
       }
       t[i].onmouseover=function(){
           if(this.x!=”1″)this.style.backgroundColor=c;
       }
       t[i].onmouseout=function(){
           if(this.x!=”1″)this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
       }
   }
}
//senfe(“表格名稱”,”奇數行背景”,”偶數行背景”,”鼠標經過背景”,”點擊後背景”);
senfe(“senfe”,”#fff”,”#ccc”,”#cfc”,”#f00″);

–></script>

這個方式不錯，只要載入javascript並執行一行即可達到，不過每頁都要載入是真的有點麻煩，但也只能這樣才能簡化針對Style寫的code

CSS + JQuery

<style type=”text/css”> /*注意選擇器的層疊關係*/
 .stripe_tb th{background:#B5CBE6; color:#039; line-height:20px; height:30px}
 .stripe_tb td{padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center}
 .stripe_tb td *{padding:6px 11px}
 .stripe_tb tr.oddalt td{background:#cccccc} /*這行將給所有偶數行加上背景色*/
 .stripe_tb tr.alt td{background:#ecf6fc} /*這行將給所有偶數行加上背景色*/
.stripe_tb tr.over td{background:#FEF3D1} /*這個將是鼠標高亮行的背景色*/
</style>

<script type=“text/javascript“>
 $(document).ready(function(){
 $(“.stripe_tb tr“).mouseover(function(){ //如果鼠標移到class為stripe_tb的表格的tr上時，執行函數
 $(this).addClass(“over“);}).mouseout(function(){ //給這行添加class值為over，並且當鼠標一出該行時執行函數
 $(this).removeClass(“over“);}) //移除該行的class
 $(“.stripe_tb tr:odd“).addClass(“oddalt“); //給class為stripe_tb的表格的奇數行添加class值為oddalt
$(“.stripe_tb tr:even“).addClass(“alt“); //給class為stripe_tb的表格的偶數行添加class值為alt
 });
</script>

即然javascript可以做到，那JQuery有何做不到的，程式碼更減少了，所以如果本身系統已經使用JQuery了，可以考慮用這個方法

參考資料:
http://chinaz.com/Design/Pages/0Q23513H008.html
http://www.wowbox.com.tw/blog/article.asp?id=3077
http://www.cnblogs.com/css/archive/2008/07/23/1249622.html

Categories: WebDesign Tags: , , ,

JSON 解析與運用 for Java

2009年1月24日 尚無評論

json在jQuery使用ajax運用應該常會需要用到

去網路上找一下json目前在java上有沒有好的元件可以使用，找到一個不錯的open source，網址如下:

http://www.json.org/java/

他除了提供java物件轉換成json格式的功能
還有xml 與json之間互轉的實作，
所以算是該有的都有了，不過小弟目前只使用簡單的傳參數
所以就先介紹這個囉：

JSONObject  j = new JSONObject();
j.put(“code”,”000″);
j.put(“msg”,”hello world”);
out.println(j.toString());

最後會得到

{“code”:”000″,”msg”:”hello world”}

如果要更多的用法，它所提供的sample code就非常完整，千萬要先看一下，包你事半功倍 !!

Categories: Java Script Tags: ,

jQuery抓取跨網域外的資料(cross-domain) 運用JSONP

2009年1月21日 5 則評論

最近在測如何用jQuery讀取其它網頁的資料顯示，在網路上找到一篇簡單利用jQuery取得yahoo RSS新聞的範例，在本機可以執行，但一上server後就出現了沒有使用權限的問題

先前大概瞭解Javascript因為安全性問題，所以無法進行cross-domain的讀取，所謂cross-domain就是跨網域讀資料簡單來說就是a.com的網頁程式要去取b.com網頁資料，不過在現在web 2.0的時代，常會有需要進行跨網域的讀取，所以一樣大致上網整理了一下，目前有的作法如下:

JSONP

jQuery的文件有提到，從1.2版本開始支援使用 jQuery.getJSON(url,[data],[callback])
來進行跨網域讀取資料，原文如下：

As of jQuery 1.2, you can load JSON data located on another domain if you
specify a JSONP
callback, which can be done like so: “myurl?callback=?”. jQuery automatically
replaces the ? with the correct method name to call, calling your specified
callback.

如果要懂JSONP是什麼，小弟先前有篇文章就有提到，在此不多說啦，JSONP其實就是運用json資料格式，及回呼程式(callback=?)的方式達到可以取得到其它網域的資料並且執行後續callback的function，現在目前很多open API 例如yahoo,google, flickr 等都有支援callback的方式。

不過一般要使用JSONP，就是要你Client及Server之間的偶合度要高，除了其它有提供支援的網站可以使用外，所以適用度是有點限制的，不過還是要介紹一下，如何運作，在國王的新衣: JSONP 這篇網誌有提供取得flickr的圖片，小弟稍做修改成jQuery的寫法:

Client端:

$(function() {
   $('#button1').click(function(){
  var strURL='http://api.flickr.com/services/feeds/photos_public.gne?tags=羅平,油菜花,sunset&tagmode=all&format=json&jsoncallback=doPhoto';
  $.ajax({
     type:'GET',
     dataType:'jsonp',
     url:strURL,
   error: function(xmlHttpRequest,error) {
     alert('Ajax request ERROR');
   }
  })
   })
});
function doPhoto(result) { 
  var div = document.getElementById(“flickr”); 
  for(var i=0; i < result.items.length; i++) { 
   var img = document.createElement(“img”); 
   img.setAttribute(“src”,result.items[i].media.m); 
   img.setAttribute(“alt”,result.items[i].title); 
   var a = document.createElement(“a”); 
   a.setAttribute(“href”,result.items[i].link); 
   a.setAttribute(“target”,”_blank”); 
   a.appendChild(img); 
   div.appendChild(a); 
  } 
} 

<input name=”button1″ id=”button1″ type=”button” value=”test” />
<div id=”flickr”></div>

Server端:

doPhoto({ 
“title”: “每個人的相片 已標籤 羅平, 油菜花 和 sunset”, 
“link”: “http://www.flickr.com/photos/”, 
“description”: “”, 
“modified”: “2007-04-22T14:19:09Z”, 
“generator”: “http://www.flickr.com/”, 
“items”: [
{
“title”: “羅平金雞嶺夕陽”, 
“link”: “http://www.flickr.com/photos/38362352@N00/468370409/”, 
“media”: {“m”:”http://farm1.static.flickr.com/211/468370409_319f383a24_m.jpg”}, 
“date_taken”: “2007-04-22T22:19:09-08:00”, 
“description”: “…”, 
“published”: “2007-04-22T14:19:09Z”, 
“author”: “nobody@flickr.com (Nature RGB)”, 
“author_id”: “38362352@N00”, 
“tags”: “sunset yunnan 油菜花 羅平” 
}
]
}) 

當Server端回傳json格式的資料時，會依callback傳的doPhoto回傳，剛好client我們有個doPhoto function去執行接收到json的資料，大致就是這樣，而http://a.webvm.net/也有一個很簡單的範例，是呼叫另一個domain的json格式的 hello world 。

跨域代理（Cross Domain
Proxy）
主要原理就是用php或者其他語言寫一個代理請求的轉發過程。客戶端請求自己的服務器，服務器把請求轉發到目標地址並且得到回應，服務器再
把結果返回給客戶端。這個過程，對於開發者來說還是不錯的選擇，因為你可以在服務器上對回應的結果做自己的處理，可以決定需不需把結果要返回給客戶端。 不過還是一樣，需要有伺服端的配合，不過至少不用限制說一定要被請求端回傳json格式的資料才行，而這個proxy寫起來不然但小心有心人士利用，所以還是要判斷一下是不是由你認定的客戶端下的請求或是限定只proxy哪些網址。

而參考範例，以參考 Javascript 抓取跨網域外的資料  Tsung's Blog 的文章，但也是調整一下來看:

Client端:

$(function() {
  $('#button1').click(function(){
  $.ajax({
    type:'Post',
    dataType:'html',
    data: {
    strURL:'http://tw.yahoo.com/'
    },
    url: “proxy.jsp”,
  error: function(xmlHttpRequest,error) {
    alert('Ajax request ERROR');
  },     
     success:function(html){
       $(“#flickr”).html(html);
     }
  })
  })
});

<input name=”button1″ id=”button1″ type=”button” value=”test” />
<div id=”flickr”></div>

Server端:

<?php
if (isset($_POST['url']) && !empty($_POST['url']))
{
    // 記得檢查此 URL 是不是你發出的 request
   echo
file_get_contents($_POST['url']);
}
?>

參考資料:
http://www.dotblogs.com.tw/topcat/archive/2008/08/08/4846.aspx
http://blog.zol.com.cn/859/article_858048.html
http://plog.longwin.com.tw/programming/2008/12/15/javascript-ajax-get-cross-domain-data-2008
http://carffuca.javaeye.com/blog/65239
http://happytemplate.blogspot.com/2007/11/jsonp.html
http://ibox.blog.sohu.com/107171814.html
http://www.javaeye.com/topic/169765
http://a.webvm.net/

Categories: Java Script Tags: , ,

jQuery ajax使用在JAVA注意事項 – 編碼問題

2009年1月18日 2 則評論

今天花了一些時間在排除一個怪現象
因為覺得很奇特，所以特別寫上註記一下
給自己加深印象，也給可能會遇到的人參考一下

就是今天在撰寫程式利用jQuery的ajax 向另一隻程式要資料
寫法都沒有問題，但就是會出現ajax Error

初步排除法:
1.先確認程式是否無誤
2.再確認編碼是否為utf8
3.再確認回傳參數是否符合格式 (今天是使用json)

都確認過了，但就還是失敗
所以先把資料頁存成htm的方式試試
怪了，竟然成功了說 =.=|||

再仔細確認剛剛檢查的步驟，每一項都正確但只要換成JSP
就會失敗…最後發現問題點在

<%@ page contentType=”text/html; charset=UTF8″ %>

要調整為以下才行

<%@ page contentType=”text/html; charset=UTF-8” %>

怪吧! 瀏覽器兩者都認為是UTF-8的格式，但jQuery似乎比較挑一點
一定要寫UTF-8才行..@@ (又不知死了多少腦細胞了..)

Categories: JAVA Tags: ,

jQuery 小技巧 – 在非UTF8語系網頁傳遞中文參數排除方式

2009年1月14日 尚無評論

jQuery 在UTF8語系網頁傳遞中文時是一切正常的

但如果是big5語系時就會發生問題，因此要進行轉碼才能正常傳遞參數才行
在網頁用ajax傳遞時，要先將資料利用javascript的escape function進行轉碼

例如:

$(document).ready(function(){
  $.post(
     “getdata.asp”,
     {
       id:
escape(“中文字喔!!”)
     },
     function(txt){
      alert(txt);

     }
  );
});


以下是PHP版的解escape的函式:

function unescape($str) {
     $str = rawurldecode($str);
     preg_match_all(“/%u.{4}|&#x.{4};|&#\d+;|&#\d+?|.+/U”,$str,$r);
     $ar = $r[0];
     foreach($ar as $k=>$v) {
         if(substr($v,0,2) == “%u”)
         $ar[$k] = iconv(“UCS-2″,”Big5”,pack(“H4”,substr($v,-4)));
         else if(substr($v,0,3) == “&#x”)
         $ar[$k] = iconv(“UCS-2″,”Big5”,pack(“H4”,substr($v,3,-1)));
         elseif(substr($v,0,2) == “&#”) {
             $ar[$k] = iconv(“UCS-2″,”GBK”,pack(“n”,preg_replace(“/[^\d]/”,””,$v)));
         }
     }
     return join(“”,$ar);
  } 


以下是Java版本解escape的函式:

/**
* JavaScript escape/unescape 編碼的Java實現
* author jackyz keep this copyright info while using this method by free
*/
public class JavaScriptEscape {
   private final static String[] hex = { “00”, “01”, “02”, “03”, “04”, “05”,
           “06”, “07”, “08”, “09”, “0A”, “0B”, “0C”, “0D”, “0E”, “0F”, “10”,
           “11”, “12”, “13”, “14”, “15”, “16”, “17”, “18”, “19”, “1A”, “1B”,
           “1C”, “1D”, “1E”, “1F”, “20”, “21”, “22”, “23”, “24”, “25”, “26”,
           “27”, “28”, “29”, “2A”, “2B”, “2C”, “2D”, “2E”, “2F”, “30”, “31”,
           “32”, “33”, “34”, “35”, “36”, “37”, “38”, “39”, “3A”, “3B”, “3C”,
           “3D”, “3E”, “3F”, “40”, “41”, “42”, “43”, “44”, “45”, “46”, “47”,
           “48”, “49”, “4A”, “4B”, “4C”, “4D”, “4E”, “4F”, “50”, “51”, “52”,
           “53”, “54”, “55”, “56”, “57”, “58”, “59”, “5A”, “5B”, “5C”, “5D”,
           “5E”, “5F”, “60”, “61”, “62”, “63”, “64”, “65”, “66”, “67”, “68”,
           “69”, “6A”, “6B”, “6C”, “6D”, “6E”, “6F”, “70”, “71”, “72”, “73”,
           “74”, “75”, “76”, “77”, “78”, “79”, “7A”, “7B”, “7C”, “7D”, “7E”,
           “7F”, “80”, “81”, “82”, “83”, “84”, “85”, “86”, “87”, “88”, “89”,
           “8A”, “8B”, “8C”, “8D”, “8E”, “8F”, “90”, “91”, “92”, “93”, “94”,
           “95”, “96”, “97”, “98”, “99”, “9A”, “9B”, “9C”, “9D”, “9E”, “9F”,
           “A0”, “A1”, “A2”, “A3”, “A4”, “A5”, “A6”, “A7”, “A8”, “A9”, “AA”,
           “AB”, “AC”, “AD”, “AE”, “AF”, “B0”, “B1”, “B2”, “B3”, “B4”, “B5”,
           “B6”, “B7”, “B8”, “B9”, “BA”, “BB”, “BC”, “BD”, “BE”, “BF”, “C0”,
           “C1”, “C2”, “C3”, “C4”, “C5”, “C6”, “C7”, “C8”, “C9”, “CA”, “CB”,
           “CC”, “CD”, “CE”, “CF”, “D0”, “D1”, “D2”, “D3”, “D4”, “D5”, “D6”,
           “D7”, “D8”, “D9”, “DA”, “DB”, “DC”, “DD”, “DE”, “DF”, “E0”, “E1”,
           “E2”, “E3”, “E4”, “E5”, “E6”, “E7”, “E8”, “E9”, “EA”, “EB”, “EC”,
           “ED”, “EE”, “EF”, “F0”, “F1”, “F2”, “F3”, “F4”, “F5”, “F6”, “F7”,
           “F8”, “F9”, “FA”, “FB”, “FC”, “FD”, “FE”, “FF” };

   private final static byte[] val = { 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x00, 0x01,
           0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x0A, 0x0B, 0x0C, 0x0D, 0x0E, 0x0F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x0A, 0x0B, 0x0C, 0x0D, 0x0E, 0x0F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
           0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F };

   /**
    * 編碼
    * 
    * @param s
    * @return
    */
   public static String escape(String s) {
       StringBuffer sbuf = new StringBuffer();
       int len = s.length();
       for (int i = 0; i < len; i++) {
           int ch = s.charAt(i);
           if ('A' <= ch && ch <= 'Z') {
               sbuf.append((char) ch);
           } else if ('a' <= ch && ch <= 'z') {
               sbuf.append((char) ch);
           } else if ('0' <= ch && ch <= '9') {
               sbuf.append((char) ch);
           } else if (ch == '-' || ch == '_' || ch == '.' || ch == '!'
                   || ch == '~' || ch == '*' || ch == '\'' || ch == '('
                   || ch == ')') {
               sbuf.append((char) ch);
           } else if (ch <= 0x007F) {
               sbuf.append('%');
               sbuf.append(hex[ch]);
           } else {
               sbuf.append('%');
               sbuf.append('u');
               sbuf.append(hex[(ch >>> 8)]);
               sbuf.append(hex[(0x00FF & ch)]);
           }
       }
       return sbuf.toString();
   }

   /**
    * 解碼 說明：本方法保證 不論參數s是否經過escape()編碼，均能得到正確的「解碼」結果
    * 
    * @param s
    * @return
    */
   public static String unescape(String s) {
       StringBuffer sbuf = new StringBuffer();
       int i = 0;
       int len = s.length();
       while (i < len) {
           int ch = s.charAt(i);
           if ('A' <= ch && ch <= 'Z') {
               sbuf.append((char) ch);
           } else if ('a' <= ch && ch <= 'z') {
               sbuf.append((char) ch);
           } else if ('0' <= ch && ch <= '9') {
               sbuf.append((char) ch);
           } else if (ch == '-' || ch == '_' || ch == '.' || ch == '!'
                   || ch == '~' || ch == '*' || ch == '\'' || ch == '('
                   || ch == ')') {
               sbuf.append((char) ch);
           } else if (ch == '%') {
               int cint = 0;
               if ('u' != s.charAt(i + 1)) {
                   cint = (cint << 4) | val[s.charAt(i + 1)];
                   cint = (cint << 4) | val[s.charAt(i + 2)];
                   i += 2;
               } else {
                   cint = (cint << 4) | val[s.charAt(i + 2)];
                   cint = (cint << 4) | val[s.charAt(i + 3)];
                   cint = (cint << 4) | val[s.charAt(i + 4)];
                   cint = (cint << 4) | val[s.charAt(i + 5)];
                   i += 5;
               }
               sbuf.append((char) cint);
           } else {
               sbuf.append((char) ch);
           }
           i++;
       }
       return sbuf.toString();
   }

   public static void main(String[] args) {
       String stest = “中文1234abcd”;
       System.out.println(stest);
       System.out.println(escape(stest));
       System.out.println(unescape(escape(stest)));
   }

}

參考資料:
http://zhanghaidang.javaeye.com/blog/150470
http://blog.csdn.net/mubingyun/archive/2008/12/09/3482219.aspx
http://skiyo.cn/article/Skiyo-38-1223063418.html

Categories: Java Script Tags: , ,
分頁: 1 2 下一頁