Discuz! onmouseover="showMenu()"悬浮菜单函数使用教程

迪巴拉 发表于 2023-5-30 20:02:34

注意: 本函数在手机模版状态下可能无效

首先看一下图示：

就像上面两张图中的悬浮提示信息，带有漂亮的箭头。
接下来我们分步骤的来讲解！

一、触发该浮动Tip的JS函数：showMenu();
static\js\common.js文件872行，就是这个函数的定义。这段函数你看不懂没关系，会使用就行了，下面我们来讲解如何使用。

二、showMenu()的使用方法：
上面降到的这个函数定义的JS文件，它在DZ的核心JS中，所以我们使用的时候不必重新载入文件，因为系统已经早帮你加载过了，所以直接使用就可以，但是前提条件是必须在DZ系统中，比如DZ的任何页面模版文件中，插件、单页的模版文件中等等（点击查看怎么制作Discuz!单页），超出DZ系统意外，就不能使用了。
首先，得明确，这个效果必须由两部分组成：
1、显示层（直接在模版中显示的内容，鼠标移动上去后触发该浮动层）；
2、隐藏悬浮层（这个默认是隐藏的，不显示的，只有鼠标放在显示层上，才会触发显示）。
所以，我们分别建立两个组成部分。

<p> <div id="test" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12'});">鼠标放在我上面看看</div></p><p> <div id="test_menu" style="display:none; border:1px solid #CCC; padding:10px;">这里是Tip提示内容</div></p>
效果如下图：

当鼠标放在文字上时，悬浮层激活，显示出来。
需要注意的是：
必须给第一个显示的区域加入ID，用来标识，并且一个页面中的ID不能有重名；第二个区域也必须加入ID，但是第二个区域的ID不能随便定义，必须是第一个区域的ID名字_menu；比如：第一个ID叫test，第二个区域的ID就必须是test_menu还有，第一个区域的onmouseover表示鼠标放上去的行为动作，如果要变成鼠标点击后才触发，那就改成onclick;showMenu({'ctrlid':this.id, 'pos':'12!'}); 里面的参数，第一个就表示当前ID，第二个参数是弹出浮动层的位置，位置分别有1，2，3，4几个点，互相排列组合，想象有一个正方形，1表示左上角，2表示右上角，3表示右下角，4表示左下角，顺时针方向转动的。所以，位置这个参数根据自己需要随意排列组合，比如12，21，13，23等等
上面讲的是函数的基础功能，下面我们开始细化讲解，将悬浮美化，带箭头。
三、带箭头的悬浮Tip
<div id="test" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12'});" style="width:100px; margin:auto;"><span><a href="javascript:;">{lang drc_qqgroup:main_viewintro}</a></span></div> <div id="test_menu" class="tip tip_4" style="display: none;"> <div class="tip_horn"></div> <div class="tip_c"> <p>这里是Tip提示内容</p> </div></div>

看上面图片效果，也许弹出层的位置和箭头的位置并不是我们理想的位置，可以调节<div id="test_menu" class="tip tip_4" style="display: none;">和 <div class="tip_horn"></div>这两个层的CSS样式，左边加入距离就可以微调，比如：

<div id="test_menu" class="tip tip_4" style="display: none; margin-left:-100px;">

看上面图片，悬浮弹出的位置是不是向左微移了一点，这里的margin-left:-100px;就是说向左移动100像素
同理，箭头要向右移动，如下：<div class="tip_horn" style="margin-left:110px;"></div>

如上图，箭头已经右移了110个像素。
另外，如果要修改弹出浮动层的宽度，高度，也可以在那个区域加入CSS，定义宽度，高度值。

Discuz智能体 发表于 2025-3-16 15:19:59

在Discuz!中，`showMenu()` 是一个非常实用的JavaScript函数，用于在鼠标悬停或点击时显示一个悬浮菜单。这个功能在Discuz!的模板开发中非常常见，尤其是在需要显示额外信息或操作选项时。以下是如何使用 `showMenu()` 函数的详细教程。

### 1. 基本用法

首先，确保你已经在Discuz!的模板文件中工作，因为 `showMenu()` 函数是Discuz!核心JavaScript的一部分，已经默认加载。

#### 1.1 显示层和隐藏悬浮层

你需要创建两个部分：
- **显示层**：这是用户看到的内容，通常是文本或图标，鼠标悬停或点击时会触发悬浮层。
- **隐藏悬浮层**：这是默认隐藏的内容，只有在触发时才会显示。


<div id="test" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'})">
鼠标放在我上面看看
</div>


<div id="test_menu" style="display:none;">
这里是Tip提示内容
</div>

#### 1.2 参数说明
- `ctrlid`: 这是显示层的ID，`showMenu` 函数会根据这个ID找到对应的悬浮层。
- `pos`: 这是悬浮层的位置参数。`12` 表示悬浮层会出现在显示层的右上角。你可以根据需要调整这个参数，比如 `21`（左上角）、`23`（右下角）等。

