瀏覽模式: 普通 | 列表

CSS Menu Generator

顧名思義,這是一個利用CSS為基礎的網頁選單產生器,它可以讓你在線上直接針對按鈕的樣式來進行設定,最後產生的code把它貼到你的網頁上就可以使用了。


http://www.webmaster-toolkit.com/css-menu-generator.shtml




(.Net 1.1)SHA1與MD5雜湊函數的快速取得法


Using System.Web.FormsAuthentication.HashPasswordForStoringInConfigFile


Example:


FormsAuthentication.HashPasswordForStoringInConfigFile(password , passwordFormat )

參數

password
要做雜湊演算的密碼。
passwordFormat
要使用的雜湊演算。選擇為「sha1」或「md5」。

傳回值

傳回包含雜湊密碼的 String

備註

所支援的密碼演算法為 SHA1 和 MD5。.Net FrameWork 2.0 已支援更多密碼演算法。





CSS Properties To JavaScript Reference Conversion

CSS Property JavaScript Reference
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
clip clip
color color
cursor cursor
display display
filter filter
font font
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
overflow overflow
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
position position
float styleFloat
text-align textAlign
text-decoration textDecoration
text-decoration: blink textDecorationBlink
text-decoration: line-through textDecorationLineThrough
text-decoration: none textDecorationNone
text-decoration: overline textDecorationOverline
text-decoration: underline textDecorationUnderline
text-indent textIndent
text-transform textTransform
top top
vertical-align verticalAlign
visibility visibility
width width
z-index zIndex

Usage

Internet Explorer

document.all.div_id.style.JS_property_reference = "new_CSS_property_value";

Older Netscape's (4.7 and earlier)

document.div_id.JS_property_reference = "new_CSS_property_value";

Netscape 6.0+ and Opera (and other Mozilla)

document.getElementById(div_id).style.JS_property_reference = "new_CSS_property_value";

Note the use of parentheses instead of square brackets in newer Mozilla's "getElementById()" reference.





AJAX

AJAX結合JavaScript與XML兩種主要的業界標準,讓瀏覽器呈現頁面與伺服器處理回應時,可以不同步運作,減少瀏覽網頁等待的時間,為使用者帶來全新的網路衝浪體驗。

AJAX的出現讓企業重新省視網頁應用(Web Application)設計的兩個重要觀點:開發的方式與互動的模式。在資訊技術快速推陳出新的時代,許多網站設計人員莫不熱情擁抱,深怕落後在潮流以外,AJAX的出現對他們而言卻如同當頭棒喝,它讓網站開發者瞭解到設計網頁並不一定非得採用最新的資訊技術不可,原來使用舊技術也可以開發高互動性的網站。此外,網頁的互動過程,應決定在使用者而不是設計師。

當人們質疑堆砌舊技術所能達成的效果時,Google Maps卻適時地伴演著指標性的範例,結合AJAX互動引擎與簡潔的網頁介面,將虛擬與現實整合等加值應用,讓使用者愛不釋手。只是,對企業而言,Google在AJAX應用的典範上,會不會是一個特例?這一點,仍有待觀望,但它的確為企業在設計網站時,指引新的方向。雖然很少有企業網站會像Google Maps一樣,僅專注在單一商業用途上,但如果AJAX能夠結合JavaEE的應用,重新架構企業網站運作方式,讓企業與使用者間的互動,因網站的改善而更緊密,更重要的是,它是免費的。

儘管如此,當企業採用AJAX這種同屬於RIA技術,開發其商業網站時,雖然它提供一個免費的管道,但必須注意的是,AJAX的應用要適得其所。

AJAX仍存在舊技術的瓶頸
AJAX是新的名詞,但不是全新的技術。這個名稱,原來是「Asynchronous JavaScript and XML」的縮寫,首次出現在Adaptive Path顧問公司的Jesse James Garrett在2005年2月18日,於網路上發表「A New Approach to Web Application」中。這位顧問提出一個新的觀點,認為採用JavaScript與XML等已存在的技術,即可解決網頁設計時,靜態與動態呈現方式難以抉擇的問題,而不是一味地追逐新的資訊技術,並且使得Web Application的操作能像桌上型電腦中的應用程式般,達到RIA(Rich Internet Application)的同樣目的。

傳統網站的設計一直在靜態與動態間游移不定,前者在於執行的效率,後者在於互動的體驗,但很少有兼顧兩者優點的設計管道。雖然Macromedia提出Flash技術,以呈現RIA的強大,但企業也在尋找另一個管道,同時達成靜態與動態的目的。

AJAX雖然採用JavaScript與XML等業界的公開標準,這些技術也已很成熟,但用於開發網站,仍有以下待解決的技術瓶頸:

