• <menu id="w2i4a"></menu>
  • logo telerik中文文檔

    文檔首頁>>telerik中文文檔>>圖標(biāo)Button

    圖標(biāo)Button


    立即下載Kendo UI for jQuery

    Button提供了通過向其添加圖標(biāo)在視覺上增強(qiáng)其文本內(nèi)容的選項(xiàng)。你可以添加一個(gè)帶有img元素或背景圖像(通常是一個(gè)子圖形)的圖標(biāo),考慮到web標(biāo)準(zhǔn),使用背景圖像更好,因?yàn)閳D標(biāo)代表的是裝飾而不是結(jié)構(gòu)性內(nèi)容。

    Button提供icon、spriteCssClass和imageUrl屬性,用于配置圖標(biāo)。對于特定的Button您只能使用其中一個(gè)屬性,如果您定義了多個(gè)屬性則Button將按照前面所述的順序只使用其中一個(gè)屬性。

    有關(guān)呈現(xiàn)圖標(biāo)按鈕的完整示例,請參閱向按鈕添加圖像的文章。

    增強(qiáng)按鈕的視覺效果:

    • 使用背景圖標(biāo)
    • 使用圖像圖標(biāo)
    • 使用字體圖標(biāo)

    背景圖標(biāo)

    背景圖標(biāo)應(yīng)用于icon或spriteCssClass屬性并作為span元素的背景顯示。如果按鈕有一個(gè)k-sprite CSS類則可以自動(dòng)渲染span元素或者使用現(xiàn)有的span元素,如果使用了圖標(biāo)屬性則使用k-icon類。icon和spriteCssClass屬性的區(qū)別在于icon是用來作為主題子圖像一部分的內(nèi)置Kendo UI圖標(biāo)。有關(guān)可用圖標(biāo)名稱的列表,請參閱關(guān)于使用圖標(biāo)的文章。

    下面的示例演示如何在Button組件中使用圖標(biāo)。

    <button type="button" id="editButton">Edit</button>
    <button type="button" id="deleteButton"><span class="k-icon"></span>Delete</button>
    
    <script>
    $(function(){
    $("#editButton").kendoButton({
    icon: "pencil"
    });
    
    $("#deleteButton").kendoButton({
    icon: "trash"
    });
    });
    </script>

    前面示例中的icon配置將生成以下HTML輸出。

    <button type="button" id="editButton" class="k-button k-button-icontext"><span class="k-icon k-edit"></span>Edit</button>
    <button type="button" id="deleteButton" class="k-button k-button-icontext"><span class="k-icon k-delete"></span>Delete</button>

    下面的例子演示了如何應(yīng)用spriteCssClass。

    <button type="button" id="editButton">Edit</button>
    <button type="button" id="deleteButton"><span class="k-sprite"></span>Delete</button>
    
    <script>
    $(function(){
    $("#editButton").kendoButton({
    spriteCssClass: "myEditIcon"
    });
    
    $("#deleteButton").kendoButton({
    spriteCssClass: "myDeleteIcon"
    });
    });
    </script>

    從技術(shù)上講spriteCssClass可以用來實(shí)現(xiàn)與icon相同的結(jié)果,但icon避免了同時(shí)設(shè)置兩個(gè)CSS類的需要并提供了一定程度的抽象展示。例如以下兩種配置實(shí)際上是相同的,#button2也應(yīng)用了一個(gè)k-sprite CSS類到span元素但它不改變按鈕的外觀。

    $(function(){
    $("#button1").kendoButton({
    icon: "foo"
    });
    
    $("#button2").kendoButton({
    spriteCssClass: "k-icon k-foo"
    });
    });

    在某些情況下您可能希望使用只包含圖標(biāo)而沒有文本的Button,這種情況下為了增加組件的可訪問性,可以在sprite span中包含一個(gè)文本標(biāo)簽。

    <button type="button" id="deleteButton"><span class="k-sprite">Delete</span></button>
    
    <script>
    $(function(){
    $("#deleteButton").kendoButton({
    spriteCssClass: "myDeleteIcon"
    });
    });
    </script>

    圖像圖標(biāo)

    圖像圖標(biāo)應(yīng)用于imageUrl屬性并作為img元素顯示,按鈕可以自動(dòng)呈現(xiàn)img元素或使用現(xiàn)有的img元素(如果它有k-image CSS類)。要在手動(dòng)添加img元素時(shí)增加組件的可訪問性請應(yīng)用alt屬性。

    <button type="button" id="editButton">Edit</button>
    <button type="button" id="deleteButton"><img class="k-image" alt="Delete" />Delete</button>
    
    <script>
    $(function(){
    $("#editButton").kendoButton({
    imageUrl: "/images/myEditIcon.gif"
    });
    
    $("#deleteButton").kendoButton({
    imageUrl: "/images/myDeleteIcon.gif"
    });
    });
    </script>

    字體圖標(biāo)

    通過在spriteCssClass屬性上設(shè)置所需的第三方CSS類,你也可以在Kendo UI Button中使用FontAwesome或其他字體圖標(biāo)。但這種方法會(huì)呈現(xiàn)一個(gè)k-sprite CSS類,它應(yīng)用的字體和大小樣式可能會(huì)干擾字體圖標(biāo)樣式。

    要處理這個(gè)問題,可以使用以下方法之一:

    覆蓋破壞字體圖標(biāo)的Kendo UI樣式:

    ```dojo
    <link rel="stylesheet"
     />
    <style>
    .k-button .fa {
    font-size: inherit;
    line-height: inherit;
    width: auto;
    height: auto;
    margin-left: 0;
    }
    </style>
    
    <button type="button" id="archiveButton">Archive</button>
    
    <script>
    $("#archiveButton").kendoButton({
    spriteCssClass: "fa fa-archive"
    });
    </script>
    ```

    在Kendo UI Button中直接包含所需的HTML標(biāo)記和CSS類作為模板內(nèi)容,Button就不會(huì)呈現(xiàn)k-sprite類:

    ```dojo
    <link rel="stylesheet"
     />
    
    <button type="button" id="archiveButton"><span class="fa fa-archive"></span> Archive</button>
    
    <script>
    $("#archiveButton").kendoButton({});
    </script>
    ```
    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();