整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
VvvebJs是一个开源的网页拖拽自动生成的JavaScript库，你可以以简单拖拽的方式生成自己需要的网页样式，内置jquery和Bootstrap，你可以拖拽相关的组件进行网页的构建，非常的方便，而且可以实时修改代码，功能丰富，使用简单，界面友好，特别适合一些专注于展示的网页设计，需要的朋友不可错过！
https://github.com/givanz/VvvebJs
默认情况下，编辑器附带Bootstrap 4和Widgets组件，可以使用任何类型的组件和输入进行扩展。
如下代码：
<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>
<script src="libs/builder/components-widgets.js"></script>
<script>
$(document).ready(function()
{
Vvveb.Builder.init('demo/index.html', function() {
//load code after page is loaded here
Vvveb.Gui.init();
});
});
</script>
要初始化编辑器，调用Vvveb.Builder.init。第一个参数是要加载以进行编辑的URL，它必须位于相同的子域中才能进行编辑。第二个参数是页面加载完成时调用的函数，默认情况下调用编辑器Gui.init();
Component Group是一个组件集合，例如Bootstrap 4组由Button和Grid等组件组成，该对象仅用于在编辑器左侧面板中对组件进行分组。例如，Widgets组件组只有两个组件视频和地图，并被定义为如下
Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/video"];
Component是一个对象，它提供可以在画布上放置的html以及在选择组件时可以编辑的属性，例如Video Component，具有Url和Target属性的html链接Component定义为：
Vvveb.Components.extend("_base", "html/link", {
nodes: ["a"],
name: "Link",
properties: [{
name: "Url",
key: "href",
htmlAttr: "href",
inputtype: LinkInput
}, {
name: "Target",
key: "target",
htmlAttr: "target",
inputtype: TextInput
}]
});
在Component属性集合中使用Input对象来编辑属性，例如文本输入，选择，颜色，网格行等。例如，TextInput扩展Input对象并定义为：
var TextInput = $.extend({}, Input, {
events: {
"keyup": ['onChange', 'input'],
},
setValue: function(value) {
$('input', this.element).val(value);
},
init: function(data) {
return this.render("textinput", data);
},
}
);
输入还需要一个在编辑器html（在editor.html中）定义为<script>标签的模板，其id为vvveb-input-inputname，例如对于文本输入为vvveb-input-textinput，定义：
<script id="vvveb-input-textinput" type="text/html">
<div>
<input name="{%=key%}" type="text" class="form-control"/>
</div>
</script>
以上是借助浏览器翻译工具，对官网的文档进行简单的翻译，可能会有些不够准确的地方，感兴趣的小伙伴可以直接查看相关文档！
VvvebJs是一个非常强大的网页可视化生成构建工具，让不懂网页设计的小伙伴们也能够通过拖拽来生成美观大方的网页出来，让设计网页就像设计图片一样，VvvebJs特别适合展示型网页，甚至可以不需要代码就能完成一项复杂的网页设计，总体来说，VvvebJs是一个值得尝试的工具！
前在用fourinone分布式框架的时候需要做一个Web页面，可以借助fourinone的api展示各存储节点的树形目录结构。我最初的思路是利用递归扫面各节点下的文件和目录，并将其存储在数据库。然后从数据库取出展示。额，好像跑题了... 不管了，总之每个节点的文件和目录的数量太大，所以只能是找一个可以异步加载并显示树形目录结构的框架。于是我百度到了zTree。 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
今天我们先来学习一下如何静态加载数据并显示出树形目录结构。
首先，zTree是基于jQuery的，所以先在网页中引入jq，然后引入zTree的js文件和css样式文件。
<link rel="stylesheet" href="css/metroStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
然后创建一个显示区域
<div id="demotree" style="margin-left:230px;margin-top:50px"> <!--定义div来放树-->
<ul id="treeDemo" class="ztree"></ul> <!--树的本质是无序列表，绑定数据时根据数据的关系添加li或ul-->
</div>
然后定义json格式的数据
var treeNodes=[ {"id":"1","name":"Demo1","isParent":"1","pId":"0"},
{"id":"2","name":"Demo2","isParent":"1","pId":"1"},
{"id":"3","name":"Demo3","isParent":"1","pId":"1"},
{"id":"4","name":"Demo4","isParent":"0","pId":"2"},
{"id":"5","name":"Demo5","isParent":"0","pId":"2"},
{"id":"6","name":"Demo6","isParent":"1","pId":"3"},
{"id":"7","name":"Demo7","isParent":"0","pId":"1"},
{"id":"8","name":"Demo8","isParent":"0","pId":"2"},
{"id":"9","name":"Demo9","isParent":"0","pId":"3"},
{"id":"10","name":"Demo10","isParent":"0","pId":"6"},
{"id":"11","name":"Demo11","isParent":"0","pId":"1"}
];//id是节点id，pId是父节点id，通过他们的关系来绑定
接着对树进行设置
var setting = {//树的设置
//外观
view: {
showIcon: true, //设置是否显示节点图标
showLine: true, //设置是否显示节点与节点之间的连线
fontCss : {color:"black",size:30}//字体颜色和大小
},
//数据类型
data: {
simpleData: {
enable: true, //设置是否启用简单数据格式（json格式）
}
},
//回调事件
callback: {//这里可以做很多回调，比如点击，点击前等等，在下一篇的动态加载数据中会介绍
}
};
最后是对树进行初始化
var zTree;
$(document).ready(function(){//全部加载完后执行
$.fn.zTree.init($("#treeDemo"), setting, treeNodes); //初始化树
});
效果图如下
全部代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>zTreeDemo</title>
<link rel="stylesheet" href="css/metroStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
</head>
<body align="center" >
<div id="demotree" style="margin-left:230px;margin-top:50px"> <!--定义div来放树-->
<ul id="treeDemo" class="ztree"></ul> <!--树的本质是无序列表，绑定数据时根据数据的关系添加li或ul-->
</div>
</body>
<script type="text/javascript">
var treeNodes=[ {"id":"1","name":"Demo1","isParent":"1","pId":"0"},
{"id":"2","name":"Demo2","isParent":"1","pId":"1"},
{"id":"3","name":"Demo3","isParent":"1","pId":"1"},
{"id":"4","name":"Demo4","isParent":"0","pId":"2"},
{"id":"5","name":"Demo5","isParent":"0","pId":"2"},
{"id":"6","name":"Demo6","isParent":"1","pId":"3"},
{"id":"7","name":"Demo7","isParent":"0","pId":"1"},
{"id":"8","name":"Demo8","isParent":"0","pId":"2"},
{"id":"9","name":"Demo9","isParent":"0","pId":"3"},
{"id":"10","name":"Demo10","isParent":"0","pId":"6"},
{"id":"11","name":"Demo11","isParent":"0","pId":"1"}
];//id是节点id，pId是父节点id，通过他们的关系来绑定
var setting = {//树的设置
//外观
view: {
showIcon: true, //设置是否显示节点图标
showLine: true, //设置是否显示节点与节点之间的连线
fontCss : {color:"black",size:30}//字体颜色和大小
},
//数据类型
data: {
simpleData: {
enable: true, //设置是否启用简单数据格式（json格式）
}
},
//回调事件
callback: {
}
};
var zTree;
$(document).ready(function(){//全部加载完后执行
$.fn.zTree.init($("#treeDemo"), setting, treeNodes); //初始化树
});
</script>
</html>
最后谢谢大家观看，下一篇是利用ajax和zTree动态加载树形目录结构，实现点击一个文件夹加载一层。
对了！还有，zTree可以到它的官网下载，里面也包含了jQuery。再见！
前段时间搞了一个地方性民生资讯号，资讯嘛，都是我抄你的，你抄官媒的，小市民都喜欢奇闻异事，所以就存在一个需求，如何去定向抓取奇闻异事的地方号上的新闻，其实做起来很简单，用逻辑回归即可，这篇主要讨论如何去抓取，在 C# 中大家都知道抓取通用的库是 HtmlAgilityPack，但是这个库主流的做法是采用 xpath 提取网页内容，这就让我很不爽了，毕竟不熟悉莫名的抵抗哈，像我这个年纪的码农，被 Jquery 教育了至少 5-6 年，所以必须用 类Jquery 的方式，在 python 中有 cquery 做这件事情，那在 C# 中有没有类似的方式呢？ 嘿嘿，万能的 github 上还真有。。。 就是本篇介绍的 CSQuery。
github的地址： https://github.com/zone117x/CsQuery 然后在vs中 nuget 一下即可：
一切都准备就绪了，那怎么用呢？ 不着急，我以博客园举两个例子。
如上图，要想获取这里的 友情链接几个大字，直接用 text() 肯定是不行的，默认情况它会将所有的子节点的文本也会抓到，如下图：
那怎么处理呢？ 可以用 jquery 提供的 contents 方法，然后在获取的所有子节点中判断是否有 文本节点，最后获取文本节点的内容即可，如下代码：
用js是搞定了，那用 CSQuery 代码怎么搞定呢？模仿呗，如下代码：
static void Main(string[] args)
{
var jquery = CQ.CreateDocument(new WebClient().DownloadString("http://cnblogs.com"));
var content = jquery["#friend_link"].Contents().Filter((dom) =>
{
return dom.NodeType == NodeType.TEXT_NODE;
}).Text();
Console.WriteLine(content);
}
我不知道用 xpath 提取这样的内容麻不麻烦，不过用 jquery 方式不简单，但轻车熟路。
有时候为了业务需要将某些 html 标签改一下颜色，比如说将首页的 tabmenu 中 博问 和 专区 改成红色，如下图：
那用 CSQuery 怎么处理呢？ 如果玩过 jquery，一般来说步骤如下：
有了步骤，C#代码如下：
static void Main(string[] args)
{
Config.HtmlEncoder = HtmlEncoders.None;
var jquery = CQ.CreateDocument(new WebClient().DownloadString("http://cnblogs.com"));
var html = jquery["#nav_left li"].Each(dom =>
{
var self = jquery[dom];
var text = self.Text();
if (text == "博问" || text == "专区")
{
self.Find("a").CssSet(new { color = "red" });
}
}).Render();
}
除了上面两个操作方法外，你还可以使用 after，before，replaceAll,IS 等等一百来个实用的方法，这篇肯定也无法一一介绍了，大家有兴趣可以下载下来看一看，捣鼓捣鼓。
除了抓取html中的元素，我觉得这玩意还可以用在发送邮件时操控邮件模板，毕竟在很久以前大家都是用jquery来绘制 html，所以用 CSQuery 也是可以的，相对使用 xslt 有利有弊吧，接下来做一个例子：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul id="main"></ul>
</body>
</html>
可以用 Append 将内容追加到 <ul> 节点内。
class Program
{
static void Main(string[] args)
{
Config.HtmlEncoder = HtmlEncoders.None;
var strlist = new string[2] { "1", "2" };
var path = Environment.CurrentDirectory + "\\2.html";
var jquery = CQ.CreateFromFile(path);
foreach (var str in strlist)
{
jquery.Find("#main").Append($"<li>{str}</li>");
}
var html = jquery.Render();
}
}
Render方法是将整个Dom渲染成html，但有时候你只需要得到你修改的那部分内容，而不是整个html，这就涉及到了部分渲染，可以用 RenderSelection 方法即可，代码如下：
static void Main(string[] args)
{
Config.HtmlEncoder = HtmlEncoders.None;
var strlist = new string[2] { "1", "2" };
var path = Environment.CurrentDirectory + "\\2.html";
var jquery = CQ.CreateFromFile(path);
var current = jquery.Find("#main");
foreach (var str in strlist)
{
current.Append($"<li>{str}</li>");
}
var html = current.RenderSelection();
Console.WriteLine(html);
}
------------- output ----------------
<ul id="main"><li>1</li><li>2</li></ul>
Jquery 这种操作模式对我个人来说还是比较舒服的，毕竟熟！ 不过在 html5 中也新增了 querySelector 和 querySelectorAll 支持 css3 选择器，非常强大，可 jquery 不光在选择器的灵活上，还在于对节点的灵活操作上，总的来说不是特别富交互的情况下可以怀旧一把。
*请认真填写需求信息，我们会在24小时内与您取得联系。
