2010年6月29日 星期二

固定Table 的標頭 (Header)

當自己的 Table 內容太長時,會希望當 scrollbar 下拉後,還是能夠看到標頭。其實稍微搜尋一下,也可以看到蠻多範例在介紹。然而,如果你要考慮同時能用在 IE, FireFox, Chrome 等瀏覽器,其實還需花點時間。

我一開始是從 [jQuery]外掛特輯10:jscrollable-固定標頭與頁尾 這篇入門,而這的確真的很簡單,可惜,只能用在 IE。如果你只需要在 IE 上使用,可以考慮用這個。

而在黑暗執行續的一篇 GridView的標題欄、列凍結效果(跨瀏覽器版),的確作者很用心的介紹了他改良 Super Tables 的一些心路歷程。這真的可以跨瀏覽器,很不錯,也比較強大。

但自己最後挑選的,則是這個:Fixed Header Tables。主要是跟我目前專案需求的外觀比較相似。




測試程式下載

參考資料:
01. Fixed Header Tables
      http://fixedheadertable.com/
02.[jQuery]外掛特輯10:jscrollable-固定標頭與頁尾
      http://blog.finalevil.com/2009/10/jquery10jscrollable.html
03.GridView的標題欄、列凍結效果(跨瀏覽器版)
      http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/02/18/supertable-plugin-for-jquery.aspx
04.jQuery Tools
      http://flowplayer.org/tools/index.html
      這一篇是在收集資料時,無意中看到的 jQuery 工具,免費,而且有些功能蠻炫的。譬如先
      前自己有介紹過一篇「使用 jQuery 實作 Tips 功能」,現在看到
      http://flowplayer.org/tools/tooltip/index.html ,就發現自己遜掉了。所以是個很不錯的參考。

20110927補充:
另外推薦 ken 所撰寫的「IdeaSparks ASP.NET CoolControls簡介」,對於習慣使用 GridView 的開發人員來說,是提供固定標頭最簡便的方式。

讓 Div 有 scrollbar

有時後,頁面顯示的字數太多,容易造成頁面編排變的很醜,但有不想犧牲掉需要顯示的資訊時,就會希望能有拉霸(scrollbar)的效果。

要達成這效果,只要使用一個 DIV ,並設定 overflow:auto 屬性即可。

範例如下:


<div style="width:300px;height:250px;overflow:auto;">
您要輸入的內容
</div>

參考資料:
01. DYNAMIC Forums
02. w3cschools - CSS overflow Property

2010年6月22日 星期二

給我一個圓角的框框

對於四四方方的按鈕或表格,如果可以讓它的邊邊角角圓滑一點,似乎會比較好看些。在 css3 ,其實早已提供相關的設定,但...這些的好處,偏偏 IE 都不支援;而工程師的難處,偏偏老闆都不知道。

最近看到 IE-CSS3 讓 IE 支援 CSS3  這篇文章的介紹,提到了 IE-CSS3 可以解決這問題。下載後,自己改寫了一下程式,讓原本四四方方的按鈕有了弧度。


先到 http://fetchak.com/ie-css3/ 去下載 ie-css3.htc
接著定義了樣式內容:

.button {   
 background-color:#3961CA;
 color:White;
 cursor:pointer;
 height: 22px; 
 border: 1px solid #c6ac6c;
 position: relative;
 padding: 1px 5px 1px 5px; 
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;

 behavior: url(ie-css3.htc);
}


然後直接讓該按鈕  的 class 套用 button 。這樣就可以呈現出圓角按鈕了。

實作後發現,因為我的按鈕是使用伺服器控制項拉的,只要一按,頁面就會 postback 且重新載入一次頁面,這時,就會很明顯的看到我的圓弧按鈕變成正正方方,最後又在變成圓弧。對於這樣的變化,總是覺得有點怪,心裡頭似乎不大滿意這樣的效果。

於是另外又比較了一個可以產生圓弧的 JavaScript : DD_roundies 。他只會處理針對 IE 瀏覽器的圓弧效果,但這也還好,因為其他瀏覽器幾乎都支援 css3,可以很容易的達成我所需的效果。

實作 DD_roundies,首先要到 http://www.dillerdesign.com/experiment/DD_roundies/  下載 0.0.2a-min.js,因為我並不打算去改寫作者寫好的 code,所以直接下載壓縮後的檔案即可。

而使用方式,則是將符合您所要套用的物件放進 DD_roundies.addRule( ) 裡,而非 IE 的部份,則自行定義在 Style 裡面。

