[PHP] 取得現在網址及其參數

以 http://www.gocar.idv.tw/phpbb3/viewforum.php?f=1 網址為例

1
2
3
4
5
$_SERVER['HTTP_HOST'] : www.gocar.idv.tw
$_SERVER['REQUEST_URI'] :/phpbb3/viewforum.php?f=1
$_SERVER['PHP_SELF'] : /phpbb3/viewforum.php
$_SERVER[QUERY_STRING] : f=1
$_REQUEST['f']1 或是更準確的 $_GET['f']

如果今天有個連結是
http://xxxxxx.xxx.xxx/1.php?asdfasdfa=a333322222&cde=TEST
那麼

1
$temparray=explode("=",$_SERVER[QUERY_STRING]);

如果只有一個input name,用等號切開就好..

1
$temparray=explode("=",$_SERVER[QUERY_STRING]);

$temparray[0]就是input name
$temparray[1]就是input name的值

jQuery mobile 在頁面的大小控制:viewport

同一網站在UIWebview的時候
原本瀏覽頁面是page縮小情況,看文字需要手動放大,此時若加註這一行,在讀取完頁面後就能呈現舒適的閱讀大小。
 

以下摘自網友:
http://hsinyu00.wordpress.com/2011/04/05/mobile-web-viewport/ 
———————————-
———————————- 
———————————- 

<h2 style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:1em;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Georgia, Verdana, Arial, serif;font-size:1.4em;letter-spacing:1px;font-weight:normal;">Mobile Web 前端技術筆記(一): Viewport的設定</h2>

<h1 style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Georgia, Verdana, Arial, serif;">Viewport的設定</h1><h2 style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:1em;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Georgia, Verdana, Arial, serif;font-size:1.4em;letter-spacing:1px;font-weight:normal;">《基礎》</h2>

viewport的作用是告訴瀏覽器,目前裝置有多寬(或多高),以便在縮放時有個基準。尤其當設定頁面寬度需自動調整時,如寬度100%或螢幕由垂直轉為水平,viewport大小是一個根據。

<h2 style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:1em;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Georgia, Verdana, Arial, serif;font-size:1.4em;letter-spacing:1px;font-weight:normal;">《用法》</h2>

(這個例子中的maximum-scale也設為1,其實就是不讓使用者縮放,以維持頁面的設計,行動裝置專用的網頁常有必要這樣做。)

<h2 style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:1em;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Georgia, Verdana, Arial, serif;font-size:1.4em;letter-spacing:1px;font-weight:normal;">《屬性和值》</h2>

根據W3C草案,在meta tag中viewport有以下屬性可設定

  • width:[數字] 或 device-width
  • height:[數字] 或 device-height
  • initial-scale:最小0.25,最大5
  • minimum-scale:最小0.25,最大5
  • maximum-scale:最小0.25,最大5
  • user-scalable:1 或 0 (yes 或 no)

雖然是W3C文件,但還在草案(Editor’s Draft)階段,尚未標準化,iOS上的Safari最先實作這些屬性,所以比較完整,表現也比較穩定;其他瀏覽器不見得能解譯,但新版的Opera, Android, Fennec(Mobile Firefox)應該是可以實現其中幾項屬性的。但Opera Moblie 9.5中minimum-scale/maximum-scale、user-scalable的功能是不作用,因為Opera當時認為自家的Zoom功能是必要的。

width通常設為device-width,用意是適應各家裝置的大小,這樣寫CSS時就能放心的把版面寬度設為100%(雖然還有一個box model的問題,容後再述)。

user-scalable的實際行為就等於zoom,zoom=1可以配合行動版專用網頁的設定,剛剛好填滿畫面,不過桌機版網頁超出畫面是必然的。

<h2 style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:1em;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Georgia, Verdana, Arial, serif;font-size:1.4em;letter-spacing:1px;font-weight:normal;">《備註》</h2>

