導航首頁 ? 技術教程 ? 用滑動門技術設計按鈕的圖文教程
    全站頭部文字 我要出現在這里
    用滑動門技術設計按鈕的圖文教程 576 2024-10-23   
    本文為翻譯文章,全文地址:http://diger.cn/article.asp?id=351
    原文地址:http://www.filamentgroup.com/lab/buttonElement/

    Particle Tree 最近發布了一篇文章描述了一種他們拿出的設計按鈕元素的技術,對于那些不熟練的人來說,表格按鍵是出了名的難以定制。典型的解決方案是使用瀏覽器提供的默認按鈕,或者是使用一個圖形輸入。當圖形輸入完成了需求結果時,它請求創建一個新的圖形為每一個按鈕用它的文本“Baked-in”(沒有提及以hovers交換它)。

    盡管Particle Tree的技術提供了一種可靠的方案,它不能滿足我們的需求。我們需要一種使用了滑動門技術的按鈕,一種真正的HTML文本,不需要請求JavaScript轉滾或者提交表格。滿足這些條件就意味著input和anchor元素被排除了。很顯然,按鈕元素正是我們唯一的選擇。下面的技術示范了一種使用滑動門技術的跨瀏覽器的按鈕的技術。


    查看Demo

    標簽:

    <button value="submit" class="submitBtn"><span>Submit</span></button>

    CSS:

    程序代碼

    button {
    border:0;
    cursor:pointer;
    font-weight:bold;
    padding:0 20px 0 0;
    text-align:center;
    }
    button span {
    position:relative;
    display:block;
    white-space:nowrap;
    padding:0 0 0 20px;
    }
    /*blue buttons*/
    button.submitBtn {
    background:url(images/btn_blue_right.gif) right no-repeat;
    font-size:1.3em;
    }
    button.submitBtn span {
    height:50px;
    line-height:50px;
    background:url(images/btn_blue_left.gif) left no-repeat;
    color:#fff;
    }
    button.submitBtn:hover {
    background:url(images/btn_blue_right_hover.gif) right no-repeat;
    }
    button.submitBtn:hover span {
    background:url(images/btn_blue_left_hover.gif) left no-repeat;
    }

    CSS For IE6和IE7(有時候需要)


    button {
    width:auto;
    overflow:visible;
    }
    button span {
    margin-top:1px;
    }

    就像你能看到的那樣,每個狀態使用了2個圖片(總共4個圖片)。進一步簡化,可以將這些狀態轉化為兩個。但這種想法的最初測試出現了不一致的結果。











    瀏覽器支持:
    IE6,IE7,Firefox(mac/pc),Safari,Opera,Camino等等。

    警告:為了使hover在IE6中有效,你將需要編寫一個類觸發器。盡管不像圖片交換一樣糟糕。


    !!!站長長期在線接!!!

    網站、小程序:定制開發/二次開發/仿制開發等

    各種疑難雜癥解決/定制接口/定制采集等

    站長微信:lxwl520520

    站長QQ:1737366103