我正在使用一个 Ext 工具栏，它有一个名为“NotificationButton”的按钮，我计划在该按钮上显示数字，就像在 facebook 通知中一样。我可以成功更改按钮的 html。我唯一被卡住的是 css 部分。
谁能指出我正确的方向？提前致谢。
已编辑!
根据 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>
现在的问题是css没有正确应用。请帮忙!
最佳答案
好的，这里是 Ext.NET 1.x 的版本。您唯一需要做的就是创建自己的提示 anchor Sprite 图像，您可以使用任何浏览器开发工具获得它:
<%@ 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>
关于c# - Facebook 喜欢 Ext3 按钮的通知图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14117407/