螢幕解析度不一定等於device-width,
Nexus One 是螢幕解析度(800)不等於device-width(320)的典型例子,
iPhone 4 亦同 – 螢幕解析度(960),但device-width回報為(320)。
新出的手機傾向採用高畫素的面板,如果照實體螢幕解析度作為device-width,有可能進入大部分網站時都看到縮小的畫面,這是使用方便上的一個考量。

<h2 style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:1em;margin-right:0px;margin-bottom:0px;margin-left:0px;font-family:Georgia, Verdana, Arial, serif;font-size:1.4em;letter-spacing:1px;font-weight:normal;">《資料來源》</h2>

  1. W3C文件 http://dev.w3.org/csswg/css-device-adapt/
  2. device-width的解說
    http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
  3. Pou’s IT Life
    http://www.dotblogs.com.tw/pou/archive/2010/09/26/17890.aspx
———————————- ———————————-  ———————————-  

JQ改變錨點字體的顏色

改變錨點的CSS
——————————–

網址:http://XXX.tw/#list_here

 JQuery:

//例如改變錨點顏色 
 

function anchor_css(css){
    var hh = location.hash.split("#"); //返回切割後的陣列
    $(function(){
$("#"+hh[1]).css(css);
})
    }

anchor_css({"color":"red","font-weight":"600"});
html:<td id="list_here" >
 

jQuery .delegate() vs .live()

<h1 style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:1em;margin-left:0px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:1.6em;font-weight:400;line-height:normal;">jQuery .delegate() vs .live()</h1>

.live().delegate()都是藉重DOM事件會由子元素一路向父元素Bubble Up的特性,在document或特定元素統一掛上事件函數,事件被觸發時再透過選擇器比對事件目標元素是否吻合,決定要不要執行事件邏輯,藉此提升效率,同時還能將"未來才會建立的元素"也納入事件的涵蓋範圍。(細節可參考舊文)

不過,.live()與.delegate()做的事幾乎一模一樣,依江湖上的說法,1.4版推出的.delegate()又比1.3版誕生的.live()來得有效率,理由何在?

以對<table id="t">下所有<td>加掛click事件為例,多半會寫成: 
$("#t td").live("click", fn); 或 $("#t").delegate("td", "click", fn);

當執行$("#t td").live(),jQuery會監聽document的click事件,再依event.target是否吻合選擇器"#t td"決定live()所指定的click事件要不要被觸發;若使用$("#t").delegate(),jQuery監聽click事件的對象則會由document換成<table id="t">,但也一樣是比對event.target是否為td決定要不要觸發事件。二者相比,將監聽對象由document縮小到table對效能有利! 因為$("#t td").live()會過濾比對document上所有子元素產生的click事件,而$("#t").delegate("td"…)只有在table內子元素被click時才進行比對過濾,避免了非目標區元素被click時的多餘過濾流程。不過,這部分的效能損耗其實可以避免,只要改寫成$("td", document.getElementById("t")),則.live()的監聽對象就會被縮小到table而非document,此一差異性就消失了。但是,真要比效能,.live()還是難逃敗陣的命運! 為什麼?

對.live()或.delegate()來說,"td"是未來click事件觸發時比對event.target用的選擇器,理論上保留字串就夠了。當寫成$("td", document.getElementById("t")),jQuery會找尋當下所有符合的td元素,建出jQuery集合物件,但這個耗費資源建立的物件卻沒有發揮任何作用,而這個無謂的物件建立過程,在td的數量很多的情境下,就足以產生明顯效能差異。

我設計了一個實驗來驗證:如上圖,Test .live()及Test .delegate()可攔載所有<td>的click事件,分別將<td>的文字內容顯示在第一列右側的兩個<span>中,而按下Create Table則會建出5萬個<td>。

 

第一個測試我們可以先按Test .live(),再按Test .delegate(),應該都是0 ticks完成,之後按Create Table建立<td>,點選<td>就可以驗證.live()、delegate()均成功攔截到click事件。

