弱格吉米言

發表文章

目前顯示的是有「jQuery」標籤的文章

[Blogger] 再來試試另一套燈箱．Zoombox on Blogger

2月 04, 2012

嗯，去年底其實 Blogger 開始提供內建的燈箱效果，但好像有一些問題，有人在官方還沒提供設定開啟關閉的功能之前就寫了一篇：如何關閉燈箱效果的教學文章，後來 Blogger 後台也提供了設定關閉的選項：在設定-->文章和留言裡，在燈箱中展示圖片，可以選擇是否啟用。一般如果是使用 Picasa 做為圖床的話，用 Blogger 內建的燈箱也就可以了，只要你看習慣 Google Plus 的燈箱，那個效果是相同的，當這篇文章有多張圖片時，燈箱底下會有一排縮圖可以點選。但如果不是用 Picasa 做為圖床的話，像我是用 Flickr，實際測試的結果，用來貼在文章裡的小圖必需至少是大尺寸，中型尺寸燈箱就跑不出來，後來我就關掉內建的燈箱效果，還是繼續使用 Colorbox。最近在找燈箱效果的時候，有找到一套 Zoombox，也是使用 jQuery 的燈箱，這套跟 Blogger 內建的燈箱效果一樣，多圖群組時可以在底下顯示一排縮圖可以讓你點選。寫一下怎麼裝：一、首先你也是得先下載 Zoombox，解壓放置到你的網路空間上。請至官網下載： http://www.grafikart.fr/zoombox ，目前最新版本是 2.0.16。二、在 <head></head> 之間，先 include jQuery 和 zoombox 的 js 與 css <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" src=" http://your.url /zoombox/zoombox.js"></script> <link href=" http://your.url /zoombox/zoombox.css" rel="stylesheet" type="text/css" media="...

閱讀完整內容

Joomla 使用 jQuery 的推薦外掛 SC jQuery

11月 19, 2011

最近因為新工作的關係才開始用 Joomla，我一直以為提供 jQuery 是很常見的，Drupal 就是用 jQuery，偏偏 Joomla 這個 J 開頭的玩意兒，用的是 mootools，手邊 jQuery 的資料比較豐富，也熟一點，所以不管如何都想要把 jQuery 裝上 Joomla，當然語法上是一定要用 jQuery.noConflict() 來處理是不用多談，剛好今年年初在改版弱格的時候有查過資料，所以剩下的問題只有把 jQuery.js 給引進來。一開始是有想過直接在要寫的 Module 前面加，我看一些抓來的有用到 jQuery 的 Module 都是這樣寫，有些甚至沒寫可以讓你選擇關閉的選項，我都要再去刪掉 default.php 裡的 jQuery，反正找到後來覺得最好的是 SC jQuery 這個 Plugin，這是一支放在 system 的 plugin，可以設定你要使用的 jQuery 版本，包括 ui 都可以，是使用放置在 Google CDN Host 的 jQuery，設定啟用之後就會引入 jQuery，並加入一行 jQuery.noConflict()，還可以設定哪些 item 不需引入 jQuery，反正還蠻夠用的。所以我就可以把一些 Module 有單獨再引入 jQuery 的給改掉了，順手又包了一個 jQuery Validation Plugin 的 Joomla Module，是包 1.9.0 版，試了一下，並看了一個討論串是說 1.9.0 版用 jQuery 1.6 的支援比較好 (實測是用在 Chrome 上比較沒問題) 我包的這個 Joomla Module 並沒有寫完，參數的部份目前只有兩個，message 的語系我只做了繁中和簡中而已，一個是要填 <form> 的 id，至於 jQuery Validation Plugin 怎麼用就請看文件，或者下載 jQuery Validation Plugin 裡面就有 demo 可以看。我是為了工作順手包的，順便知道一下 Module 怎麼寫，如果有需要可以自取，我自己拿另一個空的站測試過是可以成功安裝。

閱讀完整內容

jQuery-Validation-Engine 搭配 jQuery-ui DatePicker 出錯之解法

5月 06, 2011

