Weelnav原来还可以做这种效果-旋转Tab展示

举报
夜郎king 发表于 2025/03/24 13:00:46 2025/03/24
【摘要】 本文重点讲解在Html5中如何结合Wheelnav这个组件来进行动态标签页的展示，在实现动态导航切换的同时，还可以实现页面的动态切换。博客首先讲解了如何进行页面的扩展，然后通过实际编码以实例的形式进行展示如何实现。

​

目录


前言

一、动态标签页切换的实现

1、依赖资源

2、新建html页面


 3、设置静态tab的内容

4、创建动态tab展示组件

二、可视化成果以及调用过程讲解

1、成果展示

2、调用过程分析

三、总结


前言

        不知道在看博客的朋友是否在平时遇到过这种要求，传统的标签页虽然也能满足我们的页面效果，但是传统的Tab页没有动态的效果，用户交互的趣味性不强，传统的网页界面中，Tab页的展示形式大致如下所示：

​

        这是一种从左到右依次排列的选项卡，用户操作时使用鼠标点击选项卡的标签部分实现动态的切换。 应该说这种操作方式中规中矩，传统的标签页都是这样做的。当然，除了这种左右切换的标签页，还有另外一种布局方式也是比较常见，即上下结构的标签页，效果如下所示：

        除了上述这两种方式的选项卡，还有其它方式的展示方式吗？有没有一些会动，可以带一些动态效果的展现方式呢？ 比如下面这种的，可以旋转带动画的展现方式。如下下面这种：

        由于显示功能有限，没有很好的将动态切换的效果展示出来。实际效果比上面的还要好看。如果看过我之前的博客的朋友应该会看到一个熟悉的身影，就是动态切换的组件-wheelnav。与常规的标签页展现效果不同，这里我们分享一个结合Wheelnav的动态标签页展示效果。

        本文重点讲解在Html5中如何结合Wheelnav这个组件来进行动态标签页的展示，在实现动态导航切换的同时，还可以实现页面的动态切换。博客首先讲解了如何进行页面的扩展，然后通过实际编码以实例的形式进行展示如何实现。通过本文，您可以掌握如何进行wheelnav动态标签页的制作，同时可以掌握如何调整相关的参数，让它更加漂亮。如果您对这种效果有兴趣，不妨来本博客看一下，欢迎批评指正。

一、动态标签页切换的实现

        其实wheelnav这款组件本身是不带标签页展示的功能的，但是我们要借助它的动态切换的功能来实现标签页的动态展示，因此还需要借助一个动态的标签展示库。本节主要讲解如何在网页上实现动态的标签切换效果，主要以代码的展示为主。

1、依赖资源

        首先在电脑的任意盘符创建一个html文件，然后在页面中会引用到一下的一些资源。这里将需要使用的外部资源进行一个详细的说明。

序号 类别 资源目录 说明
1 css wheelizate.tab.min.css 标签页的css样式文件
2 css theme.min.css 主题css样式文件
3 javascript jquery-1.11.3.min.js jquery 控制文件
4 javascript raphael.min.js raphael.min.js
5 javascript raphael.icons.min.js 项目引用的图标文件
6 javascript wheelnav.min.js wheelnav导航文件
7 javascript wheelizate.tab.min.js 重要的导航标签页的js实现文件
8 css bootstrap.min.css bootstrap的样式
9 css demo.css 示例css
10 javascript bootstrap.min.js bootstrap的脚本文件







        上面需要引用的文件，统一放在lib的目录下：

2、新建html页面

        首先在目录中新建一个html页面，同时在页面中引入上面的css、javascript等资源。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Wheelizate Tabs 示例" />
    <meta name="keywords" content="tabbed navigation wheel wheelnav.js" />
    <meta name="author" content="yelangking" />
    <link rel="shortcut icon" href="lib/wheelizate-tabs-logo.png">
    <title>Wheelizate Tabs实例，动态切换页面</title>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

        然后在网页中引入样式文件和脚本文件，代码追加到head标签当中，为了方便引入，直接将所有的依赖都直接引入进来，详细代码如下所示：

