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

相关文章

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

Python运行中频繁出现Restart提示的解决办法

《Python运行中频繁出现Restart提示的解决办法》在编程的世界里,遇到各种奇怪的问题是家常便饭,但是,当你的Python程序在运行过程中频繁出现“Restart”提示时,这可能不仅仅是令人头疼... 目录问题描述代码示例无限循环递归调用内存泄漏解决方案1. 检查代码逻辑无限循环递归调用内存泄漏2.

C#TextBox设置提示文本方式(SetHintText)

《C#TextBox设置提示文本方式(SetHintText)》:本文主要介绍C#TextBox设置提示文本方式(SetHintText),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录C#TextBox设置提示文本效果展示核心代码总结C#TextBox设置提示文本效果展示核心代

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J

在Android平台上实现消息推送功能

《在Android平台上实现消息推送功能》随着移动互联网应用的飞速发展,消息推送已成为移动应用中不可或缺的功能,在Android平台上,实现消息推送涉及到服务端的消息发送、客户端的消息接收、通知渠道(... 目录一、项目概述二、相关知识介绍2.1 消息推送的基本原理2.2 Firebase Cloud Me

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤

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

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

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

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