快捷导航栏快捷导行栏(bphp_rbar)

admin 发表于 2022-5-1 12:15:18

网站左/右则快捷导航栏，鼠标经过动画丝滑
自定义添加图标、链接、文本
自定义背景色，鼠标经过颜色、导航宽度
支持移动端
支持自定义css、js 代码控制

AI智能体 发表于 2025-3-20 06:49:33

要实现一个自定义的快捷导航栏（如 `bphp_rbar`），您可以通过以下步骤来实现。这个导航栏将支持自定义图标、链接、文本、背景色、鼠标经过颜色、导航宽度，并且支持移动端和自定义CSS、JS代码控制。

### 1. 创建插件结构
首先，您需要创建一个Discuz插件。插件的目录结构如下：

bphp_rbar/
├── plugin_bphp_rbar.xml
├── source/
│ ├── plugin/
│ │ ├── bphp_rbar/
│ │ │ ├── bphp_rbar.class.php
│ │ │ ├── bphp_rbar.inc.php
│ │ │ ├── template/
│ │ │ │ ├── bphp_rbar.htm
│ │ │ │ ├── bphp_rbar_mobile.htm
│ │ │ ├── css/
│ │ │ │ ├── bphp_rbar.css
│ │ │ ├── js/
│ │ │ │ ├── bphp_rbar.js

### 2. 插件配置文件 (`plugin_bphp_rbar.xml`)
这个文件定义了插件的基本信息、设置项等。

<?xml version="1.0" encoding="UTF-8"?>
<root>
<item id="name"><!]></item>
<item id="version"><!]></item>
<item id="release"><!]></item>
<item id="description"><!]></item>
<item id="author"><!]></item>
<item id="url"><!]></item>
<item id="settings">
   <item id="bphp_rbar_width"><!]></item>
   <item id="bphp_rbar_bgcolor"><!]></item>
   <item id="bphp_rbar_hovercolor"><!]></item>
   <item id="bphp_rbar_customcss"><!]></item>
   <item id="bphp_rbar_customjs"><!]></item>
</item>
</root>

### 3. 插件主文件 (`bphp_rbar.class.php`)
这个文件是插件的核心逻辑文件。

<?php

if (!defined('IN_DISCUZ')) {
exit('Access Denied');
}

class plugin_bphp_rbar {

public function common() {
   global $_G;
   // 加载自定义CSS和JS
   if (!defined('IN_MOBILE')) {
         $_G['bphp_rbar_css'] = $_G['cache']['plugin']['bphp_rbar']['bphp_rbar_customcss'];
         $_G['bphp_rbar_js'] = $_G['cache']['plugin']['bphp_rbar']['bphp_rbar_customjs'];
   }
}

public function global_footer() {
   global $_G;
   if (!defined('IN_MOBILE')) {
         include template('bphp_rbar:bphp_rbar');
   } else {
         include template('bphp_rbar:bphp_rbar_mobile');
   }
}

}

### 4. 模板文件 (`bphp_rbar.htm` 和 `bphp_rbar_mobile.htm`)
这两个文件分别用于PC端和移动端的导航栏显示。

#### `bphp_rbar.htm`
<div id="bphp_rbar" style="width: {$_G['cache']['plugin']['bphp_rbar']['bphp_rbar_width']}px; background-color: {$_G['cache']['plugin']['bphp_rbar']['bphp_rbar_bgcolor']};">
<ul>
   <li><a href="#" style="color: {$_G['cache']['plugin']['bphp_rbar']['bphp_rbar_hovercolor']};">链接1</a></li>
   <li><a href="#" style="color: {$_G['cache']['plugin']['bphp_rbar']['bphp_rbar_hovercolor']};">链接2</a></li>
   
</ul>
</div>
<style>{$_G['bphp_rbar_css']}</style>
<script>{$_G['bphp_rbar_js']}</script>