<!--CSS for your project-->
<link href="lib/wheelizate.tab.min.css" rel="stylesheet">
<link href="lib/theme.min.css" rel="stylesheet">

<!--JS for your project-->
<script src="lib/jquery-1.11.3.min.js"></script>
<script src="lib/raphael.min.js"></script>
<script src="lib/raphael.icons.min.js"></script>
<script src="lib/wheelnav.min.js"></script>
<script src="lib/wheelizate.tab.min.js"></script>

<!--CSS for demo-->
<link href="lib/bootstrap.min.css" rel="stylesheet">
<link href="lib/demo.css" rel="stylesheet">
<!--JS for demo-->
<script src="lib/bootstrap.min.js"></script>

 3、设置静态tab的内容

        为了实现在页面中显示动态标签页的效果，需要将tab页定义到html结构中，我们在上面的 <div class="container"></div>标签中追加tab内容，这里我们以一些中文的优秀小说代表为展示，分别展示了路遥先生的《平凡的世界》、余华先生的《活着》、豆豆的《遥远的救世主》等等，假定的场景是有四个标签页，然后通过wheelnav来创建可旋转的标签，点击不同的标签实现动态切换不同的内容来展示。下面我们提供一下的文本内容，文中的内容有部分是来源于网络。由于都是静态文本，可以根据自己的需要进行灵活的调整，甚至以后可以做成wiki百科的样例，直接是一个可以发布的网页。

