怎么做一个弹出的公告 后面带个超链可以点击进入对应功能
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-07-07 13:06:52 |
👁️ 阅读: 2
要制作一个带超链接的弹出公告，可以按照浮生梦老师前端课程中的方法来实现。以下是完整的实现步骤：
## 1. 创建公告界面
首先创建一个公告界面，包含富文本控件用于显示带超链接的内容：
```lua
-- 创建父窗口
local parent = GUI:Win_Create("NoticeWindow", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建背景遮罩层（点击关闭）
local touchLayout = GUI:Layout_Create(parent, "TouchLayout", 0, 0, 1136, 640, false)
GUI:setTouchEnabled(touchLayout, true)
-- 创建公告背景
local noticeBG = GUI:Image_Create(parent, "NoticeBG", 510, 310, "res/private/announce/000030.png")
GUI:setAnchorPoint(noticeBG, 0.50, 0.50)
-- 创建内容区域
local contentLayout = GUI:Layout_Create(noticeBG, "ContentLayout", 369, 517, 700, 400, false)
GUI:setAnchorPoint(contentLayout, 0.50, 1.00)
-- 创建富文本控件显示公告内容（支持超链接）
local richText = GUI:RichText_Create(contentLayout, "NoticeRichText", 0, 0, "", 1000, 20, "#ffffff")
GUI:setAnchorPoint(richText, 0, 0.5)
```
## 2. 设置超链接内容
使用富文本控件显示带超链接的公告内容：
```lua
-- 设置带超链接的公告内容
-- 格式：<a href='功能ID'>链接文本</a>
local noticeContent = "<font color='#FF33FF'>系统公告：</font>"
.. "<font color='#FFFFFF'>点击</font>"
.. "<a href='1'><font color='#00FF00'>【进入商城】</font></a>"
.. "<font color='#FFFFFF'>购买道具</font>"
GUI:RichText_setString(richText, noticeContent)
```
## 3. 注册超链接点击事件
监听超链接点击事件，当用户点击时触发对应功能：
```lua
-- 注册超链接点击事件
SL:RegisterLUAEvent(LUA_EVENT_RICHTEXT_OPEN_URL, "NoticeSystem", function(linkData)
SL:Print("超链点击触发", linkData)
-- 根据超链接的href参数执行不同功能
if linkData == "1" then
SL:Print("打开商城功能")
-- 这里可以调用打开商城的函数
elseif linkData == "2" then
SL:Print("打开背包功能")
-- 这里可以调用打开背包的函数
end
end)
```
## 4. 服务端发送公告（示例）
服务端发送带超链接的公告消息：
```lua
-- 服务端脚本示例（QFunction-0.lua）
function triggerchat(actor, sMsg, chat,...)
-- 发送带超链接的公告消息
sendmsg(actor, 2, '{"Msg":"<font color=\'#FF33FF\'>系统公告：</font><font color=\'#FFFFFF\'>点击</font><a href=\'1\'><font color=\'#00FF00\'>【进入商城】</font></a><font color=\'#FFFFFF\'>购买道具</font>","Type":6}')
end
```
## 5. 完整示例
结合浮生梦老师前端课程中的公告系统，完整实现：
```lua
Notice = {}
function Notice.ShowHyperlinkNotice(content)
-- 创建公告窗口
local parent = GUI:Win_Create("HyperNotice", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建富文本控件
local richText = GUI:RichText_Create(parent, "HyperRichText", 100, 300, content, 900, 22, "#ffffff")
-- 设置关闭按钮
local closeBtn = GUI:Button_Create(parent, "btn_close", 500, 200, "res/public/1900000612.png")
GUI:Button_setTitleText(closeBtn, "关闭")
GUI:addOnClickEvent(closeBtn, function()
GUI:removeFromParent(parent)
end)
end
-- 注册超链接事件
SL:RegisterLUAEvent(LUA_EVENT_RICHTEXT_OPEN_URL, "NoticeHyperlink", function(linkID)
SL:Print("用户点击了超链接:", linkID)
-- 根据linkID执行对应功能
if linkID == "shop" then
-- 打开商城
SL:Print("执行打开商城操作")
elseif linkID == "bag" then
-- 打开背包
SL:Print("执行打开背包操作")
end
end)
```
## 关键点说明：
1. **必须使用 `GUI:RichText_Create`** 而不是 `GUI:RichTextFCOLOR_Create`，因为只有前者支持超链接
2. **超链接格式**：`<a href='功能ID'>链接文本</a>`
3. **事件监听**：使用 `LUA_EVENT_RICHTEXT_OPEN_URL` 事件监听超链接点击
4. **颜色设置**：可以在超链接中使用 `<font>` 标签设置文字颜色
这样用户点击公告中的超链接时，就会触发对应的功能跳转，实现公告与功能的联动。
← 返回问答库