WebTabs Test

自定义web-tabs组件用于实现经常需要的Tabs组件。

直接书写内容

代码：

body { color: red; background-color: black; }

console.log("Hello");

借助于自定义的trim-pre组件及esc-code组件，可做到在编写网页内容时版面较为整洁。渲染效果：

body { color: red; background-color: black; }

console.log("Hello");

分别导入XML及文本文件的内容

web-tabs除了可以使用标准的HTML子元素外，还有自定义的xml及text子元素，分别用于从XML文件中导入特定节点内容及导入特定文件的所有文本内容。

<web-tabs> <xml src="src.html"> <node idstr="script#vShader" title="Vertex Shader" /> <node idstr="script#fShader" title="Fragment Shader" /> </xml> <text src="src.js" title="JavaScript" /> </web-tabs>

xml及text元素均使用了AJAX技术来实现异步加载。

效果：

自动导入常用的标签页

一个页面经常需要用到多个web-tabs，每个web-tabs可能带有多个标签页。

有时，一个页面中的多个web-tabs可能带有内容相同的一或多个标签页，此时每次均重复编写这些重复的内容，不仅繁琐，而且页面代码很容易就会变得很长，充斥了众多重复的内容。

例如，设若我们需要在页面中编写以下代码：

div { display: grid; }

console.log("Hello");

在同一网页中，HTML标签页的内容经常会变，而CSS标签页及JavaScript标签页的内容基本上不变，此时，可将这两个标签页的内容提取起来，单独放置于一个外部文件default-tabs.html中：

如上所见，这里的代码也支持使用更加规范、更加安全的其type属性值为text/template的script标签。具体详见EscCode Demo。

然后，编写web-tabs的代码：

效果：

编写第2个web-tabs的代码：

Hello, WebTabs.

效果：

Hello, WebTabs.

代码编写量大幅缩减，而所指定文件中的内容以标签页的形式自动插入至组件中。

此功能也可通过上一节的技术来实现，但这里将导入指令放在组件的属性中，从而每个使用这种技术的组件均可节省至少4行的代码，页面更加简洁。

WebTabs的意义

WebTabs仅实现了作为标签页组件的最基本的功能，因此对各个标签页下面的内容不作更多的排版。LiveEditor继承于WebTabs，且进一步实现了CM6的代码编辑及语法加亮功能。