以下是完整的測試程式碼:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title>未命名頁面</title>
  <script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
  <script>
  DD_roundies.addRule('.button', '6px');
  </script>
  <style>
  .button {  
  background-color:#3961CA; color:White; cursor:pointer;padding: 1px 5px 1px 5px; 
  /* Do rounding (native in Safari, Firefox and Chrome) */
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;    
  }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <div>    
  <asp:Button ID="btnSearch" CssClass="button"  Text="存檔" runat="server" />
  </div>
  </form>
</body>
</html>


經過這兩個範例,自己比較欣賞 DD_roundies ,因為即便是網頁發生 postback 重新載入,圓弧的按鈕都不會有任何變化,這正也是我想要的結果。

參考頁面:
01. CSS3 support for Internet Explorer 6, 7, and 8
02. DD_roundies
03. CSS 3 的新玩意
04. IE-CSS3 讓 IE 支援 CSS3

觸發 post back 固定畫面位置(二)

在 .net 2.0 開始,提供了  MaintainScrollPositionOnPostback 可供我們控制網頁 post back 後還可以回到原先瀏覽的位置。

設定方式很簡單,只要在 aspx 頁面寫下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ScrollTest3.aspx.cs" Inherits="ScrollTest3"  MaintainScrollPositionOnPostback="true" %>

經實測,IE ok, Firefox ok,  但 Google Chrome 與 Safari 卻失敗...

為了達到放諸四海皆準的目的,不得動些手腳來完成。

首先,加入一個「瀏覽資訊檔」。並將他放到 App_Browsers 資料夾下。


點進去剛剛新建的檔案,可以看得出來他是用 xml 格式定義了各種不同瀏覽器的設定。而我們需要將目前未定義的瀏覽器,手動新增進去。所以,複製以下內容,貼到 <browsers></browsers>裡。


<browser id="Safari3" parentID="Safari1Plus">
    <identification>
      <userAgent match="Safari/\d+\.\d+" />
    </identification>
    <capture>
      <userAgent match="Version/(?'version'\d+\.\d+)" />
    </capture>
    <capabilities>
      <capability name="browser" value="Safari3" />
      <capability name="version" value="${version}" />
    </capabilities>
    <controlAdapters>
      <adapter controlType="System.Web.UI.WebControls.Menu"
               adapterType="" />
    </controlAdapters>
  </browser>
  <browser id="GoogleChrome" parentID="Safari3">
    <identification>
      <userAgent match="Chrome/(?'version'\d+\.\d+)" />
    </identification>
    <capabilities>
      <capability name="browser" value="Googlebot" />
      <capability name="supportsMaintainScrollPositionOnPostback" value="true" />
    </capabilities>
  </browser> 

修改後在 chrome 重新執行,就可以正常返回原先的位置了。

如果你懶的每一頁都去設定,可以直接在 web.config 的 <system.web></system.web> 加上 <pages maintainScrollPositionOnPostBack="true"></pages>

參考資料:
01. 最简单的方法,让 ASP.NET Menu 控件在 Google Chrome 浏览器上正常显示
02. 讓Chrome瀏覽器支援MaintainScrollPositionOnPostback屬性
03. postback 後,網頁如何 keep 在相同位置
04. 觸發 post back 固定畫面位置
05. 網頁PostBack後回到原來停留的位置

2010年6月21日 星期一

ubuntu上 擷取 mp3 檔案

在 Ubuntu,如果想要針對某個 mp3 檔案,進行片段擷取,可以使用 mp3splt 這軟體,蠻簡單、速度也蠻快的。安裝方式,只需要打開 Synaptic 套件管理程式,在搜尋列打上 mp3splt ,就可以找到相關套件。你只要點選 mp3splt ,就會將相關的程式也一併安裝好。但如果你希望使用圖形介面,則要記得再勾選 mp2splt-gtk 。


自己比較喜歡用命令模式來操作,因為圖形模式,個人覺得有點太囉唆了。只要在命令列上寫:
                mp3splt     檔名      起始時間     結束時間

這樣就可以很快的完成切割動作,真的很快喔,害我一度以為是否發生錯誤了,怎麼都沒有在動。其中,起始時間 與 結束時間 是用 分.秒   來表示, 舉例來說, 2.20  代表 2 分 20 秒



參考資料:

01: Split mp3 in Ubuntu
02: Mp3Splt:MP3/OGG 分割器
03: Video2mp3: 可轉換 YouTube 和其它類似網站

jQuery 判斷 checkbox 是否被勾選

判斷 checkbox 是否有被勾選有兩個方式。

假設在頁面上宣告了一個 checkbox

<input type="checkbox" id="cb1" />Item1

方法一:


透過 attr( ) 去取得 checked 目前的屬性狀態,如果有被勾選,會回傳 true ; 反之, 回傳 false

 if($("#cb1").attr('checked')==true)
            alert('cb1 checked');

方法二:

