Facebook像Ext3按鈕的通知圖標

我正在使用一個名爲「NotificationButton」的按鈕的Ext工具欄，我打算在其中顯示數字，就像在facebook通知中一樣。我可以成功更改按鈕的html。我卡住的唯一的東西是在CSS部分。Facebook像Ext3按鈕的通知圖標

任何人都可以指向正確的方向嗎？提前致謝。

已編輯！

正如Daulet建議，在這一點上，我有：

樣式

<style type="text/css"> 
    .fbNotification 
    { 
     background: none repeat scroll 0 0 orange!important; 
     border: 1px solid orange !important; 
     border-radius: 10px !important; 
     width: 18px !important; 
    } 

    .fbNotification .x-tip-body 
    { 
     font-size: 10px !important; 
    } 
</style>

標記

<ext:Panel ID="Panel1" runat="server" Title="Panel with toolbars" Width="600" Height="300"> 
    <TopBar> 
     <ext:Toolbar runat="server"> 
      <Items> 
       <ext:Button ID="b1" runat="server" Icon="Add" StandOut="true" Text="Notifications"> 
        <Listeners> 
         <Render Fn="createTooltp"></Render> 
        </Listeners> 
       </ext:Button> 
       <ext:ToolbarFill /> 
       <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupAdd" Pressed="true" /> 
       <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupDelete" /> 
       <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupEdit" /> 
      </Items> 
     </ext:Toolbar> 
    </TopBar> 
</ext:Panel>

腳本：

<script type="text/javascript" language="javascript"> 
    function createTooltp(cmp) { 
     tooTip = new Ext.ToolTip({ 
      anchor: 'left', 
      target: cmp, 
      html: '10', 
      cls: 'fbNotification', 
      autoRender: true, 
      renderTo: Ext.getBody(), 
      autoHide: false, 
      shadow: false, 
      padding: 0, 
      width: 16, 
      shrinkWrap: 0, 
      anchorToTarget: true, 
      mouseOffset: [-4, -8] 
     }); 

     tooTip.show(); 
    } 
</script>

enter image description here 現在的問題是，css沒有正確應用。請幫忙！

來源

2013-01-02 Nancy

煎茶觸摸有這個['badge']（http://docs.sencha.com/觸摸/ 2-1 /＃！/ api/Ext.Button）內置。他們在按鈕上添加一個''元素。你堅持什麼CSS部分？ – A1rPun

OK，這裏的版本1.x的Ext.NET你所要做的唯一事情是創造自己的傾斜固定的精靈形象，你可以用任何瀏覽器DevTool得到：

<%@ Page Language="C#" %> 

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Ext.NET Examples</title> 
    <style> 
     .fbNotification 
     { 
      background: none repeat scroll 0 0 orange!important; 
      border: 1px solid orange !important; 
      border-radius: 10px !important; 
      width: 18px !important; 
     } 

     .fbNotification .x-tip-body 
     { 
      font-size: 10px !important; 
     } 

     .fbNotification .x-tip-ml { 
      background: none; 
      padding-left: 3px !important;    
     } 

     .fbNotification .x-tip-tc, .fbNotification .x-tip-tl, .fbNotification .x-tip-tr, .fbNotification .x-tip-bc, .fbNotification .x-tip-bl, .fbNotification .x-tip-br, .fbNotification .x-tip-ml, .fbNotification .x-tip-mr 
     { 
      background: none; 
     } 

     .fbNotification .x-tip-anchor 
     { 
      /* Put here your own gif image of tip anchor sprite */ 
      background-image: none; 
     } 
    </style> 

    <script> 
     function createTooltp(cmp) { 
      var tooTip = new Ext.ToolTip({ 
       anchor: 'left', 
       target: cmp, 
       html: '10', 
       cls: 'fbNotification', 
       autoRender: true, 
       renderTo: Ext.getBody(), 
       autoHide: false, 
       shadow: false, 
       padding: 0, 
       width: 16, 
       shrinkWrap: 0, 
       anchorToTarget: true, 
       mouseOffset: [-4, -8], 
       listeners: { 
        beforehide: function() { 
         return false; 
        } 
       } 
      }); 

      tooTip.show(); 
     } 
    </script> 
</head> 
<body> 
    <form runat="server"> 
     <ext:ResourceManager runat="server" /> 

     <ext:Panel ID="Panel1" runat="server" Title="Panel with toolbars" Width="600" Height="300"> 
      <TopBar> 
       <ext:Toolbar runat="server"> 
        <Items> 
         <ext:Button ID="b1" runat="server" Icon="Add" StandOut="true" Text="Notifications"> 
          <Listeners> 
           <Render Fn="createTooltp"></Render> 
          </Listeners> 
         </ext:Button> 
         <ext:ToolbarFill /> 
         <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupAdd" Pressed="true" /> 
         <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupDelete" /> 
         <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupEdit" /> 
        </Items> 
       </ext:Toolbar> 
      </TopBar> 
     </ext:Panel> 
    </form> 
</body> 
</html>

來源

2013-01-06 07:44:53 Baidaly

最後一件事，工具提示隱藏在鼠標點擊。如何總是顯示工具提示？ – Nancy

好的，我已經更新了示例。 – Baidaly

更新：

這個答案適用於Ext.NET 2.x的

試試這個：

<%@ Page Language="C#" %> 

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> 

<!DOCTYPE html> 

<style> 
    .fbNotification { 
     background: none repeat scroll 0 0 orange !important; 
     border: 1px solid orange !important; 
     border-radius: 10px !important; 
     width: 18px !important; 
    } 

    .fbNotification .x-tip-body { 
     font-size: 10px !important; 
    } 
</style> 

<script> 
    var addNotification = function(cmp) { 
     var tip = Ext.create('Ext.tip.ToolTip', { 
      target: cmp, 
      html: '10', 
      autoRender: true, 
      renderTo: Ext.getBody(), 
      autoHide: false, 
      shadow: false, 
      padding: 0, 
      cls: 'fbNotification', 
      width: 16, 
      shrinkWrap: 0 
     }); 
     tip.show(); 
     tip.alignTo(cmp.el, 'tl-br?', [-14,16]); 
    } 
</script> 

<html> 
<head runat="server"> 
    <title>Ext.NET Examples</title> 
</head> 
<body> 
    <form runat="server"> 
     <ext:ResourceManager runat="server" /> 
     <ext:Panel 
      ID="Panel1" 
      runat="server" 
      Title="Panel with toolbars" 
      Width="600" 
      Height="300"> 
      <TopBar> 
       <ext:Toolbar runat="server"> 
        <Items> 
         <ext:Button runat="server" Icon="Add" StandOut="true" Text="Notifications"> 
          <Listeners> 
           <Click Handler="Ext.Msg.alert('Click','Click on Add');" /> 
           <Render Fn="addNotification"></Render> 
          </Listeners> 
          <ToolTips> 
           <ext:ToolTip runat="server" Html="StandOut button" /> 
          </ToolTips> 
         </ext:Button> 

         <ext:ToolbarFill /> 

         <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupAdd" Pressed="true" /> 
         <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupDelete" /> 
         <ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupEdit" /> 
        </Items> 
       </ext:Toolbar> 
      </TopBar> 
     </ext:Panel> 
    </form> 
</body> 
</html>

來源

2013-01-02 19:09:51 Baidaly

它適用於ext3嗎？ – Nancy

這個例子適用於Ext.NET 2，但它應該適用於Ext.NET 1.x的一些修改。 – Baidaly

編輯了這個問題。 – Nancy

Facebook像Ext3按鈕的通知圖標

回答

相關問題