jquery ui 主题_主题化jQuery UI手风琴

在本文中，我们将创建一些真实且实用的东西，并且将利用上一课中的结构选择器 ， box-sizing和CSS3 渐变来为jQuery UI Accordion创建自定义主题，并提高我们的CSS技能 。

HTML标记

首先，让我们将下面的div与id 手风琴放在一起，它将包含整个手风琴的内容。

<div id="accordion">
	<!-- the content -->
</div>

对于手风琴的内容，我们将有五个与网络相关的主题的随机部分，例如HTML5，CSS3 ，Sass，Dreamweaver和jQuery 。 这只是一个例子。 您实际上可以为内容添加任何内容，只要您保持相应更改的标记即可。 这是基于这5个主题的标记。

<h3><a href="#">HTML5</a></h3>
<div>
	<p>
		<strong>HTML5</strong> is a markup language for structuring and presenting content for the World Wide Web, and is a core technology of the Internet originally proposed by Opera Software. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and, as of July 2012, is still under development.
	</p>
</div>
<h3><a href="#">CSS3</a></h3>
<div>
	<p>
		Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called "modules". Each module adds new capabilities or extends features defined in CSS 2, over preserving backward compatibility. <em><strong>Source:</strong> <a href="http://en.wikipedia.org/wiki/Css">WikiPedia.org</a></em>
	</p>
</div>
<h3><a href="#">Sass</a></h3>
<div>
	<p>
		<strong>Sass</strong> makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
	</p>
</div>
<h3><a href="#">Dreamweaver</a></h3>
<div>
	<p>
		<strong>Adobe Dreamweaver</strong> (formerly Macromedia Dreamweaver) is a proprietary web development application originally created by Macromedia. It is now developed by Adobe Systems, which acquired Macromedia in 2005.
	</p>
</div>
<h3><a href="#">jQuery</a></h3>
<div>
	<p>
		<strong>jQuery</strong> is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
	</p>
</div>

每个部分由一个h3 （将成为该部分的标题）和一个div （将整个部分包装内容）组成，然后将它们放入之前创建的手风琴 div中。

至此，我们只处理HTML标记，因此当我们在浏览器中查看它时，什么也不会发生。

jQuery UI手风琴

我们的手风琴将基于jQuery UI ，因此我们需要将jQuery和jQuery UI库都包含在head标签中，并且我们将直接从CDN链接这些文件，如下所示。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

然后，将以下script放在它们后面。

$(function() {
	$("#accordion").accordion();
});

现在，手风琴应该已经可以工作了。 当您单击标题时，内容将展开 ，而当我们单击另一个标题时，它将折叠 。

但是，我们的手风琴仍然看起来是纯白色的，所以让我们为其添加一些样式。

基本样式

首先，我们需要使用Normalize.css重置所有默认元素样式，以保持跨不同浏览器的样式一致性 ，然后在html标签中添加背景色。 当处于活动状态或焦点状态时，我们还会从链接以及轮廓中删除默认下划线。

html {
	height: 100%;
	background: #e3e3e0;
}
a {
	text-decoration: none;
}
:focus, :active {
	outline: 0;
}

我们还将为所有元素的box-sizing应用border-box模型，如下所示：

* { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

造型手风琴

在本节中，我们将开始设计手风琴节的样式。 首先，我们需要为300px指定手风琴div容器并将其居中。

#accordion {
	width: 300px;
	margin: 50px auto;
}

手风琴的内容将为白色，而其中的文本为深灰#777 ，那么我们还将字体大小减小到10pt 。

#accordion .ui-accordion-content {
	width: 100%;
	background-color: #f3f3f3;
	color: #777;
	font-size: 10pt;
	line-height: 16pt;
}

内容由段落标签包裹，默认情况下，此标签具有顶部和底部边距 ，因此在此我们将删除边距并用20px的填充替换。

如果您没有将内容包装在<p>标记内或包含其他元素，而不是专门为p选择，我们将像这样从.ui-accordion-content选择任何直接元素。

#accordion .ui-accordion-content > * {
	margin: 0;
	padding: 20px;
}

另外，如果内容中有链接，我们会将颜色变成深灰色#777 。

#accordion .ui-accordion-content a {
	color: #777;
}

接下来，我们将设置手风琴头的样式。 手风琴头是一个h3标签，默认情况下它也具有顶部和底部边距 ，因此我们需要将它们都删除。

#accordion .ui-accordion-header {
	background-color: #ccc;
	margin: 0px;
}

我们还需要在标头内的锚标记中添加一些样式。 我们将锚标记上的文本设置为白色 ，将文本缩进10px ，最后将字体大小减小为12pt 。

#accordion .ui-accordion-header a {
	color: #fff;
	line-height: 42px;
	display: block;
	font-size: 12pt;
	width: 100%;
	text-indent: 10px;
}

我们将为每个标题赋予不同的颜色。 这可以通过使用结构选择器选择每个标头来完成，对于第一个标头，我们可以使用:first-of-type来选择它；