瀏覽器必需啟用JavaScript:有些使用者會關閉JavaScript功能,因為許多網頁的彈出式廣告,便是以JavaScript所撰寫的,間接影響到AJAX的運作。

瀏覽器必須支援XMLHttpRequest物件:由於AJAX引擎與伺服器間的交談都是經由XML格式,所以瀏覽器必須支援此物件。目前主流瀏覽器都已支援此標準,但Opera尚未完全支援,等更新版本才納入此標準。

使用侷限性:因為AJAX引擎代理瀏覽器與伺服器的交談,雖然使用者不需要按下傳送按鈕,但也因此,無法回到上一頁的畫面,所以在AJAX所撰寫的網頁中,常看不到「前一步(Last)」與「下一步(Next)」等按鈕,這個問題主要是因為JavaScript所造成的,也就是常令人詬病的缺點。接下來,使用者常在這類網站中因為缺少進一步的指引。雖然傳統網頁回傳結果時,會刷新網頁或換頁,但使用者也因此可以判斷處理的過程。可是在AJAX中,卻無法知道目前的狀況是處理前,還是已處理完成,AJAX引擎打斷了一般瀏覽網頁的習慣,也就是稱為「breaking the back botton」的問題。同樣的影響下,我們很難將同一個網頁內容透過URL與朋友分享,即使將JavaScript處理完成後的網頁URL傳給其它人,他們只是看到未處理前的畫面,例如表格欄位仍是空白的狀態。此外,因為AJAX無法記錄狀態,所以使用者也無法經由瀏覽記錄中回到之前的頁面了。

安全性:AJAX引擎因為嵌在用戶端的執行程式中,所以任何使用者可以輕易看到所有程式碼(如IE中「檢視」→「原始碼」或Firefox中「檢視」→「此頁原始內容」)。此外,在AJAX所採用的技術中,並沒有任何一項可以保證資料交換過程的安全性。

雖然AJAX能讓網頁設計者少了傳送按鈕的設計與動作,不過,有些網頁中的傳送按鈕是必要的,主要用來提醒使用者在傳送敏感性資料時,再一次提醒使用者確認此動作,但AJAX中,使用者既無法確認,資料送出後,無論對或錯,都無法反悔。

效能:這個問題根源於JavaScript本身,但因為AJAX包含此技術,所以同樣的問題仍存在。JavaScript本身並非完全的物件導向,而且缺少效能驗證與除錯工具。此外,當網頁中必需包括大量的JavaScript程式碼,因為這些程式都在用戶端執行,所以使用者的電腦處理效能必須足以應付,即使處理器速度夠快,大量的JavaScript程式碼仍足以拖慢瀏覽器的執行速率,這也是JavaScript發展這麼久以來,一直未形成主流應用的原因。

程式開發:因為AJAX所包含的技術都在嵌入同一個程式中,所以開發者很難重複使用程式,但在主流的物件導向中,重複運用程式碼有助於縮短開發時程及加速執行效能,AJAX在這方面顯然力不從心。另外,因為AJAX讓Web Application開發者不僅要懂HTML與JavaScript,也必需懂DOM、CSS、XML等,後續維護上也很困難,因為管理者必需要知道問題發生在那個技術環節上。JavaScript另一個令開發者頭疼的原因是,它既非一般正規的程式語言(如C++或Java),也不是正統的標註語言(如HTML),但嵌入在網頁中後,破壞了整個程式架構與程式的簡潔,讓後續維護變得困難重重。

整合應用程式:AJAX將所有技術混雜,以致於難以整合其它應用,例如串流影音檔案的撥放等。

跨平臺的處理:雖然AJAX所採用的均是開放的標準,但網頁開發者還是必須撰寫程式,主動偵測用戶端的瀏覽器是否支援AJAX所包括的所有技術,如果使用者的瀏覽器不支援,程式中應加上指示,告知使用者如何處理這類網頁,就像網頁處理Flash一樣,提醒使用者下載外掛程式,或選擇跳過Flash撥放的影片。

離線瀏覽行動式周邊:雖然AJAX可以讓Web Application如同操作應用程式一樣便利,但它必須與伺服器互動,以致於離線瀏覽便無法處理頁面資料。如果企業中的Web Application也包括行動式設備的執行環境,例如PDA或Smart Phone,由於這些設備並不完全支援AJAX所包含的各種技術,例如JavaScript或DOM,以致於無法運作。

AJAX企業應用模型:結合JavaEE
AJAX既然能提供使用者減少等待的時間,對許多企業網站而言,只要適當地應用,便能改善原本網站的處理方式,例如:結合JavaEE(Sun將Java Enterprise Edition重新命名為JavaEE,不再使用J2EE)。我們以企業網站常處理的資料庫數據模型為例,說明AJAX如何結合JavaEE。這樣的結合,可以讓許多企業網站的商業邏輯資料在處理的過程中,不致於讓使用者長久地等候,讓使用者在網頁中瀏覽資料庫數據時,如同在企業內部網路中使用般的快速與便利。