直接在 selectors 裡面限制要抓的必須是有被勾選的項目。如果有被勾選,會回傳 on ; 反之,回傳 undefined


 if($("#cb1:checked").val()=="on")
            alert('type2:cb1 checked');

相關文章:

1.checkbox 全選或取消
2.JQuery 取得 checkbox 群組內被選取的項目
3.jQuery 取得 radio button 目前選取的值
4.jQuery 取得 dropdown list 選取的值

2010年6月20日 星期日

ubuntu 收聽廣播

在 windows 上,我喜歡連結到 http://jason.onweb.idv.tw/radio.asp 收聽廣播,但在 linux (ubuntu) ,似乎一時找不到可以播放廣播的方法。還好看了 Linux 上面聽 Hinet 廣播 這篇文章,發現 Hinedo 這軟體,真的很棒。

以下分享如何安裝 Hinedo 的步驟:

1.到 http://of.openfoundry.org/projects/814/download 下載 hinedo_0.4-1ubuntu1_i386.deb
2.將下載後的檔案解開並安裝,直接按右鍵,選擇「以 GDebi套件安裝程式 開啟」。接著就直接一直裝下去即可。
3. 安裝完成後,就會在  應用程式-影音 找到 Hinedo 電台選播器,並點擊它。
4.接著就可以在工具列上,看到 「Hi」的小圖示,點選後,我們第一次使用可以先按「線上更新電台清單」,以取得最新的電台清單。日後,只需在 Hinedo 的分類裡,找到你想要收聽的廣播,點擊後就可以收聽了。

2010年6月17日 星期四

遠端桌面與本機的檔案互傳

使用 windows 的遠端桌面,可以讓你直接去操作遠端的機器。但是,當你有檔案需要上載到遠端機器上時,老是透過 usb 插來插去或 email 傳來傳去,總是覺得不方便。當然,如果有開網路芳鄰來解決,當然會是一個好方法,可我偏偏遇到一個不允許使用網芳的遠端機器。

這件事我一直耿耿於懷的對同事抱怨,結果他說,「這麼簡單事還不會?」

蒼天有眼,小弟真的不會。接著就看他傳來武功祕笈:

1.在遠端桌面的視窗,點選「選項」。


2.選擇「本機資源」頁籤,並點選「詳細資料」。接著會跳出「本機裝置和資源」,然後將所有選項都打勾,最後一直按確定。打完收工。


跪拜,再跪拜,三跪拜 .....

2010年6月9日 星期三

jQuery 取得 radio button 目前選取的值

可以使用 $("input[name=ra]:checked").val()

但如果想進一步去判斷使用者有沒有做出選擇,
則可以加上一句來判斷:

if($("input[name=ra]:checked").val()==undefined)

一個簡單範例如下:

function show()
{

    if($("input[name=ra]:checked").val()==undefined)
        alert('您尚未選取!');
    else
        alert($("input[name=ra]:checked").val());
}


相關連結:jQuery 取得 dropdown list 選取的值

2010年6月4日 星期五

攔截「具有潛在危險 Request.Form 的值」事件

當 user 在 asp.net 開發的網頁上,敲入: <span> 等 Html 標籤符號時,會出現以下錯誤訊息:

具有潛在危險 Request.Form 的值已從用戶端 (ctl00$ContentPlaceHolder1$tbxQuestion=\"<span>ss</span>\") 偵測到

如果想進一步去攔截這訊息,事先把相關錯誤處置好,以免讓 user 看到所謂「當機」或「亂碼」的頁面,則可以在

Global.asax 的 void Application_Error(object sender, EventArgs e) 加上以下程式碼來處理。

void Application_Error(object sender, EventArgs e) 
    { 
        // 發生未處理錯誤時執行的程式碼
        // At this point we have information about the error
        HttpContext ctx = HttpContext.Current;

        Exception exception = ctx.Server.GetLastError();

        string errorInfo =
           "<br>Offending URL: " + ctx.Request.Url.ToString() +
           "<br>Source: " + exception.Source +
           "<br>Message: " + exception.Message +
           "<br>Stack trace: " + exception.StackTrace;


        if (exception.StackTrace.Contains("ValidateString"))
        {   
     //因為我所要攔截的訊息會有「ValidateString」字眼,所以我將這事件另外導到其他頁面
            ctx.Response.Redirect("Bid_ValidError.aspx?PreUrl=" + ctx.Request.Url.ToString());            
        }
        else
        {
            ctx.Response.Write(errorInfo);
        }

        // --------------------------------------------------
        // To let the page finish running we clear the error
        // --------------------------------------------------
        ctx.Server.ClearError();
       

    }

參考資料:
要如何攔截 ASP.Net 防範 XSS 攻擊的錯誤畫面?
ASP.Net Custom Error Pages