第二個測試,則是先按Create Table建立出5萬個<td>,再按Test .live()及Test .delegate(),在我的電腦上,按Test .delegate()仍是瞬間完成,按Test .live()卻要耗上35+ ticks,推測應就是前述建立5萬個<td>元素jQuery集合耗費的時間。

最後再補充一點,如果程式思維是針對某個元素進行一連串動作: 先針對其下的子元素掛上事件,然後再進行其他操作,.delegate()允許我們寫成$("#t").delegate("..", "click", fn).css("..", "..").attr("..", "..")的串接形式,符合jQuery的直覺寫法;而.live()由於需將子元素視為主體,就無法像.delegate()般一氣喝成,也算是.delegate()寫法的另一項優點。

 轉自:http://blog.darkthread.net/post-2011-10-14-delegate-vs-live.aspx

fancybox 的API 翻譯

Fancybox的API和配置選項說明

屬性名默認值簡要說明

<thead>

</thead>

padding 10 瀏覽框內邊距,和css中的padding一個意思
margin 20 瀏覽框外邊距,和css中的margin一個意思
opacity false 如果為true,則fancybox在動畫改變的時候透明度可以跟著改變
modal false 如果為true,則'overlayShow' 會被設成'true' , 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 會被設成'false'
cyclic false 如果為true,相冊​​會循環播放
scrolling 'auto' 設置overflow的值來創建或隱藏滾動條,可以設置成'auto', 'yes', or 'no'
width 560 設置iframe和swf的寬度,如果'autoDimensions'為'false',這也可以設置普通文本的寬度
height 340 設置iframe和swf的高度,如果'autoDimensions'為'false',這也可以設置普通文本的高度
autoScale true 如果為true,fancybox可以自適應瀏覽器窗口大小
autoDimensions true 在內聯文本和ajax中,設置是否動態調整元素的尺寸,如果為true,請確保你已經為元素設置了尺寸大小
centerOnScroll false 如果為true,當你滾動滾動條時,fancybox將會一直停留在瀏覽器中心
ajax { } 和jquery的ajax調用選項一樣<small>注意: 'error' and 'success'這兩個回調事件會被fancybox重寫</small>
<small></small>
swf {wmode: 'transparent'} swf的設置選項
hideOnOverlayClick true 如果為true則點擊遮罩層關閉fancybox
hideOnContentClick false 如果為true則點擊播放內容關閉fancybox
overlayShow true 如果為true,則顯示遮罩層
overlayOpacity 0.3 遮罩層的透明度(範圍0-1)
overlayColor '#666' 遮罩層的背景顏色
titleShow true 如果為true,則顯示標題
titlePosition 'outside' 設置標題顯示的位置.可以設置成'outside', 'inside' 或'over'
titleFormat null 可以自定義標題的格式
transitionIn, transitionOut 'fade' 設置動畫效果. 可以設置為'elastic', 'fade' 或'none'
speedIn, speedOut 300 fade 和elastic 動畫切換的時間間隔, 以毫秒為單位
changeSpeed 300 切換時fancybox尺寸的變化時間間隔(即變化的速度),以毫秒為單位
changeFade 'fast' 切換時內容淡入淡出的時間間隔(即變化的速度)
easingIn, easingOut 'swing' 為elastic 動畫使用Easing
showCloseButton true 如果為true,則顯示關閉按鈕
showNavArrows true 如果為true,則顯示上一張下一張導航箭頭
enableEscapeButton true 如果為true,則啟用ESC來關閉fancybox
onStart null 回調函數,加載內容是觸發
onCancel null 回調函數,取消加載內容後觸發
onComplete null 回調函數,加載內容完成後觸發
onCleanup null 回調函數,關閉fancybox前觸發
onClosed null 回調函數,關閉fancybox後觸發