自定义 jQuery UI 小部件主题的综合指南

 
/*  Containers 
--------------------------------------------------- */ 
 
.content_container_1	{ 
	width: 800px; 
	margin: 50px 0px 20px 20px; 
} 
 
/*  Tabs  
--------------------------------------------------- */ 
 
#tabs p	{ 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 16px; 
} 
 
#tabs .tabs_img	{ 
	float: left; 
	background-color: #aaa; 
	padding: 8px; 
	margin: 0px 35px 15px 0px; 
}

 
// jQuery UI Tabs 
 
$(function() { 
	$( "#tabs" ).tabs(); 
});

 
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }

 
<!-- Begin Accordion Container --> 
<div class="content_container_2"> 
 
<h2>Accordion</h2> 
 
<!-- Begin Accordion --> 
<div id="accordion"> 
 
<!-- Begin Panel #1 --> 
	<h3><a href="#section1">Accordion</a></h3> 
	<div> 
 
	<!-- Begin Content Container Div --> 
	<div class="content_container_main"> 
 
		<!-- Left Content Div --> 
		<div class="content_1"> 
			@@##@@ 
			<p> 
				Default Accordion 
			</p> 
			@@##@@ 
			<p> 
				Accordion with Icons 
			</p> 
		</div> 
 
		<!-- Right Content Div --> 
		<div class="content_2"> 
			<h2>Accordion</h2> 
			<p> 
				An <a href="http://jqueryui.com/demos/accordion/" target="_blank" title="Accordion">Accordion</a> doesn't allow more than one content panel to be open at the same time. If you are looking for a widget that allows more than one content panel to be open, don't use an Accordion. 
			</p> 
			<p> 
				The markup uses a series of headers (H3 tags) and divs so the content is still usable even if the browser has JavaScript disabled. 
			</p>	 
			<p> 
				If you want Accordion sections to be collapsible, add "collapsible: true" to the JavaScript code.  
			</p>		 
			<p> 
				To set the Accordion so that the accordion sections open and close on mouseover, add event: "mouseover" to the JavaScript code. 
			</p> 
			<p> 
			<a href="http://jqueryui.com/demos/accordion/" target="_blank" title="Learn More">Learn More</a> 
			</p> 
		</div> 
 
	</div> 
	<!-- End Content Container Div --> 
 
	</div> 
<!-- End Panel #1 --> 
 
 
<!-- Panel #2 --> 
	<h3><a href="#section2">Tabs</a></h3> 
	<div> 
 
	<!-- Begin Content Container Div --> 
	<div class="content_container_main"> 
 
		<!-- Left Content Div --> 
		<div class="content_1"> 
			@@##@@ 
			<p> 
				Default Tabs 
			</p> 
			@@##@@ 
			<p> 
				Tabs Below Content 
			</p> 
			@@##@@ 
			<p> 
				Content via Ajax 
			</p> 
		</div> 
 
		<!-- Right Content Div --> 
		<div class="content_2"> 
			<h2>Tabs</h2> 
			<p> 
				<a href="http://jqueryui.com/demos/tabs/" target="_blank" title="Tabs">Tabs</a> break content into multiple sections that can be swapped to save space. The widget swaps the tabbed sections onClick by default, but can be changed to onHover instead. 
			</p> 
			<p> 
				If you want the Tabs sections to open on mouseover, add event: "mouseover" to the JavaScript code. 
			</p>		 
			<p> 
				If you want the Tabs content to be collapsible, add collapsible: "true" to the JavaScript code. 
			</p> 
			<p> 
				Other options for the tabs widget include content loaded via Ajax, collapse content, sortable, tabs below content, simple manipulation and cookie persistance. 
			</p> 
			<p> 
			<a href="http://jqueryui.com/demos/tabs/" target="_blank" title="Learn More">Learn More</a> 
			</p> 
		</div> 
 
	</div> 
	<!-- End Content Container Div --> 
 
	</div> 
<!-- End Panel #2 --> 
 
 
<!-- Panel #3 --> 
	<h3><a href="#section3">Datepicker</a></h3> 
	<div> 
 
	<!-- Begin Content Container Div --> 
	<div class="content_container_main"> 
 
		<!-- Left Content Div --> 
		<div class="content_1"> 
			<p class="left_col_1"> 
			@@##@@ 
			<br /> 
				Displayed Inline 
			</p> 
 
			<p class="left_col_2"> 
			@@##@@ 
			<br /> 
				Icon Trigger 
			</p> 
 
			<p class="left_col_3"> 
			@@##@@ 
			<br /> 
				With Button Bar 
			</p> 
 
			<p class="left_col_4"> 
			@@##@@ 
			<br /> 
				Month & Year Menus 
			</p> 
		</div> 
 
		<!-- Right Content Div --> 
		<div class="content_2"> 
			<h2>Datepicker</h2> 
			<p> 
				<a href="http://jqueryui.com/demos/datepicker/" target="_blank" title="Datepicker">Datepicker</a> is tied to form field input. A user can choose a date for the form field from an interactive calendar displayed in a small overlay using this function. 
			</p> 
			<p>		 
				To display the Datepicker embedded inline on a web page, call the .datepicker() on a div instead of a form field. 
			</p> 
			<p> 
				You can set the Datepicker to be displayed when clicking an icon. You can also set the Datepicker to display multiple months. 
			</p>		 
			<p> 
				The Datepicker function has a variety of settings including animations, month and year menus, dates in other months, display button bar, localize calendar and more. 
			</p> 
			<p> 
			<a href="http://jqueryui.com/demos/datepicker/" target="_blank" title="Learn More">Learn More</a> 
			</p> 
		</div> 
 
	</div> 
	<!-- End Content Container Div --> 
 
	</div> 
