jQuery UI

Js

2時間

jQuery UIの特徴は

マウス操作やアニメーション機能などユーザインタフェースに特化したライブラリ

  • インタラクション
    • ドラッグ＆ドロップ、リサイズなど
  • ウィジェット
  • ヴィジュアル効果
    • アニメーション機能、エフェクト機能の強化など

jQuery UIを使うには

必要なファイル

手順

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-ui-1.8.24.custom/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.24.custom/js/jquery-ui-1.8.24.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.24.custom/css/ui-lightness/jquery-ui-1.8.24.custom.css" />

<!--変更したCSS-->
<style type="text/css">
	#tabdemo1.ui-tabs {
		padding: 0;
		border-width: 0;
	}
	
	#tabdemo1 .ui-widget-header {
		border: 0;
	}
	
	#tabdemo1 .ui-tabs-nav {
		border-width: 0;
		padding: 0;
		background: none #FFF;
	}
	
	#tabdemo1 .ui-tabs-panel {
		border-width: 2px;
		border-color:#FFCC00;
		background: #ffffff;
	}
	
	#tabdemo1 .ui-tabs-nav li.ui-tabs-selected {
		border-width: 2px;
		margin-bottom: -2px;
	}
	.ui-tabs .ui-tabs-nav li a
	{
	padding: 0;
	}
</style>

<title>tab | jquery UI</title>
</head>

<!--呼び出し-->
<script type="text/javascript">
$(function(){
	$('#tabdemo1').tabs();//これでtabdemo1に適用させる
});

</script>

<body>
<div style="clear: both" id="tabdemo1">
<ul>
	<li><a href="#tab-google1">Google</a></li>
	<li><a href="#tab-apple1">Apple</a></li>
	<li><a href="#tab-ms1">Microsoft</a></li>
	<li><a href="#tab-another1">Another01</a></li>
</ul>
<div id="tab-google1">
	<p>Android, Choromebooks</p>
</div>
<div id="tab-apple1">
	<p>iPhone, iPad</p>
</div>
<div id="tab-ms1">
	<p>Windows Phone</p>
</div>
<div id="tab-another1">
	<p>追加項目</p>
</div>
</div>

</body>
</html>

http://littlestar.under.jp/jquery_ui/jqueryui_tab.html