依商業邏輯決定AJAX應用
目前,到底哪一種Web Application適合使用AJAX,並沒有定論,但從Google Maps受重視的程度來分析,可以得知單一用途,而且需要大量數據交換的網站形式最適合。不過,主要還是得依企業本身需求而定,也並非整個網頁都必須以AJAX撰寫不可。

AJAX主要能讓開發者更彈性地處理資料交換的過程,而不是侷限在靜態與動態中。如果企業期望能讓Web Application像RIA一般,也不一定非在AJAX與Flash兩者間擇一不可,我們可以在網路中找到同時使用兩種技術的案例,從中發現到其互補的特點。但就像Flash一樣,雖然RIA可以帶給使用者不同的體驗,但也同時改變他們瀏覽網頁的習慣,企業必須在漸進的過程中讓使用者學會並接受。文⊙張瑞隆


AJAX on MSDN

AJAX魔法祭壇

.Net 範例程式及文件




.Net資源 - 建立可加總的Datagrid

Summary Rows in DataGrid Controls

Summary.cs
// Summary.cs - code-behind file

namespace BWSLib
{
    using System;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Data.SqlClient;
    using System.Drawing;
    using System.Text;

    public class MyPage : Page
    {
        // Declare as PUBLIC or PROTECTED members all
        // the controls in the layout
        protected DataGrid grid;
        protected Label lblMsg;
        protected DropDownList ddYears;

        // Page OnLoad
        protected override void OnLoad(EventArgs e)
        {
            if (!IsPostBack)
            {
                // Load data and refresh the view
                DataFromSourceToMemory("MyDataSet");
                UpdateDataView();
            }
        }


        // DataFromSourceToMemory
        private void DataFromSourceToMemory(String strDataSessionName)
        {
            // Gets rows from the data source
            DataSet oDS = PhysicalDataRead();
    
            // Stores it in the session cache
            Session[strDataSessionName] = oDS;
        }

        // PhysicalDataRead
        private DataSet PhysicalDataRead()
        {
            String strCnn = "server=localhost;initial catalog=northwind;uid=sa;";
            SqlConnection conn = new SqlConnection(strCnn);

            // Command text using WITH ROLLUP
            StringBuilder sb = new StringBuilder("");
            sb.Append("SELECT ");
            sb.Append("  CASE GROUPING(o.customerid) WHEN 0 THEN o.customerid ELSE '(Total)' END AS MyCustomerID, ");
            sb.Append("  CASE GROUPING(od.orderid) WHEN 0 THEN od.orderid ELSE -1 END AS MyOrderID, ");
            sb.Append("  SUM(od.quantity*od.unitprice) AS price ");
            sb.Append("FROM Orders o, [Order Details] od ");
            sb.Append("WHERE Year(orderdate) = @TheYear AND od.orderid=o.orderid ");
            sb.Append("GROUP BY o.customerid, od.orderid WITH ROLLUP ");
            sb.Append("ORDER BY o.customerid, price");
            String strCmd = sb.ToString();
            sb = null;

            SqlCommand cmd = new SqlCommand();
            cmd.CommandText = strCmd;
            cmd.Connection = conn;    

            SqlDataAdapter da = new SqlDataAdapter();
            da.SelectCommand = cmd;

            // Set the "year" parameter
            SqlParameter p1 = new SqlParameter("@TheYear", SqlDbType.Int);
            p1.Direction = ParameterDirection.Input;
            p1.Value = Convert.ToInt32(ddYears.SelectedItem.Text);
            cmd.Parameters.Add(p1);
    
            // The DataSet contains two tables: Orders and Orders1.
            // The latter is renamed to "OrdersSummary" and the two will be put into
            // relation on the CustomerID field.
            DataSet ds = new DataSet();
            da.Fill(ds, "Orders");

            return ds;
        }

        // Refresh the UI
        private void UpdateDataView()
        {
            // Retrieves the data
            DataSet ds = (DataSet) Session["MyDataSet"];
            DataView dv = ds.Tables["Orders"].DefaultView;

            // Re-bind data
            grid.DataSource = dv;
            grid.DataBind();
        }

