Browsing articles in "程式相關"
九月
7
2010

jQuery mobile framework

隨著大家使用智慧型手機的比例越來越高,各種相關的軟體與應用也不斷的開發出來。當大家已經用習慣網頁上使用jQuery開發出來的功能特效與方便性後,就會開始想,那麼在手機上面是不是也可以使用jQuery來達到一樣的目標呢?

為了符合大家的需求,jQuery mobile framework 就誕生了。根據官方網頁jQuery mobile framework支援了iOS, android, BlackBerry, bada, Windows Phone, palm webOS, symbian和 MeeGo

各種平台目前支援的狀況,可以查看官方所製作的這張表Mobile Graded Browser Support,目前看起來各種平台原生瀏覽器的支援程度都還不錯,但是阿維使用的N900,如果沒有升級到MeeGo繼續用原本內建的Maemo,支援程度居然是Low Quality,真的是太悲慘了。

五月
17
2010

目前常用分享按鈕的程式碼

*網址都需要先經過urlencode

1. 分享到Plurk
<a href="http://www.plurk.com/?qualifier=shares&status=網址 (說明文字)">分享到噗浪</a>

2. facebook like (如果不想要提供一堆資訊給facebook,只要很單純的facebook like button,但是facebook超愛用iframe,這樣的寫法,在apple的行動裝置上都會有問題)
<iframe src="http://www.facebook.com/plugins/like.php?href=網址&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

3. facebook like button 進階用法
http://developers.facebook.com/docs/reference/plugins/like

4. 分享到twitter (只是單純的分享,沒有辦法顯示有多少人推)
<a href="http://twitter.com/home?status=標題 網址 via @twitter帳號" title="分享到Twitter" target="_blank">分享到Twitter</a>

5. 分享到twitter (可以顯示有多少人retweet)
請到 http://tweetmeme.com/ 申請一個帳號,然後將code貼上網頁

6. Google Buzz
請到 http://www.google.com/buzz/stuff 拿貼紙,再將code貼上網頁

二月
4
2010

如何不讓flash object顯示在最上層

網頁中加入flash object 例如 youtube embedded 影片雖然可以讓網頁增色不少,但是網頁如果使用類似阿維雜記本最下方的wibiya toolbar相同的特效,也就是在網頁顯示中多加一層div來呈現內容,就會發現flash object會顯示在網頁中最上層。如果使用AJAX整頁鎖定特效,例如像colorbox特效,就會看得更明顯。

[ 範例 ]

1. 我們首先在網頁中加入一個youtube的影片

2. 我們希望當按下連結的時候,會出現下面的畫面

3. 可是事與願違,youtube影片會浮現在最上層擋住我們真正要顯示的內容

這時候我們只需要稍微修改一下flash object就可以達成我們想要的功能了。
如果你所使用的flash object是使用符合W3C XHTML標準的寫法 (請參考讓網頁插入的flash符合W3C XHTML標準),那麼只需要在object 後面加上 <param name="wmode" value="opaque" /> 這段就可以。

如果你所使用的flash object不符合W3C XHTML寫法(目前youtube上面所提供的嵌入語法就是屬於這種),那麼請修改以下兩個部分
1. 在object 後面加上 <param name="wmode" value="opaque" />
2. 在embed 的標籤中加上 wmode="opaque",也就是 <embed wmode="opaque" src=xxxxxxx

透過這樣的修改方法就可以讓flash object不會一直顯示在網頁層次的最上層了。

十二月
30
2009

用jQuery Highlighter做出燈箱效果

jQuery Highlighter可以幫我們很輕易的做出多種酷炫的燈箱效果,不管是用在自己的網站或者是公司的網站上面都會有讓人驚艷的感覺。

主要的特色有
1. 支援鍵盤快速鍵:直接透過鍵盤按鍵就可以切換不同的區塊;
2. 可客製化:我們可以客製化出屬於自己想要的燈箱效果;
3. 自動撥放:支援頁面載入後,直接啟動燈箱效果,不需要透過使用者點選後才啟動。

  jQuery Highlighter 官方網站
  jQuery Hightlighter Demo

十二月
28
2009

讓網頁插入的flash符合W3C XHTML標準

現在的部落格和許多網站都會使用XHTML,但是在網頁中插入flash格式的內容卻往往忽略掉標準XHTML的規範。但是並不是所有的人都了解這個規範是什麼,而提供連結的網站例如youtube.com也沒有顧慮到這點。不過如果你跟我一樣很介意自己的部落格或者是網站要符合W3C XHTML標準的話,可以按照以下的方式來修改。

下面這段是youtube所提供的轉貼原始碼,紅色部分所使用的embed是不符合規範的tag
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/ljZpu-HvKjY&hl=en_US&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/ljZpu-HvKjY&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

如果要符合W3C的規範我們就必須刪掉embed這個區塊,然後在object後面加上
1. type="application/x-shockwave-flash"
2. data="xxxx",這邊的xxx內容就是原本embed src所包含的部分

修改之後會變成像下面這段,這樣的寫法就有符合W3C XHTML的規範,而且flash也可以正常在網頁上面播放。
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/ljZpu-HvKjY&hl=en_US&fs=1&" width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/ljZpu-HvKjY&hl=en_US&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
</object>

不過最好的方法還是原始提供連結的網站就提供符合標準的連結碼,畢竟不是每個人都了解怎麼修改這些鬼東西的。

頁次:«1234567...20»