欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

项目总结之前端页面常用插件

程序员文章站 2024-02-01 08:20:40
...

在做完一个springboot的个人博客项目,想总结下从数据库建表到完成的对自己有点价值的点,包括碰到的问题及解决过程和方法,希望读者也能找到自己想要的。这篇博客主要是前端页面用到的一些插件及其使用方法。

先讲讲在项目中需要实现什么功能吧。在我的博客项目中,博客的发布需要有MarkDown编辑器,然后博客详情页需要有鼠标的滚动监测,还有一个生成二维码的用于扫描观看此篇博客,还有博客正文的排版插件,代码高亮,平滑滚动,正文的目录生成,动画效果等等。

注意:很多插件都依赖jquery,所以事先务必引入jquery!!!

MarkDown编辑器

先看看效果:
项目总结之前端页面常用插件在这个编辑器的左边区域是编写MarkDown语法的区域,右边是展示区域。看实际效果:
项目总结之前端页面常用插件

官网地址

https://pandao.github.io/editor.md/
其实官网有简要的用法,但是这里还是记录一下怎样简单的使用。

怎么实现呢?

先从官网下载好压缩包,然后在我们springboot程序的resources文件夹下的static目录下新建一个插件文件夹lib,如图:
项目总结之前端页面常用插件
解压缩后将其中的css等一些文件夹或文件(不是全部)复制进lib目录下新建的editormd目录,如图:
项目总结之前端页面常用插件再在需要这个插件的页面中引入css,js还进行一些设置即可:
项目总结之前端页面常用插件项目总结之前端页面常用插件这里需要注意的是这个js是依赖于jquery的,所以在这个js之前得先声明jquery,比如我使用cdn形式的jquery:
项目总结之前端页面常用插件然后在自定义的script标签中初始化编辑器:

<script>
		// 初始化markdown编辑器
		// 里面的path是基于static定位的(在thymeleaf动态页面中基于static,要不然还是写我注释的那个path)
		var testEditor;
		$(function() {
			testEditor = editormd("md-content", {
				width : "100%",
				height : 640,
				syncScrolling : "single",
				//path : "../../static/lib/editormd/lib/"
				path    : "/lib/editormd/lib/"
			});

		});

	</script>

在正式的body标签中还得声明一个id为md-content的div:

<!--style="z-index: 1 !important;" 代表叠放层次,当全屏时,编辑器会位于所有组件上方-->
<div id="md-content" style="z-index: 1 !important;">
						<textarea name="content" placeholder="博客内容" th:text="*{content}" style="display: none;">
								
						</textarea>
</div>

排版插件

官网地址:https://github.com/sofish/typo.css

怎么使用?

下载下来后解压其中的html是用来演示的,css取出来放置于项目的css目录,并在想要用插件的页面引用。
并在想要格式化排版的div加入两个class,如图:
项目总结之前端页面常用插件
注意:使用时可能会与你自身使用的UI前端框架有一定冲突(效果没那么好),比如我博客项目使用的Semantic UI ,怎么解决?在这个typo.css中将作用与全局的全改为只作用于typo的div即可。

动画插件

官网:https://daneden.github.io/animate.css/
介绍:让某个标签块显示时有动画效果,如渐变等。

怎么使用?

下载解压后将其中的animate.css复制进css目录然后引用。然后在你想要有动画效果的元素的class中加animated,然后再加一个你选择的动画效果如fadeIn 如:
项目总结之前端页面常用插件## 代码高亮
官网:https://github.com/PrismJS/prism

怎么使用?

在官网:选择你使用的语言如Java,JavaScript等,还有主题色如黑色,还有可以选择一些插件如显示行数等,然后下载css和js即可,再加入css和js文件夹,最后引用。
接下来的步骤是将代码包含在

中,这个步骤好像富文本编辑器帮我们做了,所以这里只需要引用即可。

目录生成

官网:http://tscanlin.github.io/tocbot/

怎么使用?

先自己写一个在网页右下部的小工具栏:
项目总结之前端页面常用插件使用SemanticUI的小工具栏:

<!--网页侧边的小工具条 要定义为绝对布局,无论怎样滑动都在一个地方
		 style="display:none" 表示默认不显示
	-->
	<div id="toolbar" class="m-fixed m-right-bottom m-padded"
		style="display: none">
		<div class="ui vertical icon buttons">
			<!--toc作用只是标明这个button,用作点击事件的识别-->
			<button class="toc ui teal button">目录</button>
			<a href="#comment-container" class="ui teal button">留言</a>
			<button class="ui wechat icon button">
				<i class="weixin icon"></i>
			</button>
			<div id="toTop-button" class="ui icon button">
				<i class="chevron up icon"></i>
			</div>
		</div>
	</div>

然后是弹出的目录栏(js-toc就是生成的目录的位置):