<div id="tab">
   <div>
      <div>
		<h2>Works with JavaScript, jQuery, HTML5 data attributes or WordPress</h2>
			<p class="text-muted">HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。</p>
			<p class="text-primary">自1990年以来，HTML就一直被用作万维网的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将文字，图形、动画、声音、表格、链接、影像等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。</p>
			<p class="text-success">万维网（world wide web，简称www）上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。</p>
			<p class="text-info">每个人都有一个死角， 自己走不出来，别人也闯不进去。</p>
			<p class="text-warning">每个人都有一个死角， 自己走不出来，别人也闯不进去。</p>
			<p class="text-danger">每个人都有一个死角， 自己走不出来，别人也闯不进去。</p>
                    
		</div>
        <div>
            <h2>平凡的世界-路遥</h2>
			<p class="text-muted">《平凡的世界》是从1975年开始创作的，小说手稿原名为《普通人的道路》 [17]。而20世纪80年代中后期的文化背景是各种文学新思潮风起云涌，现代派、意识流等文学观念风靡一时，文学创作在形式和技巧上的求变求新令人目不暇接。与此相反，传统现实主义创作却受到“冷落” 。甚至有批评家认为，路遥的另一部小说《人生》的现实主义创作手法是落伍的，但路遥仍然坚持创作完成了这部小说。</p>
			<p class="text-primary">路遥三年准备、三年创作，为了扩充视野、掌握资料，他进行了大量的阅读，包括近百部长篇小说，前后近十年的报纸以及其他相关书籍，过着“早晨从中午开始”的生活，同时，他还奔波于社会各阶层体验生活。第一部初稿的写作是在一个偏僻的煤矿医院开始的，从他的创作随笔《早晨从中午开始》可以看到他对文学事业执着的信心和付出的代价：“写作整个地进入狂热状态。身体几乎不存在；生命似乎就是一种纯粹的精神形式，日常生活变为机器人性质”。第二部初稿的写作是在黄土高原腹地的一个偏僻小县城进行的，因为生活没有规律，路遥身体严重透支，最后病倒了。后来吃了百余副汤药，身体略有恢复，他依靠一股精神力量，继续写作。第三部的初稿改在榆林宾馆进行。1988年5月25日，路遥终于完成了《平凡的世界》的全部创作。</p>
			<p class="text-success">《平凡的世界》还传达出一种温暖的情怀。一是作者对作品中的人物寄予了同情心，对普通百姓的生活方式做到了极大的尊重和认同。不要说作品的主人公，就是作品中的一些消极人物，如乡土哲学家田福堂，游手好闲的王满银，善于见风使舵的孙玉亭，甚至傻子田二的身上，都直接或间接地折射出人性的光彩。二是作品处处展现温暖的亲情与友情，是一部温暖人心的小说。小说中有大量关于人间亲情的描写，其中最典型的莫过于孙玉厚一家了——孙玉厚勤劳朴素、忍辱负重；他的儿女孙少安、孙少平、孙兰香等自强自立、善解人意、善于帮助别人。小说还书写了美好的同学之情、朋友之情、同事之情、乡邻之情等人间美好的情感。三是作品中的爱情写得很美，被赋予无比美好的内涵和想象空间。这在上世纪八十年代后期“无性不成书”的长篇小说创作风气中是难能可贵的。如孙少平和田晓霞在杜梨树下近乎柏拉图式的恋爱，就写得很纯美，让人为之感动。</p>
			<p class="text-info">作品的时间跨度从1975年初到1985年，它全景式地反映了这十年间我国城乡社会生活的巨大历史性变迁。如此庞大的工程，路遥采用了“三线组合法”，即在情节的发展和人物的活动上安排了三条线索，三条线索都以时间为序，并将这十年间我国所发生的一些重大的历史事件也列入其中。</p>
			<p class="text-warning">秉笔直书的现实主义笔法和路遥“为人民”的创作哲学相结合，形成了小说雄浑壮丽的美学格局。《平凡的世界》仿佛一部恢弘的史诗，凝聚着雄浑的社会交响、宽阔的人性胸怀、绚丽的人生色彩和丰厚坚实的苦难底蕴，老辈人厚重而沉实的人生苦难，年轻人浪漫瑰丽的人生想象和朝气蓬勃的行动能力，以及从生活中得来的人生思考都构成了这种美学格局的一部分，成就了这样一个犹如黄土高原般起伏变化、又如大河般壮阔雄浑的文本。</p>
	</div>
    <div>
		<h2>活着-余华</h2>
			<p class="text-info">活着》主要讲述了20世纪40年代，福贵（葛优饰）因嗜赌成性导致家破人亡，妻子家珍（巩俐饰）带着孩子离开，福贵戒赌后家珍回归，一家人在贫困中相依为命。内战期间，福贵和春生（郭涛饰）被国民党充军，后被解放军俘虏，最终释放回家。20世纪50年代，福贵因家境贫寒被定为城镇贫民，逃过一劫，而龙二（倪大红饰）因地主身份被枪决。大跃进时期，福贵的儿子有庆（董飞饰）被区长（即春生）意外撞死。文革中，春生遭迫害，妻子自杀，他将积蓄交给福贵后企图自杀，但被家珍劝住。凤霞（刘天池饰）与二喜（姜武饰）结婚后生下馒头，但因产后大出血去世。影片最后，福贵、家珍、二喜和馒头在凤霞和有庆墓前祭奠，福贵对馒头表达了对未来的希望和憧憬，相信日子会越来越好</p>
			<p class="text-danger">电影《活着》改编自余华的同名小说。张艺谋选择余华的小说来拍摄，是因为这个题材正符合他想“向过去的自己挑战”的愿望。张艺谋最初看中的是余华的另一篇小说《河边的错误》，因为想全面了解他，所以张艺谋要求看他所有作品。余华就给了张艺谋《活着》的清样。张艺谋看完了这篇小说后，被小说写出的中国人身上那种默默承受的韧性和顽强求生存的精神而感动。张艺谋决定拍《活着》之后，花了将近半年的时间和剧组主创人员讨论故事、人物、影片结构和语言。最后张艺谋确定用最平常的方法讲一个平常家庭的故事 [2]。</p>
			<p class="text-info">在《活着》剧本大致修改方案敲定后，导演张艺谋与副导演王斌开始讨论主角与配角演员的选择，首先是男主角，因姜文有自己的事而无法考虑，李保田的脸过于沧桑，不适合演年轻时代的福贵，张艺谋提出葛优是否能够当选此角，经过讨论，王斌和张艺谋达成共识，因为不想电影主题太过沉重，葛优得天独厚的形象，本身具备了颇多幽默色彩，会使影片增色不少，所以决定选择葛优为男主 [28]，而女主角的人选则非巩俐莫属</p>
			<p class="text-warning">王斌与施润玖在拍摄前开始物色配角，施润玖对戏剧学院的人才情况了然于心，向《活着》剧组推荐了该校毕业的倪大宏和郭涛，而王斌因曾到戏剧学院小剧场看一出实验小话剧《思凡》，剧中女主角饰演者刘天池的表演吸引了他的注意，尤其是那一双会说话的眼睛颇有戏感，使其联想到凤霞是个哑巴，正好需要用眼睛说话，所以选她作为大凤霞的扮演者。随后，王斌与施润玖一起去电影学院演员资料库选择其配角，正巧遇见姜文的弟弟姜武进来找人。王斌与姜武在此之前已互相认识，且对他在韩刚执导的《葛老爷子》一片中的表演颇为赞赏，于是将其作为配角备选人，而这几位配角人选均被张艺谋相中，在《活着》一片中出演大配角。</p>
		</div>
         <div>
			<h2 class="text-warning">遥远的救世主-豆豆</h2>
			<p class="text-info">该小说讲述了男主角丁元英与女主角芮小丹之间刻骨铭心的爱情故事。他们的爱情不是享受私欲的爱情，而是悲悯人世的爱情，他们的爱里包含着音乐之情、文化之思、社会之观、国家之爱，体现出他们爱情品格的超越与传奇色彩。该小说不仅向读者展现了一种超尘脱俗、卓尔不群的爱情品格与人生境界，而且还从文化属性上对人物的行为逻辑与价值理念进行解读，这使小说文本中又多了一层文化与社会的厚重，以及对人性与道德的深深思考。</p>
			<p class="text-danger">20世纪90年代中期，中国北方小城——古城女刑警芮小丹受好友肖亚文之托，为其前老板丁元英在古城租一套临时住房。丁元英利用德国金融公司的资金和自己的头脑运作私募基金公司，在中国股市进行了掠夺式的经营。可就在私募基金盈利的最高点，丁元英突然以冻结自己资金三年的代价宣布终止合作，暂时隐居古城。在与丁元英的接触中，芮小丹被他的叛逆、奇特、不循常规和不可预测的个性深深地吸引，对他产生了眷恋和爱慕。为了明白丁元英所论述的文化属性，也为了有更多的时间与之相守，芮小丹决定向丁元英要一件特殊的礼物：让丁元英在贫困县里的贫困村——王庙村写一个脱贫致富的“神话”。就在丁元英用“杀富济贫”的方式将要完成对“神话”的书写时，芮小丹在一次与通缉犯的偶遇中被炸毁容，她开枪自杀，而丁元英伤心吐血，最终黯然离去</p>
			<p class="text-info">在现代社会中，人们爱父母、爱亲人、爱朋友，但这样的爱永远有一个界限——亲友之外，人们毫无所爱。像在丁元英和芮小丹的爱情传奇中出现拯救农民于贫困之中的济世情怀实属罕见。丁元英和芮小丹都是具有大爱情怀的人，对他人、对民族、对国家，他们始终秉持这种关爱之心与责任之心，“私爱”的情愫里体现着悲悯苍生的普世情怀。芮小丹是一个人格完全独立的女人，她爱丁元英，但并不允许丁元英在她的生活里指手画脚，支配她的生活。她对爱情有着独特的见解，她没想过与丁元英天长地久，古城在她看来也留不住丁元英，她尊重丁元英。也正是基于以上两点，芮小丹向丁元英要了一个“神话式”的礼物。它既不是珠宝，也不是房子，而是要让古城王庙村脱贫致富。王庙村的农民对他们来说是陌生人，是没有血缘关系的人，却因为他们都是有着同等生命尊严和价值的人而给予善意，给予爱，这才是爱的本质。</p>
			<p class="text-primary">“救世主”在中西方文化中都有不同程度的体现，比如，中国人传统观念中的“感谢上苍”“皇天在上”等便是一种对“救世主”的期盼；西方基督教则宣扬上帝创世说，是上帝创造了世间万物。虽然存在于中西方文化中的救世主文化存在形式上的差异，但它们无不是根植于人类思想中的一个共同要素——期待救主，也就是当人们每每遭遇险境时，总是期盼一种凌驾于自然之上，抑或超出人类本身的外部力量以让自身脱离险境。这一文化的本源是过去人类对大自然、对鬼神等的崇拜，但这同时也是受人类早期社会生产力不足、思想观念落后等因素影响，人类对大自然强大力量所形成的一种敬畏之心，并表现出一定的浪漫主义色彩。</p>
		</div>
   </div>
