el-tag组件拖动_X-Tag Web组件

el-tag组件拖动

One of the awesome parts at working at Mozilla is being able to see and use projects from fellow engineers before they are shared with the world. One such effort comes from Daniel Buchner: X-Tag. X-Tag is a cross-browser web component library that uses custom tags and a bit of JavaScript to create components we've been creating for years:

Mozilla工作中最出色的部分之一是能够在与他人共享之前查看和使用其他工程师的项目。 Daniel Buchner： X-Tag就是其中之一 。 X-Tag是跨浏览器的Web组件库，它使用自定义标签和一些JavaScript来创建我们已经创建多年的组件：

• Accordions

  手风琴

• Tab Wigets

  标签小工具

• Sliding Panels (think slideshows)

  滑动面板(想想幻灯片)

• Flipping Panels (think mobile apps)

  翻转面板(想想移动应用程序)

• Modal Dialogs

  模态对话框

There are even a few advanced components like:

甚至还有一些高级组件，例如：

• Maps

  地图

• Autosuggest Inputs

  自动建议输入

• Pagination

  分页

Each piece of these components is completely styleable, allowing for the most flexible components possible. Let's have a quick look at how these components are created!

这些组件中的每一个都是完全可样式化的，允许使用最灵活的组件。 让我们快速看一下如何创建这些组件！

X标签设定 (X-Tag Setup)

Regardless of which X-Tag component you'd like to use, you must include the main x-tag.js script. For every component you'd like to use, you'll need to include it's Javascript and CSS file:

无论您要使用哪个X-Tag组件，都必须包含主要的x-tag.js脚本。 对于您要使用的每个组件，都需要包括它的Javascript和CSS文件：

<script type="text/javascript" src="x-tag/x-tag.js"></script>

<!-- Accordion -->
<link rel="stylesheet" type="text/css" href="x-tag/elements/accordion/accordion.css" />
<script type="text/javascript" src="x-tag/elements/accordion/accordion.js"></script>

使用X标签组件 (Using X-Tag Components)

With the necessary JavaScript files in place, you can now use the X-Tag components!

有了必要JavaScript文件后，您现在就可以使用X-Tag组件了！

<!-- create an accordion -->
<h3>Accordion</h3>
<x-accordion id="accordion">
	<x-toggler selected="true">Toggler 1</x-toggler>
	<div>
		This is the content.
	</div>
	<x-toggler>Toggler 2</x-toggler>
	<div>
		This is the content 2.
	</div>
	<x-toggler>Toggler 3</x-toggler>
	<div>
		This is the content 2.
	</div>
</x-accordion>

<!-- create a tab box -->
<h3>TabBox</h3>
<x-tabbox id="tabbox">
	<x-tabs>
		<x-tab selected="true">Tab 1</x-tab>
		<x-tab>Tab 2</x-tab>
		<x-tab>Tab 3</x-tab>
	</x-tabs>
	
	<x-tabpanels>
		<x-tabpanel selected="true">
			<p>
				This is tab content 1
			</p>
		</x-tabpanel>
		<x-tabpanel>
			<p>
				This is tab content 2
			</p>
		</x-tabpanel>
		<x-tabpanel>
			<p>
				This is tab content 3
			</p>
		</x-tabpanel>
	</x-tabpanels>
</x-tabbox>

<!-- create a map -->
<x-map data-key="Cloudmade/OpenStreetMaps-API-Key"></x-map>

So why X-Tag? Take a step back and think about one of the oldest JavaScript tricks in the book: INPUT placeholders. It took almost a decade to get that basic functionality into the spec. Think about how little has been done in the way of FORM child enhancements. X-Tag is a first step in pushing for native component support in browsers.

那么为什么要使用X-Tag？ 退后一步，思考书中最古老JavaScript技巧之一：INPUT占位符。 将基本功能纳入规格花了将近十年的时间。 考虑一下FORM子级增强方面所做的工作很少。 X-Tag是推动浏览器中本机组件支持的第一步。

浏览器支持 (Browser Support)

X-Tag supports all A-grade browsers. IE9 and Opera support is almost complete, IE8 support will be following shortly.

X-Tag支持所有A级浏览器。 IE9和Opera的支持已接近完成，不久之后将提供IE8的支持。

你怎么看？ (What Do You Think?)

I love the X-Tag library. Simple, effective, customizable. There are many libraries which accomplish the components of X-Tag, but this approach is much simpler, and (hopefully) a step toward native support. I wouldn't mind seeing a sibling theme library though. What do you think of X-Tag? Have any ideas for more components that should live within X-Tag?

我喜欢X-Tag库。 简单，有效，可定制。 有许多库可以完成X-Tag的组件，但是这种方法要简单得多，而且(希望)朝着本机支持迈出了一步。 我不介意看到同级主题库。 您如何看待X-Tag？ 对于X-Tag中应包含的更多组件有什么想法？

翻译自: https://davidwalsh.name/xtag-web-components

el-tag组件拖动