<!-- End Panel #3 --> 
 
 
<!-- Panel #4 --> 
	<h3><a href="#section4">Dialog</a></h3> 
	<div> 
 
	<!-- Begin Content Container Div --> 
	<div class="content_container_main"> 
 
		<!-- Left Content Div --> 
		<div class="content_1"> 
			@@##@@ 
			<p> 
				Basic Modal Dialog 
			</p> 
			@@##@@ 
			<p> 
				Modal Message 
			</p> 
		</div> 
 
		<!-- Right Content Div --> 
		<div class="content_2"> 
			<h2>Dialog</h2> 
			<p> 
				A <a href="http://jqueryui.com/demos/dialog/" target="_blank" title="Dialog">Dialog</a> is a floating window displayed in an overlay that covers the entire web page content. It contains a title bar, small to medium sized content area and can be closed with an "x" icon. 
			</p> 
			<p> 
				A scrollbar will automatically appear if the content length exceeds the maximum height. 
			</p>	 
			<p>		 
				The jQuery UI Dialog can be animated by specifying the desired effect in the JavaScript code. You must include the individual effects file for 	any effects you would like to use. 
			</p> 
			<p> 
				You can set the dialog so that it creates a modal message or a modal confirmation that a user must click on before continuing with the application. 
			</p>		 
			<p> 
			<a href="http://jqueryui.com/demos/dialog/" target="_blank" title="Learn More">Learn More</a> 
			</p> 
		</div> 
	</div> 
	<!-- End Content Container Div --> 
 
	</div> 
<!-- End Panel #4 --> 
 
 
</div> 
<!-- End Accordion --> 
 
</div> 
<!-- End Accordion Container -->

 
<div id="accordion"> 
    <h3><a href="#">First header</a></h3> 
    <div>First content</div> 
    <h3><a href="#">Second header</a></h3> 
    <div>Second content</div> 
</div>

 
<div> 
   <h3 class="subtitle">Subtitle</h3> 
</div>

 
#accordion  h3.subtitle	{ 
	font-size: 18px;  
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-weight: bold;	 
	color: #009999; 
}

 
/*  Containers 
--------------------------------------------------- */ 
 
.content_container_2	{ 
	width: 800px; 
	margin: 50px 0px 0px 20px; 
} 
 
/*  Accordion  
--------------------------------------------------- */ 
 
#accordion .content_container_main	{ 
	width: 750px; 
} 
 
#accordion .content_1	{ 
	width: 400px; 
	float: left; 
	font-size: 14px; 
	text-align: center; 
} 
 
#accordion .content_2	{ 
	width: 290px; 
	float: left; 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 16px; 
	margin: 0px 0px 0px 30px; 
} 
 
#accordion img 	{ 
	padding: 8px; 
	background-color: #aaa; 
	margin: 10px 0px 5px 0px; 
} 
 
#accordion h2	{ 
	margin: 5px 0px 10px 0px; 
	padding: 0px; 
	font-size: 30px;  
} 
 
#accordion p 	{ 
	margin: 0px 0px 15px 0px; 
	padding: 0px; 
} 
 
#accordion p.left_col_1, #accordion p.left_col_4 	{ 
	float: left; 
	margin: 0px; 
	padding: 0px; 
} 
 
#accordion p.left_col_2, #accordion p.left_col_3 	{ 
	float: right; 
	margin: 0px; 
	padding: 0px; 
}

 
// jQuery UI Accordion 
	 
$(function() { 
	var icons = { 
		header: "ui-icon-circle-arrow-e", 
		headerSelected: "ui-icon-circle-arrow-s" 
	}; 
	$( "#accordion" ).accordion({ 
		icons: icons 
	});		 
});

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

 
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #191919; background: #000 url(images/ui-bg-3.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }

 
<!-- Begin Buttons Container --> 
 
<div class="content_container_3"> 
 
<h2>Button</h2> 
 
<div class="demo"> 
	<button>Button with icon only</button> 
	<button>Button with icon on the left</button> 
	<button>Button with two icons</button> 
	<button>Button with two icons and no text</button> 
	<button>Button with text only</button> 
</div> 
 
</div> 
<!-- End Buttons Container -->

 
.content_container_3	{ 
	width: 950px; 
	margin: 50px 0px 20px 20px; 
}

 
// jQuery UI Button 
 
// First Button 
	$(function() { 
		$( ".demo button:first" ).button({ 
            icons: { 
                primary: "ui-icon-locked" 
            }, 
            text: false 
// Second Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-locked" 
            } 
// Third Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-gear", 
                secondary: "ui-icon-triangle-1-s" 
            } 
// Fourth Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-gear", 
                secondary: "ui-icon-triangle-1-s" 
            }, 
            text: false 
// Fifth Button 
        }).next().button({ 
		}); 
	});