</div>

4、创建动态tab展示组件

        经过上面的步骤，我们首先创建了html框架，然后引入了相应的第三方资源，接着定义了页面展示的内容，最后还需要将页面展示的内容绑定起来，才能有具体的效果。这里给出结合wheelnav的动态效果设置关键代码：

<script>
  var wheelTab;
  window.onload = function () {
      wheelTab = new wheelizateTab("tab");
      wheelTab.tabType = wheelizateTabTypes.Corner;
      wheelTab.tabSubType = wheelizateTabSubTypes.TopLeft;
      wheelTab.tabWheelType = wheelizateTabWheelTypes.Pie;
      wheelTab.tabThemeType = wheelizateTabThemeTypes.Basic;
      wheelTab.clockwise = false;
      wheelTab.titleRotateAngle = null;
      wheelTab.wheelAnimation = "easeOut";
      wheelTab.paneAnimation = "rotate";
      wheelTab.marker = false;
      wheelTab.tabRounded = true;
      wheelTab.tabShadowed = true;
      wheelTab.minHeight = 300;
      wheelTab.setTitles([iconraphael.folder, iconraphael.plugin, iconraphael.tshirt, iconraphael.package]);
      wheelTab.createTab();
    };
</script>

        经过上面的步骤就实现了标签页的动态切换效果。本节的主要内容到此结束，下节来重点介绍展示的效果以及相关的配置。

