整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
