<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>聰明的生活2 &#187; javascript</title>
	<atom:link href="http://blog.yslifes.com/archives/category/program/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.yslifes.com</link>
	<description>自己寫java程式的一些筆記</description>
	<lastBuildDate>Wed, 08 Feb 2012 02:26:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
	<atom:link rel='hub' href='http://blog.yslifes.com/?pushpress=hub'/>
		<item>
		<title>[JAVA]聯絡我們表單程式後台</title>
		<link>http://blog.yslifes.com/archives/980</link>
		<comments>http://blog.yslifes.com/archives/980#comments</comments>
		<pubDate>Thu, 02 Feb 2012 15:32:00 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[database]]></category>
		<category><![CDATA[easyui]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jsp]]></category>
		<category><![CDATA[程式]]></category>
		<category><![CDATA[MySQL]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/?p=980</guid>
		<description><![CDATA[前一篇介紹過聯絡我們的的前台程式，這篇會介紹如何取得前台聯絡表單所留言的內容，使用的網頁使用framework有jquery及easyui，利用datagrid來顯示所有的資料列，而重要的留言內容則顯示於iframe裡，如此可排除大部份的html tag產生的問題。 這程式目前缺少了幾個功能，並不影響使用，不過如果有需求的人倒可以自己加入使用： 前台留言後自動發mail給某位管理者 後台可回覆留言給使用者，寄送mail或電話聯絡後寫下聯絡事項 最主要是JavaMail的使用，及資料寫入資料庫的應用。 因為是後台，所以還需要一個登入畫面，再登入成功後可以顯示後台menus，利用easyui的layout排列north為資訊狀態，center為datagrid顯示聯絡資料列表，而east為留言的內容。 而網頁使用Ajax傳送get或post參數給後端，而後端程式回傳json格式如下： total：總筆數，grid顯示分頁toolbar使用的，會計算總頁數等… success：成功執行則回傳true，否則則回傳false msg：回傳的訊息，可於回傳success為false時，帶上錯誤訊息顯示給使用者知道 rows：為一個陣列資料，每一筆資料都是一個json格式 程式碼如下： index.jsp登入後台 &#60;%@ page language=&#34;java&#34; contentType=&#34;text/html; charset=UTF-8&#34; pageEncoding=&#34;UTF-8&#34;%&#62; &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD HTML 4.01 Transitional//EN&#34; &#34;http://www.w3.org/TR/html4/loose.dtd&#34;&#62; &#60;html&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=UTF-8&#34;&#62; &#60;title&#62;登入&#60;/title&#62; &#60;style type=&#34;text/css&#34;&#62; html,body{ margin:0; padding:0; height:100%; border:none } &#60;/style&#62; &#60;script type=&#34;text/javascript&#34; src=&#34;js/jquery-1.7.1.min.js&#34;&#62;&#60;/script&#62; &#60;script type=&#34;text/javascript&#34; src=&#34;js/jquery.form.js&#34;&#62;&#60;/script&#62; &#60;script type=&#34;text/javascript&#34;&#62; $(function(){ $(document).ready(function() { [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/980/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[JAVA]連絡我們表單程式前台</title>
		<link>http://blog.yslifes.com/archives/979</link>
		<comments>http://blog.yslifes.com/archives/979#comments</comments>
		<pubDate>Mon, 16 Jan 2012 13:49:56 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[Java]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jsp]]></category>
		<category><![CDATA[架站]]></category>
		<category><![CDATA[程式]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[sql]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/979</guid>
		<description><![CDATA[這是個很常在官方網頁看到的程式，在這種表單之前要與官方網站人員連絡，只能使用email，只是這email address會被人故意的收集，發送垃圾郵件，十分讓人困擾。 在表單的設計上，需要讓網站人員能知道是誰留了資料，所以連絡的方式一定要讓使用者留下，所以設計畫面如下：類型、標題、姓名、EMail、電話及內容。 按下送出，可存於資料庫裡，這裡可以再加一個send mail的動作，不過目前這個範例並沒有實作。 MySQL資料表 delimiter $$ &#160; CREATE TABLE `contact` &#40; `id` INT&#40;11&#41; NOT NULL AUTO_INCREMENT, `title` VARCHAR&#40;500&#41; DEFAULT NULL, `content` text, `user_name` VARCHAR&#40;45&#41; DEFAULT NULL, `user_email` VARCHAR&#40;45&#41; DEFAULT NULL, `user_tel` VARCHAR&#40;45&#41; DEFAULT NULL, `kind` VARCHAR&#40;45&#41; DEFAULT NULL, `postdate` TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP, `replydate` TIMESTAMP NULL DEFAULT NULL, PRIMARY KEY &#40;`id`&#41; &#41; ENGINE=MyISAM [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/979/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>自動產生隱藏iframe AutoCreateIframe</title>
		<link>http://blog.yslifes.com/archives/959</link>
		<comments>http://blog.yslifes.com/archives/959#comments</comments>
		<pubDate>Fri, 26 Aug 2011 13:59:26 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/959</guid>
		<description><![CDATA[之前有寫過一個自動產生隱藏iframe的方法，不過好像沒有讓它支援所有瀏覽器，在IE系列好像因為安全性問題，並不會建立成功，所以把原本使用createElement來建立iframe，而改成在ie裡使用 var frame = document.createElement&#40;&#34;&#60;iframe name=\&#34;_hiddenframe\&#34;&#62;&#34;&#41;; 因為在IE裡create IFrame時，並不能指定他的name屬性，不過很有趣的一件事，在IE9時，這規則又被打破了，如果強行使用上面方法會出現以下錯誤： DOM Exception:INVALID_CHARACTER_ERR(5) 此方法需要使用到jQuery，主要來用判斷Browser是何種及其版本： function createIFrame&#40;&#41; &#123; try &#123; &#160; if &#40;!document.getElementById&#40;&#34;_hiddenframe&#34;&#41;&#41; &#123; &#160; if&#40;$.browser.msie &#38;&#38; parseInt&#40;$.browser.version,10&#41; &#60; 9&#41; &#123; var frame = document.createElement&#40;&#34;&#60;iframe name=\&#34;_hiddenframe\&#34;&#62;&#34;&#41;; &#125; else &#123; var frame = document.createElement&#40;&#34;iframe&#34;&#41;; &#125; frame.setAttribute&#40;&#34;name&#34;, &#34;_hiddenframe1&#34;&#41;; frame.setAttribute&#40;&#34;src&#34;, &#34;about:blank&#34;&#41;; frame.setAttribute&#40;&#34;frameborder&#34;, &#34;0&#34;&#41;; frame.setAttribute&#40;&#34;height&#34;, &#34;0&#34;&#41;; frame.setAttribute&#40;&#34;width&#34;, &#34;0&#34;&#41;; frame.setAttribute&#40;&#34;id&#34;, &#34;_hiddenframe&#34;&#41;; frame.name = &#34;_hiddenframe&#34;; [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/959/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[c#]asp.net+jQuery+json做Ajax</title>
		<link>http://blog.yslifes.com/archives/954</link>
		<comments>http://blog.yslifes.com/archives/954#comments</comments>
		<pubDate>Thu, 23 Jun 2011 15:35:09 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[C#]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[程式]]></category>
		<category><![CDATA[asp.net]]></category>
		<category><![CDATA[c#]]></category>
		<category><![CDATA[csharp]]></category>
		<category><![CDATA[express]]></category>
		<category><![CDATA[json]]></category>
		<category><![CDATA[VisualStudio]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/954</guid>
		<description><![CDATA[Ajax常用在網頁單獨某一區塊的內容更新，不需要整頁網頁重新整理就可以得到區塊內容的更新，而常用與Web-Server做資料交換的格式有純文字、Parameter(key=value)、XML或是json等，而json為最常使用的格式之一，它不像XML格式，需要開始Tag與結束Tag，只需要利用Key,Value的方式來進行資料的設定，比XML更為簡單、內容大小更為精簡，詳細內容及方法可以參考http://www.json.org/。 asp.net(使用c sharp)使用jQuery實作Ajax與伺服器溝通。 建立Web服務器asmx 利用Web服務器的函數(方法)來處理Ajax的需求及回應 要使用Ajax呼叫Web服務，需要把System.WebScript.Services.SrciptService這行的mark拿掉才可以。 再來建立相對應的函數(方法)，Ajax呼叫的網頁會是getData.asmx/函數(方法) 如需要共用Session內容，則需在WebMethod加上enableSession:true才可 另一個範例，使用request來取得Ajax傳來的POST及GET二種方法的資料，而使用Response來回傳處理過後json格式資料。 回傳json格式需設定檔頭header的contentType為application/jsp，否則會被設定為xml格式 取得post資料使用the.Context.Request.Form[key名稱] 取得Get資料則使用the.Context.Response.QueryString[key名稱] 利用Dictionary來設定及存放要回應的資料 使用JavaScriptSerializer來序列化dictionary內容，會自動產生json格式，不使用return而需使用Response.Write內容才可。 原始碼： using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Script.Serialization; namespace JQueryJson &#123; /// &#60;summary&#62; /// getData 的摘要描述 /// &#60;/summary&#62; &#91;WebService&#40;Namespace = &#34;http://tempuri.org/&#34;&#41;&#93; &#91;WebServiceBinding&#40;ConformsTo = WsiProfiles.BasicProfile1_1&#41;&#93; &#91;System.ComponentModel.ToolboxItem&#40;false&#41;&#93; // 若要允許使用 ASP.NET AJAX 從指令碼呼叫此 Web 服務，請取消註解下一行。 &#91;System.Web.Script.Services.ScriptService&#93; public class getData [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/954/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jsp簡單留言板</title>
		<link>http://blog.yslifes.com/archives/925</link>
		<comments>http://blog.yslifes.com/archives/925#comments</comments>
		<pubDate>Sat, 16 Apr 2011 13:34:05 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[Java]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jsp]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[程式]]></category>
		<category><![CDATA[board]]></category>
		<category><![CDATA[database]]></category>
		<category><![CDATA[jdbc]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[source]]></category>
		<category><![CDATA[tomcat]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/925</guid>
		<description><![CDATA[這個範例有新增留言、查詢留言及留言分頁顯示等功能，後台的管理還沒有建置完成，留言者需要填入標題、顯示名稱、電話、信箱及留言內容，其中電話與電子信箱不顯示在留言列表中，電話及信箱可以為之後後台回覆寄信連絡使用。 當然這還有需多可以增加的功能，像是留言通知、隱私留言、留言刪除等，之後會再慢慢增加。 資料庫使用MySQL資料庫，使用JDBC來連接資料庫(DataSource方式)，記錄檔則是使用log4j。 在新增留言部份，submit之前會先檢查是否有未填欄位，如果檢查通過則會自動建立IFrame來給這個form的target使用，新增完成後會自動回到留言列表的頁面。 查詢留言會對資料的標題及留言內容進行比對，有相同資料就會顯示查詢的結果，如果想進階做一個Search-Engine則可以參考建立自己的搜尋引擎。 最後也就是最重要的資料顯示功能，這裡包含了一個分頁模組，傳入的參數會有s，查詢條件，及p，目前頁數。 範例檢視 資料表 CREATE TABLE `threads` &#40; `post_id` INT&#40;11&#41; NOT NULL AUTO_INCREMENT, `post_name` VARCHAR&#40;150&#41; NOT NULL, `post_title` VARCHAR&#40;300&#41; DEFAULT NULL, `post_mail` VARCHAR&#40;100&#41; DEFAULT NULL, `post_tel` VARCHAR&#40;100&#41; DEFAULT NULL, `post_desc` text, `post_reply` INT&#40;11&#41; DEFAULT NULL, `post_show` VARCHAR&#40;1&#41; DEFAULT '1', `post_state` VARCHAR&#40;1&#41; DEFAULT '1', `create_time` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, `create_id` INT&#40;11&#41; [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/925/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>jsp檔案上傳並利用Ajax製作ProgressBar監控上傳進度</title>
		<link>http://blog.yslifes.com/archives/908</link>
		<comments>http://blog.yslifes.com/archives/908#comments</comments>
		<pubDate>Tue, 05 Apr 2011 23:24:00 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jsp]]></category>
		<category><![CDATA[apache]]></category>
		<category><![CDATA[file]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[upload]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/908</guid>
		<description><![CDATA[之前寫過一個jsp的檔案上傳，把檔案上傳的動作製成一個class。而現在要提供的這個範例就比較亂一點了，重點會在增加監控的ProgressListener及Ajax取得上傳進度之資料。 程式需要一個bean放入session裡，專門來存放目前上傳的bytes數及其它資訊，選擇好檔案按下上傳時，會開始上傳動作(使用iframe)，並啟動Ajax與Server要求目前上傳進度狀況，把資訊顯示在browser上。 這個專案需要使用二個額外的jar framework，分別為Apache Filupload及Apache common io，而Fileupload需要1.2以上版本才支援ProgressListener。 存入上傳資訊的bean package com.yslifes.file.upload; &#160; public class UploadStatus &#123; private long bytesRead;// 目前上傳byte數 private long totBytes;// 總共的byte數 private int item;// 目前上傳的item private long startTime;// 啟始時間 &#160; public UploadStatus&#40;&#41; &#123; startTime = System.currentTimeMillis&#40;&#41;; &#125; &#160; public long getBytesRead&#40;&#41; &#123; return bytesRead; &#125; &#160; public void setBytesRead&#40;long bytesRead&#41; &#123; this.bytesRead = [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/908/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>[jQuery]圖片(相片)透明度Show幻燈片效果</title>
		<link>http://blog.yslifes.com/archives/878</link>
		<comments>http://blog.yslifes.com/archives/878#comments</comments>
		<pubDate>Wed, 19 Jan 2011 12:46:54 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[程式]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[source]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/878</guid>
		<description><![CDATA[這一個效果很像是flash做出來的，可以用在形象產品或圖片上，當滑鼠滑入圖片時會慢慢變清楚，而滑鼠移開後，又會自動淡出到原本的透明度，當點擊照片時，又利用ThickBox(Lightbox)來顯示大張的圖片。 用到的jQuery效果有hover(滑入function,滑出function)，fadeTo(速度,透明度[0-1]) 樣式如下： 圖片一開始會被亂數速度變透明，如果不想要此效果，只要把速度調整一下，或是直接css設定透明度都可以。 按下圖片可以啟動遮照，然後大相片（照片）被顯示出來了。 CSS #abgneBlock &#123; width: 520px; height: 273px; overflow: hidden; &#125; &#160; #abgneBlock ul.list &#123; padding: 0; margin: 0; &#160; list-style: none; /*position: absolute; top:422px; float:left;*/ &#160; &#125; #abgneBlock ul.list li &#123; float: left; display:inline; padding:5px 5px 5px 5px ; width:120px; height:81px; &#125; HTML &#60;div id=&#34;abgneBlock&#34;&#62; &#60;ul class=&#34;list&#34;&#62; &#60;li&#62;&#60;a href=&#34;1.jpg&#34;&#62;&#60;img src=&#34;1_s.jpg&#34; [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/878/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[jQuery]照片展示animate左右及上下移動</title>
		<link>http://blog.yslifes.com/archives/863</link>
		<comments>http://blog.yslifes.com/archives/863#comments</comments>
		<pubDate>Thu, 13 Jan 2011 16:17:20 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[程式]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[source]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/863</guid>
		<description><![CDATA[在前一篇[jQuery]利用animate來製作左右移動圖片展示器有利用jQuery來製作Animate效果，來製作左右移動圖片的照片或產品展示器，不過就只能針對同種分類或同性資的照片來做效果，如果有多種分類照片或產品就需要再做一份一樣的內容，這裡提供一個解決的方案，再做一次Animate，不過這次是上下移動來選擇不同列的圖片（照片）資料。 不同分類的圖片，利用不同的ul來分開，然後在ul的前面再加上一個Div來做上下移動的框架，左右移動則是利用ul這個tag，當移動到那一列的框架，把index記錄起來，如此左移及右移按鈕才可針對目前列來做移動。 ul及img都有title這個屬性，所以利用此屬性來當上方分類名稱。 效果截圖如下： 按下左移或右移按鈕，可以使圖片向左或向右移動。 按下上方分頁按鈕，則會上或下移動到該列（分類）。 此時按左移或右移，只會針對此列（分類）來做圖片（照片）的移動。 CSS增加的部份如下： #adbgenMenu &#123; clear: both; height: 20px; width: 100%; &#125; &#160; #adbgenMenu ul &#123; padding: 0; margin: 0; list-style: none; &#125; &#160; #adbgenMenu ul li &#123; float: left; margin-left: 10px; display: inline; cursor: pointer; text-align: center; width: 100px; height: 20px; overflow: hidden; background: url&#40;bg.gif&#41; no-repeat 0 0; &#125; [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/863/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[jQuery]利用animate來製作左右移動圖片展示器</title>
		<link>http://blog.yslifes.com/archives/848</link>
		<comments>http://blog.yslifes.com/archives/848#comments</comments>
		<pubDate>Wed, 12 Jan 2011 15:32:43 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[source]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/848</guid>
		<description><![CDATA[這個範例應該有很多人做過了，十分實用，如果把圖片縮小些，然後再加上燈箱的效果，應該可以拿來當展示產品或是照片等資訊，這個範例的發想是由男丁格爾的範例[jQ]用 jQuery 做廣告 - 上下垂直選項式廣告輪播來做修改的。 jQuery-Animate-API用法animate({css內容},[速度(整數)],[easing(linear/easein)],[callback]) 想法，外層利用一個Div框住要製作動畫的內容，設定css的position: relative;然後內層的資料都用position: absolute;來設定left及top的pixel，如此可以把元件浮在最外層Div框的相對位置。 需要二個按鈕，浮在左邊及右邊，設定動作向左移及向右移。 畫面如下：範例網址 img元件設定title屬性的話，那文字會顯示在圖片下方一條bar上 按左邊按鈕，會向左移動；按右邊按鈕，會向右邊移動 JavaScript部份 jQuery&#40; function&#40;&#41; &#123; &#160; var $block = jQuery&#40;'#abgneBlock'&#41;, $slides = jQuery&#40;'#player ul.list', $block&#41;, _height = $slides.find&#40;'li'&#41;.height&#40;&#41;, _width = $slides .find&#40;'li div'&#41;.width&#40;&#41;, $li = jQuery&#40;'li', $slides&#41;, _animateSpeed = 1000, timer, _speed = 3000; //設定要被移動的Div寬度,每個li的寬度*個數 jQuery&#40;'#abgneBlock #player'&#41;.width&#40;_width * $li.length&#41;; &#160; //如果img元素有設定title,則把title append在圖片上浮著 $li.each&#40; [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/848/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>[jQuery]淡出fade-Out,淡入fade-In及Ajax json資料範例</title>
		<link>http://blog.yslifes.com/archives/844</link>
		<comments>http://blog.yslifes.com/archives/844#comments</comments>
		<pubDate>Mon, 03 Jan 2011 23:30:00 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[教學]]></category>
		<category><![CDATA[程式]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[json]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[source]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/844</guid>
		<description><![CDATA[在使用Ajax功能時，一般規劃大都會是清空原本資料區域，顯示Loading畫面，取得資料及處理，然後把Loading移除後顯示回傳的資料，而以下這個範例會再多二個效果，在清空原本資料區域前先做淡出效果，而在取回資料顯示之前，做淡入的效果。 所以效果顯示的順序會是： 而在資料傳遞方面則使用格式json，在取回json格式的資料後，依json Array使用for迴圈一個個附加append到資料區域裡。 //可以透過.length得知其中的物件數 var NumOfJData = Jdata.length; //把取得的json加上html tag顯示於容器裡 for &#40;var i = 0; i &#60; NumOfJData; i++&#41; &#123; jQuery&#40;&#34;#ajax&#34;&#41;.append&#40;&#34;&#60;div class=\&#34;ajaxRoll\&#34;&#62;&#60;img src=\&#34;images/icon/&#34;+ Jdata&#91;i&#93;&#91;&#34;id&#34;&#93;+&#34;.jpg\&#34; /&#62;&#60;div class=\&#34;title\&#34;&#62;&#34;+Jdata&#91;i&#93;&#91;&#34;title&#34;&#93;+ &#34;&#60;/div&#62;&#60;div class=\&#34;desc\&#34;&#62;&#34;+Jdata&#91;i&#93;&#91;&#34;title&#34;&#93;+&#34;&#60;/div&#62;&#60;/div&#62;&#34;&#41;; &#125; 為了使分頁資訊按鈕顯示在資料區域的右下角，所以在分頁資訊按鈕外層設定css，寬高均為必要元素。 .ajaxagent &#123; width: 616px; height: 550px; position: relative; &#160; &#125; 而裡面一層的Div則使用以下css來使其浮動停靠在所設定的位置，寬高及位置元素都是必要的 .ajaxagent ul.playerControl &#123; position: absolute; bottom: 5px; height: 20px; right: 5px; &#125; jQuery效果淡出Fade-Out及淡入Fade-In函數則可參考jQuery網站的說明文件。 [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/844/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