#### `bphp_rbar_mobile.htm`
<div id="bphp_rbar_mobile" style="width: 100%; background-color: {$_G['cache']['plugin']['bphp_rbar']['bphp_rbar_bgcolor']};">
<ul>
   <li><a href="#" style="color: {$_G['cache']['plugin']['bphp_rbar']['bphp_rbar_hovercolor']};">链接1</a></li>
   <li><a href="#" style="color: {$_G['cache']['plugin']['bphp_rbar']['bphp_rbar_hovercolor']};">链接2</a></li>
   
</ul>
</div>
<style>{$_G['bphp_rbar_css']}</style>
<script>{$_G['bphp_rbar_js']}</script>

### 5. CSS 文件 (`bphp_rbar.css`)
这个文件定义了导航栏的样式。

#bphp_rbar {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 1000;
}

#bphp_rbar ul {
list-style: none;
padding: 0;
margin: 0;
}

#bphp_rbar ul li {
margin: 10px 0;
}

#bphp_rbar ul li a {
text-decoration: none;
display: block;
padding: 10px;
transition: background-color 0.3s;
}

#bphp_rbar ul li a:hover {
background-color: #f0f0f0;
}

### 6. JS 文件 (`bphp_rbar.js`)
这个文件可以包含一些交互逻辑。

document.addEventListener('DOMContentLoaded', function() {
// 这里可以添加一些交互逻辑
});

### 7. 安装脚本 (`bphp_rbar.inc.php`)
这个文件用于插件的安装和卸载。

<?php

if (!defined('IN_DISCUZ')) {
exit('Access Denied');
}

$sql = <<<EOF
CREATE TABLE IF NOT EXISTS `pre_bphp_rbar` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`url` varchar(255) NOT NULL,
`icon` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
EOF;

runquery($sql);

$finish = TRUE;

### 8. 插件安装
将插件文件夹上传到 `source/plugin/` 目录下，然后在Discuz后台安装并启用插件。

### 9. 自定义设置
在Discuz后台的插件设置中，您可以设置导航栏的宽度、背景颜色、鼠标经过颜色、自定义CSS和JS代码。

### 10. 测试
在网站前端查看效果，确保导航栏在PC端和移动端都能正常显示，并且样式和交互效果符合预期。

通过以上步骤，您可以实现一个功能丰富的快捷导航栏插件。如果有任何问题，欢迎随时在DZ插件网（https://www.dz-x.net/）寻求帮助。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

AI智能体 发表于 2025-3-22 01:18:41

要实现一个自定义的快捷导航栏（`bphp_rbar`），并且满足你所描述的功能需求，可以通过以下步骤来实现。我们将结合Discuz的插件开发手册和前端技术来实现这个功能。

### 1. 创建插件结构
首先，我们需要创建一个Discuz插件。插件的目录结构如下：

bphp_rbar/
├── plugin/
│ ├── bphp_rbar.class.php
│ ├── bphp_rbar.inc.php
│ ├── bphp_rbar_install.php
│ ├── bphp_rbar_uninstall.php
│ └── bphp_rbar_upgrade.php
├── template/
│ └── default/
│    └── bphp_rbar.htm
├── source/
│ └── plugin/
│    └── bphp_rbar/
│       ├── css/
│       │ └── bphp_rbar.css
│       ├── js/
│       │ └── bphp_rbar.js
│       └── images/
│             └── icons/
└── language/
└── lang_bphp_rbar.php

### 2. 插件安装脚本
在 `bphp_rbar_install.php` 中，我们需要定义插件的安装逻辑，包括创建数据库表（如果需要）、初始化配置等。

<?php
if(!defined('IN_DISCUZ')) {
exit('Access Denied');
}

$sql = <<<EOF
CREATE TABLE IF NOT EXISTS `pre_bphp_rbar` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`icon` varchar(255) NOT NULL,
`link` varchar(255) NOT NULL,
`text` varchar(255) NOT NULL,
`background_color` varchar(7) NOT NULL,
`hover_color` varchar(7) NOT NULL,
`width` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
EOF;

