用java给html文件添加必要的控制html代码片
这个需求，我估计很多时候都不会用到，但是，我们目前在做一个CMS的系统，在创建页面的时候，需要控制页面各个板块显示的内容来源，这个不是关键，关键是页面内容配置完毕后，如何提交内容，也就是说如何和后台系统通信。这个时候，有两种做法，一种是在页面的控制区域内添加右键菜单，实现这个功能。另外一个做法，就是在页面中添加按钮区域来实现。
但是不管那种做法，控制区域的html页面上的逻辑代码片，都不可能在模板里面添加，这是不友好的，客户也是不会考虑这个的，再说了，他也没有办法考虑。所以，需要CMS系统自动最近这个控制区域的html代码片。于是，java操作html的插件就诞生了！有不少类似的插件，这里我选择比较简单的jsoup插件。下面的简单实验，用到的版本是1.9.2，就一个jar包，不需要额外的资源了。
我这里上代码，分别说明右键实现，以及直接追加button的方式实现。
先说右键实现方案，这里，右键菜单是用bootstrap-contextmenu.js插件实现的，是基于bootstrap风格的。
/**
* @author "shihuc"
* @date 2016年5月21日
*/
package opc; import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStreamWriter; import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements; /**
* @author "shihuc"
*
*/
public class Demo { /**
* @param args
* @throws IOException
*/
public static void main(String[] args) throws IOException {
File input = new File("./example.html");
Document doc = Jsoup.parse(input, "UTF-8");
System.out.println(doc.html());
Elements content = doc.getElementsByTag("body");
//找到body的内容
String body = content.get(0).html();
System.out.println(body); //读取控制页面右键的代码片段
File pice = new File("./pice.html");
Document pdoc = Jsoup.parse(pice, "UTF-8");
Element control_area = pdoc.getElementById("tk-cms-page-context-menu-control-area"); //将业务相关的html代码片添加到右键菜单控制区域中
control_area.append(body); //将带有业务相关代码的html内容填写到原来的example.html文件的body区域
content.get(0).html(pdoc.html()); FileOutputStream fos = new FileOutputStream("./output.html", false);
OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8");
osw.write(doc.html());
osw.close();
} }
这里的example.html文件的内容如下：
<!DOCTYPE HTML>
<html> <body> <div>
<h1 style="text-align: center; font-size: 40px; color: #abcdef">This is a test page</h1>
</div> </body>
</html>
那个pice.html的内容如下:
<style type="text/css">
.vCenter
{
vertical-align:middle;
margin:0 auto;
}
</style> <div id="context-menu" style="position: absolute; z-index: 9999; top: 746px; left: 474px;" class="">
<ul class="dropdown-menu" role="menu">
<li><a tabindex="-1">Cancel</a></li>
<li><a tabindex="-1">Action</a></li>
</ul>
</div>
<div id="tk-cms-page-context-menu-control-area" data-toggle="context" style="height:100%;width:100%;border:1px solid #ddd;" class="vCenter"> </div> <script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-contextmenu.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function(){
//屏蔽掉浏览器显示的页面中的右键菜单。
document.oncontextmenu = function(){return false;};
//启用自定义的右键菜单
$('#tk-cms-page-context-menu-control-area').contextmenu({
target: '#context-menu',
onItem: function (context, e) {
alert($(e.target).text());
}
});
})
</script>
最后生成的output.html的内容如下：
<!doctype html>
<html>
<head></head>
<body>
<style type="text/css">
.vCenter
{
vertical-align:middle;
margin:0 auto;
}
</style>
<div id="context-menu" style="position: absolute; z-index: 9999; top: 746px; left: 474px;" class="">
<ul class="dropdown-menu" role="menu">
<li><a tabindex="-1">Cancel</a></li>
<li><a tabindex="-1">Action</a></li>
</ul>
</div>
<div id="tk-cms-page-context-menu-control-area" data-toggle="context" style="height:100%;width:100%;border:1px solid #ddd;" class="vCenter">
<div>
<h1 style="text-align: center; font-size: 40px; color: #abcdef">This is a test page</h1>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-contextmenu.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function(){
//屏蔽掉浏览器显示的页面中的右键菜单。
document.oncontextmenu = function(){return false;};
//启用自定义的右键菜单
$('#tk-cms-page-context-menu-control-area').contextmenu({
target: '#context-menu',
onItem: function (context, e) {
alert($(e.target).text());
}
});
})
</script>
</body>
</html>
效果如下图所示，只有在灰色框区域内容点击鼠标右键有反应，框外点击鼠标右键是没有菜单出来的，那个框，限定了菜单的有效控制范围。
下面，再来看看，直接追加button在业务模板html页面后面的实现方案。直接上代码！
example.html的部分与上面一样，不再列举，下面先说java的部分：
/**
* @author "shihuc"
* @date 2016年5月21日
*/
package opc; import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStreamWriter; import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements; /**
* @author "shihuc"
*
*/
public class Demo2 { /**
* @param args
* @throws IOException
*/
public static void main(String[] args) throws IOException {
File input = new File("./example.html");
Document doc = Jsoup.parse(input, "UTF-8");
System.out.println(doc.html());
Elements content = doc.getElementsByTag("body");
//找到body的内容
Element body = content.get(0);
System.out.println(body.html()); //读取控制页面右键的代码片段
File pice = new File("./pice2.html");
Document pdoc = Jsoup.parse(pice, "UTF-8"); //将控制页面相关逻辑代码追加到业务页面example.html的最后面。
body.append(pdoc.html()); FileOutputStream fos = new FileOutputStream("./output2.html", false);
OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8");
osw.write(doc.html());
osw.close();
} }
再来列举pice2.html的代码部分：
<style type="text/css">
.vCenter
{
vertical-align:middle;
margin:0 auto;
}
</style> <div id="tk-cms-op-btn" style="border:1px solid #ddd; padding: 10px 10px" class="vCenter">
<button type="button" onclick="cancel();">Cancel</button>
<button type="button" onclick="action();">Action</button>
</div> <script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function cancel(){
alert("cancel");
}
function action(){
alert("action");
}
$(document).ready(function(){ });
</script>
最后看看输出部分output2.html的代码片：
<!doctype html>
<html>
<head></head>
<body>
<div>
<h1 style="text-align: center; font-size: 40px; color: #abcdef">This is a test page</h1>
</div>
<style type="text/css">
.vCenter
{
vertical-align:middle;
margin:0 auto;
}
</style>
<div id="tk-cms-op-btn" style="border:1px solid #ddd; padding: 10px 10px" class="vCenter">
<button type="button" onclick="cancel();">Cancel</button>
<button type="button" onclick="action();">Action</button>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function cancel(){
alert("cancel");
}
function action(){
alert("action");
}
$(document).ready(function(){ });
</script>
</body>
</html>
看看example.html模板文件在追加了控制代码片后的效果：
到此，两种通过jsoup操作html添加页面控制单元的实现方案都列举出来，读者是不是有疑问了，这两者有啥区别，或者说到底那种要好点呢？
个人觉得，第一种右键菜单的那个，最终页面的视觉效果会干净点，但是，右键菜单是基于bootstrap的，引入了bootstrap.css以及bootstrap.js和bootstrap-contextmenu.js，所以，这个会对业务模板代码可能会造成影响。也就是说有些side effect. 另外的一种方案，就是直接添加button的，这个虽然不是那么好看，但是他需要的而外的插件资源少，最多就是一个jQuery的插件。其实，右键方式，也需要jQuery插件。
不多说了，有需要的，自己选择参考！测试的工程中引入了的资源文件等文件结构如下图所示：
用java给html文件添加必要的控制html代码片的更多相关文章
- java读取CSV文件添加到sqlserver数据库
在直接将CSV文件导入sqlserver数据库时出现了错误,原因还未找到,初步怀疑是数据中含有特殊字符.于是只能用代码导数据了. java读取CSV文件的代码如下: package experimen ...
- java向压缩文件添加文件
package org.alfresco.repo.bom.util; import java.io.File; import java.io.FileInputStream; import java ...
- JAVA对XML文件的读写(有具体的代码和解析
XML 指可扩展标记语言(EXtensible Markup Language),是独立于软件和硬件的信息传输工具,应用于 web 开发的许多方面,常用于简化数据的存储和共享. xml指令 处理指令, ...
- JAVA解析XML文件(DOM,SAX,JDOM,DOM4j附代码实现)
1.解析XML主要有四种方式 1.DOM方式解析XML(与平台无关,JAVA提供,一次性加载XML文件内容,形成树结构,不适用于大文件) 2.SAX方式解析XML(基于事件驱动,逐条解析,适用于只处理 ...
- Java中的文件和stream流的操作代码
1.Java中FileRead方法的运用代码及详解 package example2;import java.io.FileReader;import java.io.IOException;clas ...
- Java读取一个文件并打印到控制台上
package test9; import java.io.BufferedReader; import java.io.File; import java.io.FileNotFoundExcept ...
- eclipse编辑窗口不见了（打开左边的java、xml文件，中间不会显示代码)
转自:https://blog.csdn.net/u012062810/article/details/46729779?utm_source=blogxgwz4 1. windows-->re ...
- eclipse 编辑窗口不见了（打开左边的java、xml文件，中间不会显示代码)
参考:https://blog.csdn.net/u012062810/article/details/46729779
- Java 图片爬虫，java打包jar文件
目录 1. Java 图片爬虫,制作 .jar 文件 spider.java 制作 jar 文件 添加执行权限 1. Java 图片爬虫,制作 .jar 文件 spider.java spider.j ...
随机推荐
- 《JS高程》事件类型学习笔记
事件类型: UI事件&焦点事件: 鼠标滚轮事件: 键盘与文本事件: 复合事件&变动事件: HTML5事件: 设备事件&触摸与手势事件:
- 最小二乘法 python实现
#-*-coding:UTF-8-*- # Created on 2015年10月20日 # @author: hanahimi import numpy as np import random im ...
- 触摸精灵lua脚本实现微信群加好友功能
--此脚本针对iPhone5/5s --目前只实现一个屏幕微信群好友的添加,如果想添加更多好友, --需要划屏操作,执行划屏操作时建议循环滑动 function main() --获取屏幕的分辨率 w ...
- 灰度图像的自动阈值分割（Otsu 法）（转载）
灰度图像的自动阈值分割(Otsu 法) 机器视觉领域许多算法都要求先对图像进行二值化.这种二值化操作阈值的选取非常重要.阈值选取的不合适,可能得到的结果就毫无用处.今天就来讲讲一种自动计算阈值的方法. ...
- 隐马尔科夫模型(HMM)的概念
定义隐马尔科夫模型可以用一个三元组(π,A,B)来定义:π 表示初始状态概率的向量A =(aij)(隐藏状态的)转移矩阵 P(Xit|Xj(t-1)) t-1时刻是j而t时刻是i的概率B =(bij) ...
- POJ 1469 COURSES(二部图匹配)
COURSES Time Limit: 1000MS Memory ...
- 课堂所讲整理：Set和Map
Set相关知识: package org.hanqi.array; import java.util.*; public class Test2 { public static void main(S ...
- ZOJ-3929 Deque and Balls （DP+找规律）
题目大意:n个数,每个数的大小都在1~n之间.操作n次,第 i 次将第 i 个数放到一个双端队列里面,放到队列两端的概率是相等的.问操作n次之后双端队列中元素满足xi>xi+1的对数的期望,输出 ...
- java.util.concurrent Class ThreadPoolExecutor
http://docs.oracle.com/javase/7/docs/api/java/util/concurrent/ThreadPoolExecutor.html
- ToDictionary,ToLookup
这个系列我们看看C#中有哪些我们知道,但是又不知道怎么用,又或者懒得去了解的东西,比如这篇我们要介绍的toDictionary 和ToLookup. 从图中我们看到有四个ToXXX的方法,其中ToAr ...