#accordion .ui-accordion-header:first-of-type {
	background-color: #fa9300;
	background-image: -moz-linear-gradient(top,  #fa9300 0%, #dc621e 100%); /* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa9300), color-stop(100%,#dc621e)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top,  #fa9300 0%,#dc621e 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top,  #fa9300 0%,#dc621e 100%); /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top,  #fa9300 0%,#dc621e 100%); /* IE10+ */
	background-image: linear-gradient(to bottom,  #fa9300 0%,#dc621e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9300', endColorstr='#dc621e',GradientType=0 ); /* IE6-9 */
}

#accordion .ui-accordion-header:nth-of-type(2) {
	background-color: #389abe;
	background-image: -moz-linear-gradient(top,  #389abe 0%, #2a7b99 100%); /* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#389abe), color-stop(100%,#2a7b99)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top,  #389abe 0%,#2a7b99 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top,  #389abe 0%,#2a7b99 100%); /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top,  #389abe 0%,#2a7b99 100%); /* IE10+ */
	background-image: linear-gradient(to bottom,  #389abe 0%,#2a7b99 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389abe', endColorstr='#2a7b99',GradientType=0 ); /* IE6-9 */
}
#accordion .ui-accordion-header:nth-of-type(3) {
	background-color: #f87aa0; /* Old browsers */
	background-image: -moz-linear-gradient(top, #f87aa0 0%, #c86585 100%); /* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f87aa0), color-stop(100%,#c86585)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #f87aa0 0%,#c86585 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top, #f87aa0 0%,#c86585 100%); /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top,  #f87aa0 0%,#c86585 100%); /* IE10+ */
	background-image: linear-gradient(to bottom,  #f87aa0 0%,#c86585 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f87aa0', endColorstr='#c86585',GradientType=0 ); /* IE6-9 */
}
#accordion .ui-accordion-header:nth-of-type(4) {
	background-color: #a8b700;
	background-image: -moz-linear-gradient(top,  #a8b700 0%, #82922a 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8b700), color-stop(100%,#82922a)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top,  #a8b700 0%,#82922a 100%); 
	background-image: -o-linear-gradient(top,  #a8b700 0%,#82922a 100%);
	background-image: -ms-linear-gradient(top,  #a8b700 0%,#82922a 100%);
	background-image: linear-gradient(to bottom,  #a8b700 0%,#82922a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8b700', endColorstr='#82922a',GradientType=0 ); /* IE6-9 */
}

…对于第五个标题（在本例中为最后一个标题），我们可以使用:last-of-type来选择它；

#accordion .ui-accordion-header:last-of-type {
	background-color: #b3bec4;
	background-image: -moz-linear-gradient(top,  #b3bec4 0%, #95a0a4 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3bec4), color-stop(100%,#95a0a4));
	background-image: -webkit-linear-gradient(top,  #b3bec4 0%,#95a0a4 100%);
	background-image: -o-linear-gradient(top,  #b3bec4 0%,#95a0a4 100%);
	background-image: -ms-linear-gradient(top,  #b3bec4 0%,#95a0a4 100%);
	background-image: linear-gradient(to bottom,  #b3bec4 0%,#95a0a4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3bec4', endColorstr='#95a0a4',GradientType=0 ); /* IE6-9 */
}

好了，现在让我们看一下结果。

它开始看起来不错，但是，您可能已经意识到我们没有详细解释结构选择器的所有内容，因此，如果您对这种类型的选择器的工作方式感到困惑，建议您先阅读我们先前的文章CSS3 First-of类型 ，然后再回来。

最后细节

让我们为手风琴添加更多细节，因为一个像素可以使最终结果有很大的不同。

#accordion .ui-accordion-header a {
	text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
	text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
	border-right: 1px solid rgba(0, 0, 0, .2);
	border-left: 1px solid rgba(0, 0, 0, .2);
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	border-top: 1px solid rgba(250, 250, 250, .2);
}

在上面的代码段中，我们为带有rgba颜色模式的一个像素添加了border-right ， border-left ， border-bottom 。

边框颜色实际上是黑色，但是由于我们将强度降低到20% ，所以颜色变为透明并产生了背景的一种较暗的颜色版本。

我们也对border-top做了同样的操作，但是我们应用白色而不是黑色来创建某种突出显示效果。

但是，如果您仔细查看标题，则顶部看起来不正确； 标题的顶部似乎没有边框，因此在这里，我们将做一个技巧来模仿border-top因为我们不能在一个规则集中两次添加border-top 。

这是我们的方法。 我们添加一个垂直长度为负值的内部阴影，但是由于在最后一节中不需要此内部阴影，因此我们将其删除。

我们还添加了另一个内部阴影，但是此阴影将出现在顶部，因此看起来像标题的阴影。

#accordion .ui-accordion-content {
	box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, .4),
				inset 0px 1px 1px 0px rgba(0, 0, 0, .2);
}
#accordion .ui-accordion-content:last-of-type {
	box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .2),
				inset 0px 0 0px 0px rgba(0, 0, 0, .5);
}

IE浏览器

最后但并非最不重要的一点，我们不要忘记我们的朋友Internet Explorer。 IE6到IE8当前不支持:nth-of-type选择器及其种类，因此，要在IE中获得更好的兼容性，可以使用Mootools和Selectivizr.js 。

将以下两行放在jQuery和jQuery UI之前：

<!--[if lte IE 8]>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/selectivizr.js"></script>
<![endif]-->

最后，我们现在可以观看现场演示，并从下面的链接下载我们的手风琴源。

• 演示版
• 下载源

最后的话

我们已完成所有步骤。 如您所见，每个新的选择器（如:nth-of-type和新的属性（如CSS3中的box-sizing ）都具有许多优点，并解决了Web设计中的许多问题。

在本教程中，我们使用:nth-of-type来选择每个手风琴的标题，而无需添加额外的类或使用从jQuery UI生成的类，我们还使用了box-sizing因此我们不必担心计算出手风琴的正确宽度元件。 而且由于我们使用CSS3渐变作为标头，因此HTTP请求数减少了。

感谢您阅读本教程，希望您喜欢它。

翻译自: https://www.hongkiat.com/blog/theming-jquery-ui-accordion/