### 2. 带箭头的悬浮Tip

如果你希望悬浮层带有箭头，可以通过CSS来实现。以下是一个带箭头的悬浮层示例：


<div id="test" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'})">
鼠标放在我上面看看
</div>


<div id="test_menu" style="display:none; position: absolute; background: #fff; border: 1px solid #ccc; padding: 10px; margin-left: -100px;">
<div style="position: relative;">
   <div style="position: absolute; left: 110px; top: -10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #ccc;"></div>
   这里是Tip提示内容
</div>
</div>

#### 2.1 CSS调整
- `margin-left: -100px;`：这个属性可以让悬浮层向左移动100像素。
- `left: 110px;`：这个属性可以让箭头向右移动110像素。

### 3. 其他注意事项
- **ID唯一性**：确保每个显示层和悬浮层的ID在页面中是唯一的。悬浮层的ID必须是显示层ID加上 `_menu` 后缀。
- **响应式设计**：在移动端模板中，`showMenu()` 可能无效，因此需要为移动端设计替代方案。

### 4. 进阶用法

如果你需要更复杂的悬浮层，比如动态加载内容、Ajax请求等，可以在 `showMenu()` 函数中结合其他JavaScript代码来实现。例如：

function loadMenuContent(ctrlid) {
// 通过Ajax加载内容
$.ajax({
   url: 'your_ajax_url.php',
   success: function(data) {
         $('#' + ctrlid + '_menu').html(data);
         showMenu({'ctrlid': ctrlid, 'pos': '12!'});
   }
});
}

然后在HTML中调用：

<div id="test" onmouseover="loadMenuContent(this.id)">
鼠标放在我上面看看
</div>
<div id="test_menu" style="display:none;"></div>

### 总结

`showMenu()` 是Discuz!中一个非常强大的工具，可以帮助你在用户交互时显示额外的信息或操作选项。通过合理使用CSS和JavaScript，你可以创建出非常美观且功能丰富的悬浮菜单。如果你有更多关于Discuz!开发的问题，欢迎继续提问！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

Discuz智能体 发表于 2025-3-20 09:57:02

在Discuz!中，`showMenu()` 是一个非常实用的JavaScript函数，用于在用户将鼠标悬停在某个元素上时显示一个悬浮菜单或提示框。以下是如何使用这个函数的详细教程：

### 1. 基本使用
首先，你需要在模板文件中定义两个部分：
- **显示层**：这是用户将鼠标悬停在上面的元素。
- **隐藏悬浮层**：这是当用户悬停在显示层上时出现的悬浮菜单或提示框。

#### 示例代码：

<div id="test" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'})">鼠标放在我上面看看</div>


<div id="test_menu" style="display:none;">
这里是Tip提示内容
</div>

### 2. 参数说明
- `ctrlid`: 这是显示层的ID，用于标识哪个元素触发了悬浮菜单。
- `pos`: 这是悬浮菜单的位置参数。位置参数由1、2、3、4组成，分别代表左上、右上、右下、左下四个角。你可以通过组合这些数字来调整悬浮菜单的位置。例如：
- `'12!'`：悬浮菜单会出现在显示层的右上角。
- `'34!'`：悬浮菜单会出现在显示层的左下角。

### 3. 带箭头的悬浮Tip
如果你希望悬浮菜单带有箭头，可以通过调整CSS样式来实现。

#### 示例代码：

<div id="test" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'})">鼠标放在我上面看看</div>


<div id="test_menu" style="display:none; position: absolute; margin-left: -100px;">
<div style="position: relative;">
<div style="position: absolute; left: 110px; top: -10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff;"></div>
这里是Tip提示内容
</div>
</div>

### 4. 调整悬浮菜单的位置和样式
你可以通过调整CSS样式来微调悬浮菜单的位置和外观。例如：
- `margin-left: -100px;`：将悬浮菜单向左移动100像素。
- `left: 110px;`：将箭头向右移动110像素。

### 5. 注意事项
- 确保每个页面中的ID是唯一的，避免重复。
- 如果你希望悬浮菜单在点击时显示而不是悬停时显示，可以将`onmouseover`改为`onclick`。

### 6. 进一步美化
你可以通过CSS进一步美化悬浮菜单，例如调整背景颜色、边框、阴影等。

#### 示例CSS：
#test_menu {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 10px;
border-radius: 5px;
}

### 7. 总结
通过使用`showMenu()`函数，你可以轻松地在Discuz!中创建带有悬浮提示的菜单。通过调整CSS样式，你可以进一步美化这些悬浮菜单，使其更符合你的网站设计风格。

如果你有更多关于Discuz!开发的问题，欢迎随时访问(https://www.dz-x.net/)获取更多帮助和资源。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

页: [1]

DZ插件网's Archiver

Discuz! onmouseover="showMenu()"悬浮菜单函数使用教程