家的大小事 一輩子都是特力的事

分類: 工作雜談 作者: abu

25 2 月 2010

Trihome 是個以靜態頁面為主的網站,需要管理介面的功能也是少之又少。

在和Neo討論之後,想試試看"內嵌前台"方式來製作這次的管理介面,一開始思索了一下,首先是"如何進入管理模式",一般正常的方式,不外乎就是進到一個有帳號&密碼欄位的畫面,輸入帳密之後,導向進管理後台,而這次想挑戰的內嵌式,當然要嚐試看看新鮮的寫法,相信有玩過魂斗羅的骨灰級玩家都知道,只要在一開始遊戲畫面中輸入上、上、下、下、左、右、左、右、B、A、B、A,,就可以得到30隻,對於想破關的朋友,莫不是一大福音,根據這樣的"取得隻數"的方式,"取得權限"亦可如法炮制,於是就出現了,魂斗羅內嵌Trihome的想法,在網站的任意位置,只要管理者突然有想進入管理介面的衝動,只要輸入密碼按下Enter,就可以神不知鬼不覺的偷偷進入管理介面,以下即為進入管理介面之後的畫面:

眼尖的朋友應該注意到了,在畫面上有隱約透露出神秘綠光的區塊,這部份是提示管理者,目前頁面上"即將被編輯的區域",而點擊右上的綠勾,就可以進入真正的編輯區塊了,如下圖:

在編輯區塊內全部採取ajax即時更新資訊方式,讓管理者更能直覺的輸入修改資料。

在一開始構思的時候,本來預定是要真的在網頁上,即時編輯所有內容,不過第一頁就遇到問題了,在首頁的Banner,一次需要上多張Banner,系統判斷上下檔期後,要自動替換,那要可以即時編輯的話,難道要把全部已經上傳的圖都秀出來,版面應該會破的亂七八糟吧,所以才借助了blockUI,把需要編輯的部份通通丟在裡面,以不破壞原始版面為主;在這次撰寫過程,遇到很多問題需要解決,也連帶吸收了不少EXP,整個管理的方式進步空間還很大,不過算是處女作就....勉強算ok,未來有機會的話,可以再嚐試看看不同的方式,朝更人性、更直覺的設計介面前進吧~

2 Responses to 家的大小事 一輩子都是特力的事

Avatar

ㄚ凱

2 月 25th, 2010 at 6:01 下午

這種作法很有趣.. 🙂 ...

之前也有作過類似的..不過不是直接遷前台...

一樣是在後台不過會顯示一個前台的介面...然後多了可以上傳或是修改的 div ...

Avatar

daniel

2 月 26th, 2010 at 11:03 上午

科樂美秘技超威的啊!(http://2i0f.sl.pt)
醬修改好方便,超直覺的耶~^^

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。