二、可视化成果以及调用过程讲解

        本节将对上面过程中的成果进行展示，同时把代码的调用过程也进行一个详细的说明。

1、成果展示

首先是第一个tab页的内容介绍

 第二个tab的内容展示示意图

第三个tab页内容展示

         上面是四个具体页面的展示，动态切换的效果更棒。

2、调用过程分析

        确实调用过程比较简单，因为涉及的相关资源不是很多。我们可以在页面上进行断点跟踪就可以了。这里我们首先来看tab页的渲染过程。

        这里首先创建一个wheelizateTab（“tab”） ；然后通过构造方法，将页面上的tab元素跟动态效果绑定起来，最后返回一个tab的实例对象。

         在这里对相关属性进行初始化，因为这里提供的是压缩之后的代码，因此加入了一些混淆和字符的替换，但是大体的内容还是保留了的。然后针对返回的tab对象设置wheelnav对象的属性。

        到最后实际的创建出tab组件，并通过html来进行展示。 

三、总结

        以上就是本文的主要内容，本文重点讲解在Html5中如何结合Wheelnav这个组件来进行动态标签页的展示，在实现动态导航切换的同时，还可以实现页面的动态切换。博客首先讲解了如何进行页面的扩展，然后通过实际编码以实例的形式进行展示如何实现。通过本文，您可以掌握如何进行wheelnav动态标签页的制作，同时可以掌握如何调整相关的参数，让它更加漂亮。本文的例子可以应用于地图中的多角度阐述地理实体的意义，比如从多维度描述一个景点的相关信息等。如果您对这种效果有兴趣，不妨来本博客看一下，行文仓促，定有不足之处，还请各位朋友专家在评论区留言交流批评指正，不慎感谢。

​

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Canvas HTML5
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

目录

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入