Selected Category: 札記 (8)

View Mode: Post List Post Summary
好久沒寫jQuery相關文章了,這陣子總算是實際上手使用了。(但是還沒機會實測ajax部份)
這篇大概紀錄一下用到哪些方便的函式。
基於程式功力不高,避免用詞錯誤指導錯誤,所以就寫的比較簡單 囧
有錯誤就煩請各位前輩指正 0rz



準備式
根據經驗,放壓縮版的(也就是還要重新經過瀏覽器將js檔案解譯)的,網頁執行流暢度會受限於CPU,多數都會有稍微頓一下的感覺。
所以google code很好心的提供了讓我們直接取用的jQuery,且可以從google.load("jquery","選擇版本"),一整個佛心來著阿! 經過之前架設網站使用jQuery的動態效果,發現換成下列這種方式載入以後,比原本的載入size小的包裝版順暢很多。

相關詳細連結:The Will Will Web網站部署可考慮使用 Google AJAX Libraries API 載入 JS
----------------------------
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.3");

</script>
----------------------------


起始式
其中$(function(){....}同等於body的onload,也就是一進入網頁執行。
----------------------------
<script type="text/javascript">    
     $(function() {    
         你的程式碼
   });    
</script> 
----------------------------

接下來紀錄一下常用的函式

each()
相關詳細連結:黑暗執行序的作者 的 邊做邊學 jQuery 系列 6-jQuery 網頁元素操控
摘自詳細連結

jQuery.each(array, function() { ... }) ,將 array 的各元素逐一送給 callback 函數處理,函數中以 this 取得陣列元素內容。
jQuery.each(object, function(i, val) { ... }),逐一傳入物件各屬性的名稱 (i) 以及值 (val) 給 callback 函數處理。
(註: each 中 return false 時,後續尚未處理到的其他陣列元素/物件屬性則略過不處理。)


但是我不是拿來撈array跟object,我是拿去撈表格,範例如下
----------------------------
$('#data tr:gt('+ns+')').each(function(i) {
    var indata = $(this).html();
  
        $(indata).each(function(j){
        dataval = $(this).text();
----------------------------
取id為data內的tr標籤,gt就是取第幾筆(ns)以後的所有資料。
而i則是該tr的類似索引。
each就是將function內的i當作索引,會每筆每筆的讀出來,而可以用$(this).html()或$(this).text()讀取後塞到變數內。
而上面例子就是讀取巢狀表格。
是說我不曉得這樣算不算正規讀取法  囧


jQuery.extend
建立自定義函式,要把程式模組化會用到。
----------------------------
jQuery.extend({
fun1: function (i){
 alert(i);

},
fun2: function (){

},
fun3: function (){

},

});

$.fun1('hi'); //呼叫方式
----------------------------


建立物件
避免忘記 囧
----------------------------
var book = new Object;   
book.name = '書名';
----------------------------


讀取陣列資料
我忘記從哪裡看來的,如果找到了再貼回來。
----------------------------
function listMember(main) {
    var s = ""; for( key in main ) // 使用 in 運算子列舉所有成員
    s += key + ": " + main[key] + "n";
    return s;
} ;
----------------------------


變數與文字組合
直接拿自己寫的當示範,這部份就是組合網址。
----------------------------
var image_url='http://static.findbook.tw/image/book/';
image_url += bisbn + '/large'
var book_url='http://findbook.tw/book/';
book_url += bisbn +'/basic';
----------------------------


append
將資料加在其選擇的後方
----------------------------
$('#list').append(bookurl);

----------------------------
上面例子就是在id為list的物件後面加上bookurl的變數資料。


load
load(url,[data],[callback]) 
這功能實在可以說是超棒,但是傳到伺服器上就會有跨網域無法讀取的問題,所以...
好用歸好用,但是不能上傳以後還能直接撈其他網域的資料。
----------------------------
$("#demo").load("book1.html div > table",function(){$.fun1('hi');otherfunction();});

----------------------------
簡單來說,上面那一行意思就是,在id為demo的物件上將book1.html 內的div標籤下的表格資料載入。
而後面的function,其實是因為當載入後面再接其他函式需要為load讀取的資料時,會造成讀不到資料,所以這類需要撈取函式需要下在load後。函式才能夠將讀取的資料讀來運用。

下面這個例子,直接複製貼上到筆記本後存為網頁檔。
----------------------------
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.3");

</script>

<script type="text/javascript">   
     $(function() {   
         $('body').load("http://tw.yahoo.com #news");
        
        
   });   
</script>
----------------------------
將其執行,你就會覺得load簡直就是太棒了,但是.... 上傳到網頁上就不能執行了,因為會出現same-origin policy限制,攸關不同網域的安全性。
儘管如此,光靠這個應該就有人嗅出可以寫出處理自己零散資訊的程式了吧。


如果這個讀取問題可以解決,基本上就能夠以靜態網站模擬成動態網站啦!
或許可以用在單機程式開發上的運用,端看看倌們如何運用啦。


補齊相關jQuery連結:
魚乾的部落格 - jQuery標籤
Web Designer Wall 國外設計師的jQuery教學(英文)
jsGears.com 技術論壇
記載著 Will 在網路世界的學習心得與技術分享 - jQuery標籤
jQuery 1.3 API參考文襠中文版
邊做邊學系列影片 - jQuery



以上
這陣子摸索心得

Posted by ezcshi at 痞客邦 PIXNET Comments(1) Trackback(0) Hits(1497)

最近好忙,幾乎沒什麼時間發文了...
不過這篇主要還是紀錄一下,指令、設定等等的資訊,當然因為是草草紀錄,所以沒辦法那麼詳細,看倌就加減看囉。


因為工作環境有七、八台AP(五層樓),這次全面換新,忙了一整天下來用到的指令、工具就稍微紀錄一下,避免年老(?)忘卻。
硬體部份,我們環境是用Dlink系列,三根天線。
先大推Apple iPod Touch! 真的是好物,因為其靠指頭滑動就能很流暢的操作瀏覽器,設定無線網路進入web端設定只需要帶著它就能到處設定了。

工作環境的這系列路由器reset後,無線網路名稱就變為預設的dlink(不曉得其他廠牌有無此功能)。
以往都是靠筆電配網路線接LAN端,進入預設位置(通常都為192.168.0.1)進入web端設定。
現在只要reset以後,搜尋無線網路,找到該台AP,接著觀看其路由器IP,這ip通常也就是web端設定的位置。
所以只需要連入以後檢查其路由器IP,從瀏覽器進入即可設定囉。


而一般公司環境,有些亦會有IP綁網卡(也就是該IP分配給該網卡mac address),其他人若亂設置IP並無法上網,是一對一的。這種情況怎麼查該AP網卡卡號呢?

進入CMD(命令提示字元) ↓ 下面斷行即是enter。
指令:ipconfig /all
查到
Default Gateway
若為預設的應為192.168.0.1

接著指令 ping 192.168.0.1 (IP請對應上方)
當有資料出來時,點ctrl+c停止指令。

最後指令:arp -a
就能看到該ip的卡號囉。



最後
檢測無法上網的原因
一般會說無法上網,有不少都是因為無法上到奇摩首頁,所以就判定不能上網。
這種情況下,可以進行下列動作

Proxy取消
工具 / 網際網路選項 / 連線 / 區域網路設定
把Proxy伺服器 下面取消勾選


IP檢查是否有設定錯誤
cmd
ipconfig /all
或網路上芳鄰右鍵內容、開始 / 連線到 / 顯示所有連線、右下角圖示內容等。


網路線交叉測試
拿另外一條網路線接上測試是否能連線,偵測是否為線路問題


ping其他網址
cmd
ping tw.yahoo.com

看是否有回傳。(這動作也代表偵測是否僅有瀏覽器無法觀看網頁)
C:\WINDOWS\system32\drivers\etc\hosts ← 類似個人電腦的網址指向,檢查是否有被更動。
以前曾有案例首頁被轉到釣魚網站,但該釣魚伺服器位址被停用了,就變成無法顯示網頁。


tracert 網址
cmd
tracert tw.yahoo.com
檢查是從哪個節點封包就沒有回應。


使用WinsockxpFix教學
這套軟體專門解決被蠕蟲、病毒擅改設定而導致的無法上網問題。


掃毒
也常有因病毒而導致無法上網(可能為windows漏洞,需要自動更新)

大概這幾種方式囉,簡單介紹。


以上,草草紀錄。

Posted by ezcshi at 痞客邦 PIXNET Comments(0) Trackback(0) Hits(164)

ok,這篇單純是因為google下的關鍵字第一篇找不到能夠直接用的,就找自己已經完成可用的方式做個紀錄。
前面幾篇過於冗長,不必要的資料太多了..
基於有點批評,就不說我下了什麼關鍵字了。 (或許是關鍵字下的太精簡?)

照例一行關鍵字:DIV、CSS、z-index、flash、swf、圖層、覆蓋、被蓋住、遮住、absolute

相信網頁設計者會碰到使用flash時,將原本在其上的圖層蓋住,而這篇文章就是講解如何將其恢復到正常的圖層位置。

通常在越上方的圖層會將下方的圖層蓋住。

例如:

<div id="top">我是上方圖層</div>
<div id="banner">我是banner圖層</div>

正常情況下top圖層若使用 position:absolute; ,則在相同位置時,top的資料會蓋住下方的banner圖層。
但flash通常都會浮在最上方,跳脫了原本的層次,所以下面將講解如何處理。

處理方式為將置入的object(物件)標籤 embed加入個參數 wmode="transparent" 即可。
保險的話在加入 <param name="wmode" value="transparent"> ,並在css上方div圖層加入z-index:10,而下方div則加入z-index:1。


看不懂對不對? 沒錯,google第一頁的就是這樣,不清不楚的。
下面例子:(使用meebo的meebo me做示範)
環境解釋:top圖層放圖片、banner圖層放flash檔。


原始:

<div id="top"><img src="logo.png" alt="logo"  href="#"  /></div>
<div id="banner">
  <object width="190" height="275" >
    <param name="movie" value="http://widget.meebo.com/mm.swf?"/>
    <embed src="http://widget.meebo.com/mm.swf?" type="application/x-shockwave-flash" width="190" height="275"></embed>
  </object>
</div>


增加部份:(使用粗體橘字)

<div id="top"><img src="logo.png" alt="logo"  href="#"  /></div>

<div id="banner">

  <object width="190" height="275" >

    <param name="movie" value="http://widget.meebo.com/mm.swf?"/>
    <param name="wmode" value="transparent">

    <embed  wmode="transparent"  src="http://widget.meebo.com/mm.swf?"
type="application/x-shockwave-flash" width="190"
height="275"></embed>

  </object>

</div>


------------手工分隔線-------------

簡單來說只需要在 object 標籤內加入 <param name="wmode" value="transparent">
並在embed標籤內,認src參數,在其加入 wmode="transparent" 即可。

而加入後也會有flash背景透明的效果。


css部份的話,可以用此方式:(也是用上方的top跟banner例子來舉例。)

連結/匯入方式

#top {
position:absolute;
z-index:10;
}

#banner{
position:absolute;
z-index:1;
}

z-index上只要數字越大,圖層將會在越上面。下方的圖層則會被上方的遮住(若為同一位置的話)。



HTML內方式

<div id="top" style="position:absolute; z-index:10;" ><img src="logo.png" alt="logo"  href="#"  /></div>
<div id="banner" style="position:absolute; z-index:1;" > .... 後面省略


------------------------------------
後記:

因為meebo me widget的標題不能使用中文,本來打算使用gif檔用圖層方式覆蓋,但若使用了 wmode="transparent" ,則無法輸入中文,所以只能作罷。

以上
因為google第一頁沒辦法直接處理所以發文 XD


Posted by ezcshi at 痞客邦 PIXNET Comments(4) Trackback(0) Hits(1484)

嗯,照例來一行關鍵字:Drupal 6.4 升級 6.5 方法 步驟紀錄。
因為確定使用Drupal時,決定選用6.4版,畢竟號稱6多了很多功能,5、6比較以後,發現6多了頗多人性化的功能,於是就這麼定案了。

想不到就這麼磨了幾個禮拜以後,正式上線沒多久6.5版就出現了,網路上稍微看了幾篇升級的文章,發現升級比Joomla麻煩一點,但6.4到6.5並不會有太多危險。
畢竟Drupal本身功能就很強,所用模組幾乎都可以沿用(版本數字同樣的幾乎能通吃),這邊稍微紀錄一下整個流程。

基於版本只是此時此刻的版本,爾後會碰到更高階的升級,這邊就不放置各版本的載點了,有需要的請自行google囉。
環境是windows,linux系統不熟,所以不保證能通用。

檔案都下載完畢以後,先發公告告知網站將升級,接著將伺服器服務先關閉(避免出錯)。
接下來就照著步驟開始備份。



步驟1:備份資料庫、檔案
查到有個良好的備份方式,簡述如下:
因為Drupal有各版本的差別,可以將現任的版本資料夾名稱為:Drupal,其他版本,如現在將升級的6.4資料夾,改為Drupal6.4,再將6.5的檔案解壓縮至現任 Drupal 中,這樣可避免檔案流失,也可隨時比對。

資料庫也是同樣道理,但方式不一樣。
這邊作法為新建立一資料庫(名稱可跟版本相關連,爾後好區分),再將舊的資料庫資料匯入進去新的資料庫。

主要需要備份的有:

 

  • Drupal資料夾內自行新增的資料夾
  • .themes資料夾(版型)
  • .sites\default內的資料(default.settings、settings.php例外,詳後敘)
  • .modules內自行下載的模組。


為了避免搞混,這邊重新講解一下資料夾配置:
Drupal : 新版本的Drupal檔案解壓縮處。
Drupal6.4 : 原上線(現役)網站資料夾。

以後若再升級,就將Drupal資料夾改為Drupal6.5,新版上線的為Drupal
照此方式將會較為容易比對升級及管理。



步驟2:檢查增加過的模組
可從下方位置去檢查曾經安裝過什麼模組
?q=admin/reports/updates ← 也就是 管理 / 可用的更新
裡面會列表出之前曾經安裝過什麼模組。這邊建議可以稍微紀錄一下,方便等一下將模組複製過去。

(Drupal安裝模組方式為:下載模組後解壓縮至 Drupal目錄\modules 內。)
現在將原安裝模組資料夾(此範例中的Drupal6.4資料夾) 複製到 現任Drupal資料夾的modules內。



步驟3:將新網站配置重新設定
因為在步驟1將根目錄及資料庫都修改了,當然要重新設定網站設定檔。

進入Drupal6.4(此為範例)\sites\default 資料夾內
file資料夾settings.php 複製到 現任Drupal資料夾的相同位置(也就是Drupal\sites\default)。
(目前裝的模組並不多,還得將因模組所新增出的檔案及資料一併複製到現任Drupal資料夾相同位置。)

開啟 settings.php 檔案。
約在92行處
$db_url = 'mysqli://帳號:密碼@localhost/資料庫名稱';
將後方資料庫名稱換為剛剛步驟一新增的資料庫名稱。(即有匯入舊資料的資料庫)
存檔。



步驟4:開始升級
首先先進去網站(指向Drupal資料夾),因為資料庫是連入新的,資料夾也指向Drupal,若有問題可以隨時恢復。
接著以一開始最高權限的管理者登入,確定可以登入以後,執行 update.php (在durpal根目錄)。
若照一開始的設定,位置應為 http://localhost/drupal/update.php 。
讓它跑完以後就完成升級囉。



後續檢查及處理

  • .檢查模組部份是否有啟動
  • .是否附加檔案連結指向正確
  • .原相對網址是否有掉
  • .版型是否正常,有沒有掉圖掉檔


最後回到 管理 / 報告 / 可用的更新  (也就是 ?q=admin/reports/updates )
看是否都為綠色,若是,恭喜你完成此次的更新囉。


目前所用模組不多,不確定是否有更多需要注意的地方。
此篇為升級以後所認為要注意及紀錄的事項,若有錯誤也懇請寄信或留言告知,謝謝。


※想不到今天就出了6.6更新版(10/23),使用同樣方式更新即可。
可參考台灣Drupal 如何在子版間升級 這篇文章。

以上 durpal升級紀錄

Posted by ezcshi at 痞客邦 PIXNET Comments(1) Trackback(0) Hits(573)

這篇就不太像教學文或紀錄文,比較類似的是自己的solution,以及how的思考方向。
有時候這類型思考模式的紀錄,反而容易點醒人,也容易讓概念更為清楚。

所以就決定紀錄一下 XDD


Drupal 這次對我而言,是一個強制、強迫性的推力,而非發自內心的學習 (其實是一半一半啦)
上司要求新的網頁要用 list 的方式呈現舊有網頁服務的選項,點開more會跳到一整頁的該類別服務的總覽。
所以藉由這次的課題當推力,強迫自己研究drupal。

好了,廢話結束。



要達到首頁眾多服務分別list出來幾個常用服務,再放 more 可供點開,是蠻常見的入口網站模式。
雖然 Joomla 要達到此種顯現方式對我而言算很容易,畢竟熟悉了。

這邊稍微帶一下Joomla 的 solution :  (以下都是用Joomla的名詞,不能與Drupal並論)
Joomla選單跟模組其實算是頗為類似的,數量少的直接開一個選單,從模組處設定於自定義的佈景主題。
數量多的,需要放More的,從模組處自定義新的頁面,但這邊是只能做死的。

最後區塊可以從模組處設定位於佈景主題的位置,more則是新開靜態網頁,也是做死的。
這樣可以達到要求,再來運用佈景主題設定,自己定義的分類內使用非預設的佈景主題,達到點開的頁面是自己重新設計的主題。




Drupal 部份,一開始想了很多解法,但是最後都無解 0rz
原本想到一個以為可行的,但後來完全不知道怎麼修改...
cck 可以定義 url ,於是想說發文標題 = url ,想說能夠從views的php面硬改,但是view上放的都只是參數...不能將標題轉成url。
(這邊是我自己思考的方式,或許可行但自身能力不到,無法達成)
這邊本來是認為最容易成功的方式,最後宣告失敗。

也試著想辦法從選單處,放入自定義more,但是也是失敗 (汗

最後也是回歸到原始面,使用block做死的。
但是這邊做死以後,文章類別的怎麼設置,以及該怎麼歸類單一介紹頁面的網頁,又是需要整體考量的。

目前此部份仍在測試實行中,是否成功還很難說。
畢竟尚未瞭解其樣板怎麼處理,怎麼插入並達到單一頁面一種顯示介面。


後續在陸續將心得放上
以上

Posted by ezcshi at 痞客邦 PIXNET Comments(0) Trackback(0) Hits(215)

jQuery自己摸索一小段時間,這篇文章是邊看書邊整理出來的筆記。
習慣先用紙筆記下來,再慢慢整理到電腦上,不過這次這個則是邊看邊記到部落格。
因為只是自個兒的學習筆記,若看官看不懂的話也只能請你google爬文或留言提問囉。


這邊小小吐個槽,這本:網頁設計.愛上jQuery
目前為止,前面文章用的例子的命名方式很不恰當,若是只熟悉js,不熟css的人會被這些樣式及id命名搞混...

最後紀錄日期:97/9/2



啟始式:
#(documnet).ready(function() {

你的程式

});  
--------------------------

你的程式

$("選取物") .觸發或動作('   ');

$("選取物") .觸發(function(){
子程式
}); 

$("選取物") .觸發1("  ").觸發2("  ");
↑ jQuery可以連續觸發,也就是連續動作這樣。

 

選取器

$("選取物") . 觸發動作(或.執行動作)

父    子 →  只要符合這種階層的父子。
父 + 子 →  這個交叉測試以後反而亂掉了,抓不出到底能選取到哪。
父 ~ 子 → 父標籤結束後的所有碰到的子標籤。
選取物:first → 抓第一個物件
選取物:last → 抓最後一個物件
選取物:not( 另一條件 ) → 除了目標以外

選取物:even → 偶數、選取物:odd → 奇數

選取物:eq( n ) → 第n個物件
選取物:gt( n ) → 大於n的物件
選取物:lt( n ) → 小於n的物件


暫時紀錄到這,持續學習中

Posted by ezcshi at 痞客邦 PIXNET Comments(3) Trackback(0) Hits(427)

以前就大約知道jQuery這名詞,可是也沒刻意的想學,只是看過就這樣罷了。

所謂事出必有因,何來因呢?

有款web game:travian,從網路上找到了firefox的套件greasemonkey,可以藉著這套件增加本來沒有的功能,用的就是js腳本。
包括travian也在內,有輔助性的腳本。但想拆開來分析的是類似筆記本的功能,可以在上面紀錄文字資料,也可以放連結,雖然只有ff能用,但若是在需要蒐集資料的頁面,可以省下不少切換的時間,於是有了想拆開學習Javascript的動機(或許裡面不是這樣如此簡單,但是卻構成了動機)。

開始看內部的js碼以後,因為並不常運用,於是很多函式都看不懂。不懂當然是請出google囉 =v=
找了google的資料以後,碰巧發現了jQuery的教學網站。哎呀,不看還好,一看簡直是驚為天人(汗,說不定只是我孤陋寡聞罷了),其中的選擇器使用方式,簡直就是跟css使用概念相似(css是分離html跟樣式,而jQuery則是分離js跟html),又可以用過濾、排序的方式選擇,當下就決定把這使用技巧學起來。

目前只是初步看過,覺得實用性很高,但我這個人常常有三分鍾熱度(汗,所以持續度不曉得有多久啊..
另外一個Prototype則要比較後再決定哪個適用吧,目前就覺得jQuery很想先學起來,起碼達到懂得運用為止。

最後,下面附上幾個找到的資訊

幾個連結:
jQuery官方
jQuery中文入門教程_譯自Getting Started with jQuery
jQuery中文社區

※最近新的教學文章:出自jsGears.com這篇文章


JavaScript Framework (jQuery)
JavaScript的世界從來沒有像現在這樣精彩

偏向動態效果
moo.fx

Posted by lanc at 痞客邦 PIXNET Comments(0) Trackback(0) Hits(318)

近期將會運用Drop.io功能,將一些軟體(free、綠色、套裝、共享軟體),放置到網站。
這邊作一下歸類:
命名規則
http://drop.io/ez軟體類型編號
基於每個空間容量只有100mb,大型軟體可能就要吃掉頗多,所以還會使用編號。
基本上空間都不設密,是希望能夠方便取用。速度是慢了點,但是可以用續傳軟體,想必這點就造福不少人群了吧。

理論上大多都會放free版軟體,只有少數實用軟體才會放置 套裝版 試用版,那也希望好用之餘,不忘給開發者一點回饋(推薦給其他人啦,買其相關軟體或產品啦等等)。

在文章分類處大夥兒也看到有個綠色軟體區,大多數綠色版都是free版去轉來的,少數是由套裝軟體所轉來,本來就不是合法的,套裝正版去轉更是 好用中的好用 不合法中的不合法,那也希望使用者能
買原套裝版使用,使用綠色版才會心安理得些 囧":。

看似責任聲明基於仍有些許的 套裝 試用軟體,希望試用24小時候能將其 永久搜藏 刪除並購買正版軟體來使用 。

Posted by lanc at 痞客邦 PIXNET Comments(0) Trackback(0) Hits(57)