JavaScript + Ajax 実践サンプル集 - Tabs Sortable (並べ替え)

Tabs Sortable (並べ替え)

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQuery UIのtabsプラグインを使用してコンテンツをタブで切り替えます。[Tab1-3]をクリックするとコンテンツが表示されます。タブをドラッグ＆ドロップすると、タブを並べ替えることができます。たとえば、[Tab 1]を最後にするには、[Tab 1]をドラッグして[Tab 3]の後ろにドロップします。

このサンプルを編集して試してみる

タブを並べ替えするには、jQuery UIのsortableプラグイン(ui.sortable.js)を組み込む必要があります。

$(function() {
  $("#tabs").tabs().find(".ui-tabs-nav").sortable();
});

<!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>
  <title>jQuery UI Tabs - Sortable</title>
  <link href="jQuery/UI/ui.all.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/UI/demos.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    div.demo { width: 400px; }
  </style>
  <script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.core.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.sortable.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.tabs.js" type="text/javascript"></script>
  
	<script type="text/javascript">
	  $(function() {
	    $("#tabs").tabs().find(".ui-tabs-nav").sortable();
	  });
	</script>
  
</head>
<body>
<div class="demo">

<div id="tabs">
	  <ul>
		  <li><a href="#tabs-1">Tab 1</a></li>
		  <li><a href="#tabs-2">Tab 2</a></li>
		  <li><a href="#tabs-3">Tab 3</a></li>
	  </ul>
	  <div id="tabs-1">
	    <h3>Tab 1</h3>
		  <p>
        Lorem ipsum id feugiat mentitum definitiones usu, his ex habemus accusata disputationi, 
        has et solet lobortis reformidans. Ad mei lucilius prodesset deterruisset. 
        Debitis impedit pertinax cu his, ad pri modo putent consequuntur. 
        Albucius eligendi quaerendum eos ex, postea nemore appetere sit ex. 
        Ei luptatum apeirian mei, vix in vero voluptatibus. 
        At discere petentium patrioque nec, nam dico accusam fierent cu.		  
		  </p>
	  </div>
	  <div id="tabs-2">
	    <h3>Tab 2</h3>
		  <p>
        Vix ea semper detracto, cu eam brute nostro eirmod. 
        Et qui legere repudiare consectetuer, dicam graeci reformidans nec te, 
        ad duis elaboraret quo. 
        Rebum fabulas dignissim mea eu, eligendi moderatius ad vel, 
        sea falli debet viderer an. Aliquid adolescens voluptaria nam an, 
        minim bonorum interesset no mea. Facete saperet nonummy ex vel, 
        ne qui salutandi consulatu conceptam, pericula erroribus vis ei. 
        Duo ei putant placerat accusata.
		  </p>
	  </div>
	  <div id="tabs-3">
	    <h3>Tab 3</h3>
		  <p>
        Ne vim principes gubergren posidonium, no reque accusata cum. 
        Dicta cetero vivendum eu vix, sint velit temporibus ad vel, 
        qui in puto prompta erroribus. 
        Singulis aliquando voluptatibus an eos, per agam solet accumsan ne. 
        Duo dicam sensibus periculis ne, facer altera dissentias est in. 
        Cibo option aperiam ea mea, alii ancillae sadipscing cum et, ea veniam eligendi adipisci usu. 
        Cu has molestie probatus philosophia, ad pri virtute consulatu interpretaris.		  
		  </p>
		  <p>
        Sint nonumy animal no sea, eum id sanctus omnesque detraxit, 
        nostro propriae in eum. Quo solet possit eripuit ea, exerci volumus pri ex. 
        Magna singulis theophrastus ea mel, homero fierent instructior ne quo, 
        assum omnium duo ex. Justo liber partiendo ad sed, qui oratio lobortis ei.
        Eos at eruditi gubergren dissentiet, est no takimata pertinax salutatus.
      </p>
	  </div>
  </div>

</div>

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Tabs Sortable (並べ替え)

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Tabs Sortable (並べ替え)

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5