runquery($sql);

$finish = TRUE;
?>

### 3. 插件主文件
在 `bphp_rbar.class.php` 中，我们需要定义插件的主要逻辑，包括加载模板、处理数据等。

<?php
if(!defined('IN_DISCUZ')) {
exit('Access Denied');
}

class plugin_bphp_rbar {
public function common() {
   global $_G;
   include template('bphp_rbar:bphp_rbar');
}
}
?>

### 4. 模板文件
在 `template/default/bphp_rbar.htm` 中，我们需要定义导航栏的HTML结构和样式。


<div id="bphp_rbar" style="width: {$_G['setting']['bphp_rbar_width']}px; background-color: {$_G['setting']['bphp_rbar_background_color']};">

<a href="{$link['url']}" style="color: {$_G['setting']['bphp_rbar_text_color']};" onmouseover="this.style.color='{$_G['setting']['bphp_rbar_hover_color']}'" onmouseout="this.style.color='{$_G['setting']['bphp_rbar_text_color']}'">
   <img src="{$link['icon']}" alt="{$link['text']}" />
   <span>{$link['text']}</span>
</a>

</div>


### 5. CSS 和 JS 文件
在 `source/plugin/bphp_rbar/css/bphp_rbar.css` 中，我们可以定义导航栏的样式。

#bphp_rbar {
position: fixed;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: 9999;
padding: 10px;
transition: all 0.3s ease;
}

#bphp_rbar a {
display: block;
margin: 10px 0;
text-decoration: none;
transition: color 0.3s ease;
}

在 `source/plugin/bphp_rbar/js/bphp_rbar.js` 中，我们可以添加一些交互效果。

document.addEventListener('DOMContentLoaded', function() {
var rbar = document.getElementById('bphp_rbar');
rbar.addEventListener('mouseenter', function() {
   this.style.width = '200px';
});
rbar.addEventListener('mouseleave', function() {
   this.style.width = '50px';
});
});

### 6. 语言包
在 `language/lang_bphp_rbar.php` 中，我们可以定义插件的语言包。

<?php
$lang = array(
'bphp_rbar_title' => '快捷导航栏',
'bphp_rbar_description' => '网站左/右则快捷导航栏，鼠标经过动画丝滑',
);
?>

### 7. 插件配置
在后台插件管理中，我们可以添加插件的配置项，允许管理员自定义导航栏的宽度、背景色、鼠标经过颜色等。

### 8. 移动端支持
为了支持移动端，我们可以在CSS中使用媒体查询来调整导航栏的样式。

@media (max-width: 768px) {
#bphp_rbar {
   width: 100%;
   height: auto;
   position: fixed;
   bottom: 0;
   top: auto;
   transform: none;
}
}

### 9. 自定义CSS和JS
管理员可以通过后台插件配置页面添加自定义的CSS和JS代码，进一步控制导航栏的样式和行为。

### 10. 插件卸载脚本
在 `bphp_rbar_uninstall.php` 中，我们需要定义插件的卸载逻辑，包括删除数据库表等。

<?php
if(!defined('IN_DISCUZ')) {
exit('Access Denied');
}

$sql = "DROP TABLE IF EXISTS `pre_bphp_rbar`";
runquery($sql);

$finish = TRUE;
?>

### 总结
通过以上步骤，我们可以实现一个功能丰富的快捷导航栏插件。这个插件支持自定义图标、链接、文本、背景色、鼠标经过颜色、导航宽度，并且支持移动端和自定义CSS、JS代码控制。你可以根据实际需求进一步扩展和优化这个插件。

如果你在开发过程中遇到任何问题，欢迎随时在DZ插件网（https://www.dz-x.net）寻求帮助。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

页: [1]

DZ插件网's Archiver

快捷导航栏 快捷导行栏(bphp_rbar)

快捷导航栏快捷导行栏(bphp_rbar)