<!--点击工具条中目录后左侧弹出的
			然后目录生成是需要插件的(Tocbot)
			使用插件方式,引入js,css,然后js代码进行初始化
			不过注意:这个生成目录时所有的标题都必须有id属性,即h标签必须有id属性
			
			默认插件样式还是不行,就需要在tocbot.css中修改
		-->
	<div class="top-container ui flowing popup transition hidden"
		style="width: 250px !important;">
		<ol class="js-toc">

		</ol>

	</div>

然后使用query的弹出功能,将目录的弹出位置控制在这个小组件的上部:

$(".toc.button").popup({
			popup : $(".top-container.popup"),
			on : 'click',
			position : 'top center'
});

初始化:

tocbot.init({
			// Where to render the table of contents.
			tocSelector : '.js-toc',
			// Where to grab the headings to build the table of contents.
			contentSelector : '.js-toc-content',
			// Which headings to grab inside of the contentSelector element.
			headingSelector : 'h1, h2, h3',
			// For headings inside relative or absolute positioned containers within content.
			hasInnerContainers : true,
		});

可以看出初始化中的tocSelector即为生成目录的地方(一个ol标签),contentSelector 是值从哪个div中获取目录,headingSelector 是指h1,h2,h3生成目录。看我的正文内容:
项目总结之前端页面常用插件这样基本可以了。

二维码生成

官网:http://davidshimjs.github.io/qrcodejs/
这个插件可以根据一些信息自动生成二维码,和上个插件一样,先得弄出一个弹出框:
项目总结之前端页面常用插件
点击这个按钮后弹出下面这个div:

<!--点击微信后弹出的
			直接引用js
		-->
	<div id="qrcode" class="wechat-qr ui flowing popup transition hidden "
		style="width: 130px !important;">
		<!--<img src="img/dragonCat3.gif" alt="" class="ui rounded image" style="width: 120px !important;" />-->
	</div>

弹出得js:


		$(".wechat").popup({
			popup : $(".wechat-qr"),
			position : 'left center'
		});

然后老规矩先引用js后初始化:

<script>
// 这里最后部署的公网的域名这里要改
		var serurl = /*[[#{blog.serurl}]]*/"127.0.0.1:8080";
		var url = /*[[@{/blog/{id}(id=${blog.id})}]]*/"";
		var qrcode = new QRCode("qrcode", {
			text : serurl+url,
			width : 110,
			height : 110,
			colorDark : "#000000",
			colorLight : "#ffffff",
			correctLevel : QRCode.CorrectLevel.H
		});
</script>

这个初始化中得serurl 和url 在是我在项目中想要作为二维码得信息得,你实际想要扫描出啥内容由text指定。

平滑滚动

官网:https://github.com/flesler/jquery.scrollTo
这个插件的作用在于可以在你指定的时间内滑动到指定的位置。
怎么用呢?
这里不用下载直接使用cdn形式即可:

<script src="https://cdn.jsdelivr.net/npm/aaa@qq.com/jquery.scrollTo.min.js"></script>

使用方式也很简单(官网中有介绍):

$(element).scrollTo(target[,duration][,settings]);

这里的element值可以滑动的元素,如window,一般也是使用window的用来滑动整个窗口。
看实际案例:
我这里项目还是使用那个小工具栏中的一个按钮:
项目总结之前端页面常用插件
最下面的那个向上符号点击后触发:

$("#toTop-button").click(function() {
			//				500是滑动上去的时间
			$(window).scrollTo(0, 500);
		});

第一个参数的0代表滚动到最顶部,500代表500毫秒后滑倒顶部

滚动监测

官网:http://imakewebthings.com/waypoints/

为什么使用这个?
我的小工具栏并不是在刚刚进入博客详情就需要显示的,而是滑动到正文页面才开始显示,这个功能就需要使用这个插件了。

怎么使用?
下载后引入其中的js,然后在js中声明:

// 滚动监测
		var waypoint = new Waypoint({
			// 根据id定位
			  element: document.getElementById('waypoint'),
			  handler: function(direction) {
			    if (direction == 'down') {
			    	// jq的显示方法
			    	$('#toolbar').show(100);
			    } else { // up向上
			    	// 500毫秒后消失
			    	$('#toolbar').hide(500);
			    }
			  }
			})

这个其中的element: document.getElementById('waypoint')指的是监测谁的滚动,比如我这里,监测的是正文区域:
项目总结之前端页面常用插件然后再 handler后的方法中的:

 				if (direction == 'down') {
			    	// jq的显示方法
			    	$('#toolbar').show(100);
			    } else { // up向上
			    	// 500毫秒后消失
			    	$('#toolbar').hide(500);
			    }

代表当方向相对于监测对象向下时,工具条显示,向上时消失。

相关标签: 项目总结