最近在寫一些東西，用了 jQuery-Validation-Engine 和 jQuery-ui DatePicker 在寫表單，使用 jQuery-ui DatePicker 做日期選擇時會發生驗證出錯的狀況，在 jQuery-Validation-Engine 的專案頁面查了一下，發現作者已經列為待修正的 Bug。參考了國外論壇，加了一段 Code 暫時解決這個問題，當然也希望作者快快更新囉。 /* 解決 datepicker and formvalidationengine 出錯的 code START*/ jQuery("#myform").validationEngine('validateField', "#startdate"); jQuery("#myform").validationEngine('validateField', "#enddate"); jQuery('#startdate').blur( function() { jQuery("#myform").validationEngine('validateField', "#startdate"); }); jQuery('#enddate').blur( function() { jQuery("#myform").validationEngine('validateField', "#enddate"); }); /* 解決 datepicker and formvalidationengine 出錯的 code END*/ 我打包了一個範例，載點： jquery_formvalidation_datepicker.rar 。附上這兩個好用工具庫的網址》 jQuery-Validation-Engine： https://github.com/posabsolute/j...

閱讀完整內容

[Blogger Addon and Fix] PremiumBloggerTemplates 版型縮圖功能小修正

4月 20, 2011

近期我使用了很多從 PremiumBloggerTemplates 網站分享的 Blogger 版型，該網站分享的版型有幾個特點：輪播的特色文章、首頁文章縮圖、DropDown menu，其中首頁文章縮圖原來的程式是設定固定的縮圖大小，除了長形的圖比例會改變以外，有些時候文章裡的圖還比設定的縮圖大小還小時，就會變成放大模糊的圖，最近用 jQuery 加了一段小程式在底下去做判斷，當文章的圖比較小時，那就維持原來的圖的大小顯示。做法：首先，PBTemplates 用來產生首頁文章版面的程式：這裡改的地方，除了只依照設定的寬去改變縮圖的大小 (拿掉了 height=”’+img_thumb_height+’px”) 以外，粉紅字的部份是我加進去的，用來給我寫的小程式處理用的 function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img id="tnimg" src="'+img[0].src+'" width="'+img_thumb_width+'px"/></span>'; summ = summary_i...

閱讀完整內容

行動版 Google 新聞閱讀器．利用 jQuery Mobile 及 SimpleHtmlDom 撰寫

3月 28, 2011

手邊還沒有觸控的行動裝置可以測試，目前只有用 PC Browser 測過 (Chrome 正常，但 IE 8 和 Firefox 4 都怪怪的)，可能真的要去借 iPhone 或 Android 手機來玩才知道，上圖是用 TestiPhone 跑的畫面。之前利用 SimpleHtmlDom 寫了一個去抓 Google News 頁面的東西，那時候也順便想要做成行動裝置用的網頁，最近又發現了 jQuery Mobile ，所以今天就利用 jQuery Mobile 把之前寫的東西改了介面。之所以會用 SimpleHtmlDom 直接去 Parse Google News 的網站而不是抓 Google News 網站的 RSS，是因為好像在相關新聞的連結那裡是動態產生，抓 RSS 好像會有時間差，有時候相關新聞的頁面就被移除了，只好直接去 Parse Google News 的頁面，不曉得有沒有更好的作法就是了。誠徵有可上網行動裝置的朋友玩玩，iPhone、iPad、Android 都來玩看看厚。網址：行動版 Google 新聞閱讀器。既然是行動版，也附個 QR-Code 好了：範例程式》因為有朋友需要 SimpleHtmlDom 的範例，我來貼一下抓 Google News 分類的那一段語法供大家參考，我都是亂寫的， SimpleHtmlDom 那裡的範例蠻清楚的，也可以多去參考。 <?php include_once('simplehtmldom/simple_html_dom.php'); $url = "http://news.google.com/news?pz=1&ned=tw"; // Create DOM from URL $html = file_get_html($url); ?> <ul> <?php foreach($html->find("div[id=left-nav-sections]") as $cat) { foreach($cat->find(...

閱讀完整內容

拍板！弱格 2011

2月 09, 2011

好啦，就決定用這個版型吧！過程中，Fancybox 的問題一直搞不定，就算是只使用 jQuery 不用 mootools 也是一樣，看來似乎還是跟其他的 jQuery Plugin 沖了 (可能是 cycle 或 superfish menu)，所以改用 colorbox 這個輕量化的燈箱。一些會拖慢速度的統計小貼紙都拿掉了， Webwait.com 測出了讓人很滿意的數字：2.14s，至少希望進入首頁能壓在 5 秒以內的目標達成。另外要介紹的是一個新發現的 Blogger 版型站台： Premium Blogger Themes ，有需要的可以自行上去挖寶。

閱讀完整內容

弱格改版型計劃．兼聊 mootools 及 jquery 並存之道

1月 31, 2011

