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>
<!-- other images... -->
</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>
页面加载效果如下:
DevOOPS是Bootstrap中的一个自适应免费管理仪表板主题。
4、Bootstrap
Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS,HTML和JS的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。