谈谈我接触过的几个前端框架。

最新推荐文章于 2024-04-16 09:56:44 发布

snowmaning

最新推荐文章于 2024-04-16 09:56:44 发布

阅读量1.8k

点赞数

分类专栏：技术文章标签：前端框架 java 框架

本文链接：https://blog.csdn.net/snower987/article/details/68496061

版权

技术专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、justified gallery框架：

jQuery-justified gallery插件允许你在一个合理的空间内创建响应式、无限滚动、高品质的画廊，并填充满所有的空间。

插件主要特性
    无需在意像素：使用一种先进的算法无需剪裁图像进行自动调整；
    无限滚动：已经为图片无限加载做好准备，只需添加图片并告诉Justified Gallery；
    高质量：支持任何设备和屏幕尺寸；
    动态画廊：过滤、排序、随机、添加、删除图像，你可以对画廊进行任何操作；
    灯箱效果一体化：你可以使用现有的灯箱效果，如Colorbox 或 Swipebox；
    高度可定制化：提供很多选择供你打造你想要的画廊效果；
    Captions：可以给你的图片添加说明文字；
    响应式：可根据屏幕尺寸自动调整大小；
    快速设计：带有智能的缩略图加载，生而很快；
    错误处理：管理服务器的错误，自动跳过不可用图像，并在控制台给出提示。

demo如下：

<div id="mygallery" >
    <a href="path/to/myimage1_original.jpg">
        <img alt="Title 1" src="path/to/myimage1_thumbnail.jpg"/>
    </a>
    <a href="path/to/myimage2_original.jpg">
        <img alt="Title 2" src="path/to/myimage2_thumbnail.jpg"/>
    </a>
    
</div>

插件需要jQuery支持，之后还需引入插件的文件、分别是justifiedGallery.css、jquery和jquery.justifiedGallery.js：
<link rel="stylesheet" href="css/justifiedGallery.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.justifiedGallery.js"></script>

而后，就可以直接调用，justifiedGallery会使用默认的参数来调整图片的大小：

$("#mygallery").justifiedGallery();

2、tinymce

tinymce是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。其功能配置灵活简单（两行代码就可以将编辑器嵌入网页中），支持AJAX。另一特点是加载速度非常快，如果你的服务器采用的脚本语言是 PHP，那还可以进一步优化。最重要的是，TinyMCE是一个根据LGPL license发布的自由软件。

DEMO：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TinyMce jquery 版本使用</title>

<!-- 引入jQuery -->
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<!-- 引入TinyMCE -->
<script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
	$().ready(function() {
		// 使用jquery方式初始化控件,这里用 #id 形式定位到textarea元素
		$('#elm1').tinymce({
			// 加载TinyMec所需的js文件
			script_url : 'tiny_mce/tiny_mce.js',

			// 使用主题
			theme : "advanced",
			
			// 使用的插件,有很多插件和工具栏按钮重复,可以去掉
			// 这里加载所有插件
			plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

			// 工具栏,可以分成几行来显示,因为所有按钮加起来非常多
			theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
			theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
			theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
			theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
			theme_advanced_toolbar_location : "top",
			theme_advanced_toolbar_align : "left",
			theme_advanced_statusbar_location : "bottom",
			theme_advanced_resizing : true,
		});
	});
</script>
<!-- /TinyMCE -->

</head>
<body>

	<div>
		<textarea id="elm1" rows="15" cols="80" style="width: 60%">初始化内容：可有可无</textarea>
	</div>
	
</body>
</html>

页面加载效果如下：

3、devoops

DevOOPS是Bootstrap中的一个自适应免费管理仪表板主题。

4、Bootstrap

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS，HTML和JS的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。

snowmaning

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谈谈我接触过的几个前端框架。

1、justified gallery框架：jQuery-justified gallery插件允许你在一个合理的空间内创建响应式、无限滚动、高品质的画廊，并填充满所有的空间。插件主要特性无需在意像素：使用一种先进的算法无需剪裁图像进行自动调整；无限滚动：已经为图片无限加载做好准备，只需添加图片并告诉Justified Gallery；高质量：支持任何设
复制链接

扫一扫