計劃過完年後換新的版型，目前暫時將新的版型架在弱格貝塔，請大家給點意見。可能會把分類整理一下，一些雜亂的小東西能不裝的可能就不裝了，新年總要有個新氣象的，換新換新嘛。因為新的版型有用到 mootools，稍微搜尋了一下 mootools 和 jQuery 共存的方法： <script src="Mootools.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); jQuery(document).ready(function($){ ...... }); // Use Prototype with $(...) $('someid').style.display = 'none'; </script> 總之就是用 jQuery.noConflict() ，然後使用標準語法去寫 jQuery 的 Code，以區別 mootools 的 Code，這樣就可以和平共存了！後記：事實上也只能解決一半，猜是 Smoothgallery 和 Fancybox 的 Code 還是有衝，只能讓 Fancybox 的單張圖片做燈箱特效，但 Gallery 顯示就沒輒了，努力研究當中。再後記：後來燈箱是改用 colorbox，輪播改用了 nivoSlider 。

閱讀完整內容

[Blogger] 利用 jQuery 來製作 Tab 選單 (參考自男丁格爾)

6月 02, 2010

參考自男丁格爾大大的文章： http://abgne.tw/jquery/apply-jquery/jquery-web-tabs.html 男丁格爾大大的教學寫得十分詳盡，也可以至男丁格爾大大的文章去看看囉。我是把這個東西放在一個在 Blog 文章底下另外加上的 section，必須進入文章 (Pagetype = item) 才會顯示 (利用 <b:if> )，然後讓裡頭的 widget 利用 jQuery，使得整個版面不會一直拉長，並且提供 TAB 頁籤來做切換。

閱讀完整內容

[Blogger] 利用 jQuery Toggle 調整版面元素的顯示與隱藏

6月 02, 2010

最近才開始認真學 jQuery，目前為止還是只能說懂個皮毛而已，這次利用 toogle() 和 slidetoggle() 讓版面做一些動態調整的設計。我的版面中央內容區塊如上圖所示：上方的 Content-wrapper 裡頭包了 Main-wrapper 和 Sidebar-wrapper，底下的 Bottombar-wrapper 是我後來修改了原始版型，加上一大塊的 Bottombar-wrapper，拿來放一大堆 Widget 用的。

閱讀完整內容

免費下載將近 80 種 jQuery Menu 範例，Apycom

5月 28, 2010

昨天把 ZOG 的 Menu 做了一些改變，原本的 menu 塞了一個 Label Gadgat 進去，在上方加了一個下拉式的 Menu。採用的是 Apycom 的 jQuery Drop Down Menu ，可以免費下載，條件是不得用於商業網站以及要加上 http://apycom.com 的連結。大致上用到的效果是兩個 jQuery 的 plugins：lavalamp 和 easing，都已經包在下載下來的 menu.js 裡，也有範例的檔案，應該是很容易學習的，你也可以修改 css 成你要的樣式。不過 lavalamp 跟 fancybox 會沖，所以我在 ZOG 是選擇沒用到 lavalamp 的 menu。至於 back link，你可以加在任何一個地方，然後用 CSS 藏起來。 <span style='display: none;'><a href='http://apycom.com/' target='_blank'>Apycom jQuery Menus</a></span>

閱讀完整內容

[Blogger] 來裝個燈箱吧！Install Fancybox on Blogger

5月 10, 2010

這幾天大概試用了幾套 lightbox like 的燈箱效果，最後我選用的是 fancybox 。除了 fancybox 外，也試了 Shadowbox 及 Colorbox 這兩套，其中，Colorbox 跟 fancybox 蠻相似的，除了比 fancybox 更輕量以外 (不到 9KB)，也有提供五個樣式的 css 範例供你下載套用，但比 fancybox 少了直接展示 swf 的功能，不過還是可以用別的方法展示 Youtube 或 Vimeo 的影片。 Fancybox Colorbox Shadowbox jquery.fancybox-1.3.1.pack.js 14.3KB jquery.colorbox-min.js 8.59KB shadowbox.js (全功能支援的版本) 63.5KB

閱讀完整內容

[Blogger] 好東西，NS 的 Blogger hack: AJAX LOADING 動態文章！

5月 03, 2010

參考了 NightSpirit 的網誌，除了安裝了 LazyLoad 以外，在 Photography．JimmyYen 也裝上了 NS 的 Blogger hack: AJAX LOADING 動態文章。(ZOG 也裝好了) 安裝的位置是在點選「較舊文章」和「較新文章」以及文章底下的 TAG 連結時，會使用 Ajax 動態載入資料，節省網頁重載的時間，因為整體速度提升太多了，特此跟大家介紹。 NS 的網誌還有很多好東西，值得定期收看！

閱讀完整內容