整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
VvvebJs是一個(gè)開源的網(wǎng)頁拖拽自動(dòng)生成的JavaScript庫，你可以以簡(jiǎn)單拖拽的方式生成自己需要的網(wǎng)頁樣式，內(nèi)置jquery和Bootstrap，你可以拖拽相關(guān)的組件進(jìn)行網(wǎng)頁的構(gòu)建，非常的方便，而且可以實(shí)時(shí)修改代碼，功能豐富，使用簡(jiǎn)單，界面友好，特別適合一些專注于展示的網(wǎng)頁設(shè)計(jì)，需要的朋友不可錯(cuò)過！
https://github.com/givanz/VvvebJs
默認(rèn)情況下，編輯器附帶Bootstrap 4和Widgets組件，可以使用任何類型的組件和輸入進(jìn)行擴(kuò)展。
如下代碼：
<!-- 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>
要初始化編輯器，調(diào)用Vvveb.Builder.init。第一個(gè)參數(shù)是要加載以進(jìn)行編輯的URL，它必須位于相同的子域中才能進(jìn)行編輯。第二個(gè)參數(shù)是頁面加載完成時(shí)調(diào)用的函數(shù)，默認(rèn)情況下調(diào)用編輯器Gui.init();
Component Group是一個(gè)組件集合，例如Bootstrap 4組由Button和Grid等組件組成，該對(duì)象僅用于在編輯器左側(cè)面板中對(duì)組件進(jìn)行分組。例如，Widgets組件組只有兩個(gè)組件視頻和地圖，并被定義為如下
Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/video"];
Component是一個(gè)對(duì)象，它提供可以在畫布上放置的html以及在選擇組件時(shí)可以編輯的屬性，例如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對(duì)象來編輯屬性，例如文本輸入，選擇，顏色，網(wǎng)格行等。例如，TextInput擴(kuò)展Input對(duì)象并定義為：
var TextInput = $.extend({}, Input, {
events: {
"keyup": ['onChange', 'input'],
},
setValue: function(value) {
$('input', this.element).val(value);
},
init: function(data) {
return this.render("textinput", data);
},
}
);
輸入還需要一個(gè)在編輯器html（在editor.html中）定義為<script>標(biāo)簽的模板，其id為vvveb-input-inputname，例如對(duì)于文本輸入為vvveb-input-textinput，定義：
<script id="vvveb-input-textinput" type="text/html">
<div>
<input name="{%=key%}" type="text" class="form-control"/>
</div>
</script>
以上是借助瀏覽器翻譯工具，對(duì)官網(wǎng)的文檔進(jìn)行簡(jiǎn)單的翻譯，可能會(huì)有些不夠準(zhǔn)確的地方，感興趣的小伙伴可以直接查看相關(guān)文檔！
VvvebJs是一個(gè)非常強(qiáng)大的網(wǎng)頁可視化生成構(gòu)建工具，讓不懂網(wǎng)頁設(shè)計(jì)的小伙伴們也能夠通過拖拽來生成美觀大方的網(wǎng)頁出來，讓設(shè)計(jì)網(wǎng)頁就像設(shè)計(jì)圖片一樣，VvvebJs特別適合展示型網(wǎng)頁，甚至可以不需要代碼就能完成一項(xiàng)復(fù)雜的網(wǎng)頁設(shè)計(jì)，總體來說，VvvebJs是一個(gè)值得嘗試的工具！
前在用fourinone分布式框架的時(shí)候需要做一個(gè)Web頁面，可以借助fourinone的api展示各存儲(chǔ)節(jié)點(diǎn)的樹形目錄結(jié)構(gòu)。我最初的思路是利用遞歸掃面各節(jié)點(diǎn)下的文件和目錄，并將其存儲(chǔ)在數(shù)據(jù)庫。然后從數(shù)據(jù)庫取出展示。額，好像跑題了... 不管了，總之每個(gè)節(jié)點(diǎn)的文件和目錄的數(shù)量太大，所以只能是找一個(gè)可以異步加載并顯示樹形目錄結(jié)構(gòu)的框架。于是我百度到了zTree。 zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。
今天我們先來學(xué)習(xí)一下如何靜態(tài)加載數(shù)據(jù)并顯示出樹形目錄結(jié)構(gòu)。
首先，zTree是基于jQuery的，所以先在網(wǎng)頁中引入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>
然后創(chuàng)建一個(gè)顯示區(qū)域
<div id="demotree" style="margin-left:230px;margin-top:50px"> <!--定義div來放樹-->
<ul id="treeDemo" class="ztree"></ul> <!--樹的本質(zhì)是無序列表，綁定數(shù)據(jù)時(shí)根據(jù)數(shù)據(jù)的關(guān)系添加li或ul-->
</div>
然后定義json格式的數(shù)據(jù)
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是節(jié)點(diǎn)id，pId是父節(jié)點(diǎn)id，通過他們的關(guān)系來綁定
接著對(duì)樹進(jìn)行設(shè)置
var setting = {//樹的設(shè)置
//外觀
view: {
showIcon: true, //設(shè)置是否顯示節(jié)點(diǎn)圖標(biāo)
showLine: true, //設(shè)置是否顯示節(jié)點(diǎn)與節(jié)點(diǎn)之間的連線
fontCss : {color:"black",size:30}//字體顏色和大小
},
//數(shù)據(jù)類型
data: {
simpleData: {
enable: true, //設(shè)置是否啟用簡(jiǎn)單數(shù)據(jù)格式（json格式）
}
},
//回調(diào)事件
callback: {//這里可以做很多回調(diào)，比如點(diǎn)擊，點(diǎn)擊前等等，在下一篇的動(dòng)態(tài)加載數(shù)據(jù)中會(huì)介紹
}
};
最后是對(duì)樹進(jìn)行初始化
var zTree;
$(document).ready(function(){//全部加載完后執(zhí)行
$.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> <!--樹的本質(zhì)是無序列表，綁定數(shù)據(jù)時(shí)根據(jù)數(shù)據(jù)的關(guān)系添加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是節(jié)點(diǎn)id，pId是父節(jié)點(diǎn)id，通過他們的關(guān)系來綁定
var setting = {//樹的設(shè)置
//外觀
view: {
showIcon: true, //設(shè)置是否顯示節(jié)點(diǎn)圖標(biāo)
showLine: true, //設(shè)置是否顯示節(jié)點(diǎn)與節(jié)點(diǎn)之間的連線
fontCss : {color:"black",size:30}//字體顏色和大小
},
//數(shù)據(jù)類型
data: {
simpleData: {
enable: true, //設(shè)置是否啟用簡(jiǎn)單數(shù)據(jù)格式（json格式）
}
},
//回調(diào)事件
callback: {
}
};
var zTree;
$(document).ready(function(){//全部加載完后執(zhí)行
$.fn.zTree.init($("#treeDemo"), setting, treeNodes); //初始化樹
});
</script>
</html>
最后謝謝大家觀看，下一篇是利用ajax和zTree動(dòng)態(tài)加載樹形目錄結(jié)構(gòu)，實(shí)現(xiàn)點(diǎn)擊一個(gè)文件夾加載一層。
對(duì)了！還有，zTree可以到它的官網(wǎng)下載，里面也包含了jQuery。再見！
前段時(shí)間搞了一個(gè)地方性民生資訊號(hào)，資訊嘛，都是我抄你的，你抄官媒的，小市民都喜歡奇聞異事，所以就存在一個(gè)需求，如何去定向抓取奇聞異事的地方號(hào)上的新聞，其實(shí)做起來很簡(jiǎn)單，用邏輯回歸即可，這篇主要討論如何去抓取，在 C# 中大家都知道抓取通用的庫是 HtmlAgilityPack，但是這個(gè)庫主流的做法是采用 xpath 提取網(wǎng)頁內(nèi)容，這就讓我很不爽了，畢竟不熟悉莫名的抵抗哈，像我這個(gè)年紀(jì)的碼農(nóng)，被 Jquery 教育了至少 5-6 年，所以必須用 類Jquery 的方式，在 python 中有 cquery 做這件事情，那在 C# 中有沒有類似的方式呢？ 嘿嘿，萬能的 github 上還真有。。。 就是本篇介紹的 CSQuery。
github的地址： https://github.com/zone117x/CsQuery 然后在vs中 nuget 一下即可：
一切都準(zhǔn)備就緒了，那怎么用呢？ 不著急，我以博客園舉兩個(gè)例子。
如上圖，要想獲取這里的 友情鏈接幾個(gè)大字，直接用 text() 肯定是不行的，默認(rèn)情況它會(huì)將所有的子節(jié)點(diǎn)的文本也會(huì)抓到，如下圖：
那怎么處理呢？ 可以用 jquery 提供的 contents 方法，然后在獲取的所有子節(jié)點(diǎn)中判斷是否有 文本節(jié)點(diǎn)，最后獲取文本節(jié)點(diǎn)的內(nèi)容即可，如下代碼：
用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 提取這樣的內(nèi)容麻不麻煩，不過用 jquery 方式不簡(jiǎn)單，但輕車熟路。
有時(shí)候?yàn)榱藰I(yè)務(wù)需要將某些 html 標(biāo)簽改一下顏色，比如說將首頁的 tabmenu 中 博問 和 專區(qū) 改成紅色，如下圖：
那用 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 == "專區(qū)")
{
self.Find("a").CssSet(new { color = "red" });
}
}).Render();
}
除了上面兩個(gè)操作方法外，你還可以使用 after，before，replaceAll,IS 等等一百來個(gè)實(shí)用的方法，這篇肯定也無法一一介紹了，大家有興趣可以下載下來看一看，搗鼓搗鼓。
除了抓取html中的元素，我覺得這玩意還可以用在發(fā)送郵件時(shí)操控郵件模板，畢竟在很久以前大家都是用jquery來繪制 html，所以用 CSQuery 也是可以的，相對(duì)使用 xslt 有利有弊吧，接下來做一個(gè)例子：
<!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 將內(nèi)容追加到 <ul> 節(jié)點(diǎn)內(nèi)。
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方法是將整個(gè)Dom渲染成html，但有時(shí)候你只需要得到你修改的那部分內(nèi)容，而不是整個(gè)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 這種操作模式對(duì)我個(gè)人來說還是比較舒服的，畢竟熟！ 不過在 html5 中也新增了 querySelector 和 querySelectorAll 支持 css3 選擇器，非常強(qiáng)大，可 jquery 不光在選擇器的靈活上，還在于對(duì)節(jié)點(diǎn)的靈活操作上，總的來說不是特別富交互的情況下可以懷舊一把。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
