06HUI - 底部导航及新消息提示组件(hui-footer-icons)

2024-01-12 07:40

本文主要是介绍06HUI - 底部导航及新消息提示组件(hui-footer-icons),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果图

在这里插入图片描述

底部导航dom结构

<div id="hui-footer"><a href="javascript:hui.toast('首页');" id="nav-home"><div class="hui-footer-icons hui-icons-home"></div><div class="hui-footer-text">首页</div></a><a href="javascript:hui.toast('新闻');" id="nav-news"><div class="hui-footer-icons hui-icons-news"></div><div class="hui-footer-text">新闻</div></a><div style="width:20%; text-align:center;" class="hui-fl"><img src="img/logo_footer.png" height="44" /></div><a href="javascript:hui.toast('社区');" id="nav-forum"><div class="hui-footer-icons hui-icons-forum"></div><div class="hui-footer-text">社区</div></a><a href="javascript:hui.toast('我的');" id="nav-my"><div class="hui-footer-icons hui-icons-my"></div><div class="hui-footer-text">我的</div></a>
</div>

说明:底部导航内导航元素默认宽度为20%,可以调用图标库中的图片和自定义图标。

使用 hui(‘id选择器’).pointMsg() 函数实现新消息提醒

功能:新消息提醒
参数:
1、msg 消息内容(可选参数:数字或者文本,默认 false),说明:不设置参数或者false则展示一个红色点,设置数字则展示包含数字的圆点消息框,设置文本展示圆角消息框;
2、color 背景颜色,可省参数,默认值 #ED2D22;
3、size 消息文本字体大小,可省参数,默认值 8px;
4、top 顶部距离,可省参数,默认值 0px;
5、right 右侧距离,可省参数,默认值 8px;
返回值: 无
批量操作:不支持

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI - 底部导航</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header"><div id="hui-back"></div><h1>HUI - 底部导航</h1>
</header>
<div class="hui-wrap"><div class="hui-common-title" style="margin-top:15px;"><div class="hui-common-title-line"></div><div class="hui-common-title-txt">底部导航演示</div><div class="hui-common-title-line"></div></div><div class="hui-common-text" style="padding:22px;"><h2 class="hui-primary-txt">说明 : </h2><p>效果请见底部,您也可以使用首页的遮盖模式 ^_^<br /></p></div>
</div>
<div id="hui-footer"><a href="javascript:hui.back();" id="nav-home"><div class="hui-footer-icons hui-icons-home"></div><div class="hui-footer-text">首页</div></a><a href="javascript:hui.toast('新闻');" id="nav-news"><div class="hui-footer-icons hui-icons-news"></div><div class="hui-footer-text">新闻</div></a><div style="width:20%; text-align:center;" class="hui-fl"><img src="../img/logo_footer.png" height="44" "hui.back();" /></div><a href="javascript:hui.toast('社区');" id="nav-forum"><div class="hui-footer-icons hui-icons-forum"></div><div class="hui-footer-text">社区</div></a><a href="javascript:hui.toast('我的');" id="nav-my"><div class="hui-footer-icons hui-icons-my"></div><div class="hui-footer-text">我的</div></a>
</div>
<script src="../js/hui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
hui('#nav-my').pointMsg();
hui('#nav-news').pointMsg('hot', null, null, null, '1px');
hui('#nav-forum').pointMsg(8);
</script>
</body>
</html>

这篇关于06HUI - 底部导航及新消息提示组件(hui-footer-icons)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/597207

相关文章

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

mss32.dll文件丢失怎么办? 电脑提示mss32.dll丢失的多种修复方法

《mss32.dll文件丢失怎么办?电脑提示mss32.dll丢失的多种修复方法》最近,很多电脑用户可能遇到了mss32.dll文件丢失的问题,导致一些应用程序无法正常启动,那么,如何修复这个问题呢... 在电脑常年累月的使用过程中,偶尔会遇到一些问题令人头疼。像是某个程序尝试运行时,系统突然弹出一个错误提

电脑提示找不到openal32.dll文件怎么办? openal32.dll丢失完美修复方法

《电脑提示找不到openal32.dll文件怎么办?openal32.dll丢失完美修复方法》openal32.dll是一种重要的系统文件,当它丢失时,会给我们的电脑带来很大的困扰,很多人都曾经遇到... 在使用电脑过程中,我们常常会遇到一些.dll文件丢失的问题,而openal32.dll的丢失是其中比较

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB

电脑提示msvcp90.dll缺少怎么办? MSVCP90.dll文件丢失的修复方法

《电脑提示msvcp90.dll缺少怎么办?MSVCP90.dll文件丢失的修复方法》今天我想和大家分享的主题是关于在使用软件时遇到的一个问题——msvcp90.dll丢失,相信很多老师在使用电脑时... 在计算机使用过程中,可能会遇到 MSVCP90.dll 丢失的问题。MSVCP90.dll 是 Mic

电脑开机提示krpt.dll丢失怎么解决? krpt.dll文件缺失的多种解决办法

《电脑开机提示krpt.dll丢失怎么解决?krpt.dll文件缺失的多种解决办法》krpt.dll是Windows操作系统中的一个动态链接库文件,它对于系统的正常运行起着重要的作用,本文将详细介绍... 在使用 Windows 操作系统的过程中,用户有时会遇到各种错误提示,其中“找不到 krpt.dll”

kotlin中的行为组件及高级用法

《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件:WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

Spring Boot整合消息队列RabbitMQ的实现示例

《SpringBoot整合消息队列RabbitMQ的实现示例》本文主要介绍了SpringBoot整合消息队列RabbitMQ的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的... 目录RabbitMQ 简介与安装1. RabbitMQ 简介2. RabbitMQ 安装Spring

springboot rocketmq配置生产者和消息者的步骤

《springbootrocketmq配置生产者和消息者的步骤》本文介绍了如何在SpringBoot中集成RocketMQ,包括添加依赖、配置application.yml、创建生产者和消费者,并展... 目录1. 添加依赖2. 配置application.yml3. 创建生产者4. 创建消费者5. 使用在