        // EVENT HANDLER: ItemCreated            
        public void ItemCreated(Object sender, DataGridItemEventArgs e)
        {
            // Get the newly created item
            ListItemType itemType = e.Item.ItemType;

            ///////////////////////////////////////////////////////////////////
            // ITEM and ALTERNATINGITEM
            if (itemType == ListItemType.Item || itemType == ListItemType.AlternatingItem)
            {
                DataRowView drv = (DataRowView) e.Item.DataItem;
                if (drv != null)
                {
                    // Check here the app-specific way to detect whether the
                    // current row is a summary row

                    if ((int) drv["MyOrderID"] == -1)
                    {
                        // Modify the row layout as needed. In this case,
                        //  + change the background color to white
                        //  + Group the first two cells and display company name and #orders
                        //  + Display the total of orders
                        // Graphical manipulations can be done here. Manipulations that require
                        // data access should be done hooking ItemDataBound. They can be done
                        // in ItemCreated only for templated columns.
                        e.Item.BackColor = Color.White;  
                        e.Item.Font.Bold = true;
                        e.Item.Cells.RemoveAt(1);            // remove the order # cell
                        e.Item.Cells[0].ColumnSpan = 2;        // span the custID cell
                        e.Item.Cells[1].HorizontalAlign = HorizontalAlign.Right;
                    }

                }
            }                    
        }

        // EVENT HANDLER: PageIndexChanged
        public void PageIndexChanged(Object sender, DataGridPageChangedEventArgs e)
        {
            grid.CurrentPageIndex = e.NewPageIndex;
            UpdateDataView();
        }

        // EVENT HANDLER: ItemDataBound
        public void ItemDataBound(Object sender, DataGridItemEventArgs e)
        {
            // Retrieve the data linked through the relation
            // Given the structure of the data ONLY ONE row is retrieved
            DataRowView drv = (DataRowView) e.Item.DataItem;
            if (drv == null)
                return;

            // Check here the app-specific way to detect whether the
            // current row is a summary row
            if ((int) drv["MyOrderID"] == -1)
            {
                if (drv["MyCustomerID"].ToString() == "(Total)")
                {
                    e.Item.BackColor = Color.Yellow;
                    e.Item.Cells[0].Text = "Orders total";
                }
                else
                    e.Item.Cells[0].Text = "Customer subtotal";
            }
        }

        public void OnLoadYear(Object sender, EventArgs e)
        {
            DataFromSourceToMemory("MyDataSet");
            UpdateDataView();
        }
    }
}


Summary.cs
‹%@ Page Language="C#" Inherits="BWSLib.MyPage" Src="Summary.cs" Trace="false" %›

‹html›
‹title›Summary Rows‹/title›
‹style›
  a                {behavior:url(....mouseover.htc);}
  hr            {height:2px;color:black;}
  .StdTextBox    {font-family:verdana;font-size:x-small;border:solid 1px black;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true');}
  .StdText        {font-family:verdana;font-size:x-small;}
‹/style›


‹BODY bgcolor="ivory" style="font-family:verdana;font-size:small"›
‹h2›Orders and Customers‹/h2›

‹!-- ASP.NET Form --›
‹form runat="server"›

‹!-- Grid and the remainder of the page --›
‹table›‹tr›
‹td valign="top"›

‹asp:DataGrid id="grid" runat="server"
    AutoGenerateColumns="false"
    AllowPaging="true" PageSize="15"
    Font-Size = "xx-small"
    CellSpacing="0" CellPadding="4"
    DataKeyField="MyCustomerId"
    BorderStyle="solid" BorderColor="skyblue" BorderWidth="1" GridLines="both"
    OnItemCreated="ItemCreated"
    OnItemDataBound="ItemDataBound"
    OnPageIndexChanged="PageIndexChanged"›
    
    ‹headerstyle backcolor="skyblue" font-size="9pt" font-bold="true" /›
    ‹itemstyle backcolor="#eeeeee" /›
    ‹pagerstyle backcolor="skyblue" font-name="webdings" font-size="10pt" PrevPageText="3" NextPageText="4" /›
    
    ‹Columns›
          ‹asp:BoundColumn DataField="MyCustomerId" HeaderText="Customer" /›
          ‹asp:BoundColumn DataField="MyOrderId" HeaderText="Order #" /›
       ‹asp:BoundColumn DataField="price" HeaderText="Amount" DataFormatString="{0:c}"›
        ‹itemstyle horizontalalign="right" /›
       ‹/asp:BoundColumn›
    ‹/Columns›
‹/asp:DataGrid›

‹/td›
‹td valign="top" width="20px"›‹/td›
‹td valign="top"›
    ‹b›Year‹/b›
    ‹asp:dropdownlist runat="server" id="ddYears"›
        ‹asp:listitem runat="server" ›1998‹/asp:listitem›
        ‹asp:listitem runat="server" ›1997‹/asp:listitem›
        ‹asp:listitem runat="server" ›1996‹/asp:listitem›
    ‹/asp:dropdownlist>
    
    ‹asp:linkbutton runat="server" text="Load..." onclick="OnLoadYear" />
    ‹br>‹br>
    ‹asp:label runat="server" cssclass="StdText" id="lblMsg" />
‹/td>
‹/tr>‹/table>
‹hr>
‹/form>
‹/body>
‹/html›