JqueryUI - Sekmeler

Sekmeler, aralarında hızla geçiş yapmamızı sağlayan mantıksal olarak gruplanmış içerik kümeleridir. Sekmeler, akordeonlar gibi yerden tasarruf etmemizi sağlar. Sekmelerin düzgün çalışması için, aşağıdaki işaretleme kümesinin kullanılması gerekir -

Sekmeler, sıralı (<ol>) veya sırasız (<ul>) bir listede olmalıdır.
Her sekme başlığı her bir <li> içinde olmalı ve href niteliğine sahip bağlantı (<a>) etiketiyle sarmalanmalıdır .
Her sekme paneli herhangi bir geçerli öğe olabilir, ancak ilişkili sekmenin bağlantısındaki karmaya karşılık gelen bir kimliği olmalıdır .

jQueryUI bize tabs () yönteminin sayfa içindeki HTML öğelerinin görünümünü büyük ölçüde değiştirmesini sağlar. Bu yöntem, HTML kodunu (jQuery kullanıcı arayüzünde dahili olarak) dolaşır ve ilgili öğelere (burada, sekmeler) uygun stili vermek için yeni CSS sınıfları ekler.

Sözdizimi

tabs () yöntem iki şekilde kullanılabilir -

$ (seçici, bağlam) .tabs (seçenekler) Yöntem
$ (seçici, bağlam) .tabs ("eylem", parametreler) Yöntem

$ (seçici, bağlam) .tabs (seçenekler) Yöntem

Sekmeler (seçenekler) yöntemi bir HTML elemanı ve içeriği sekmeler olarak yönetilmesi gerektiğini beyan eder. Seçenekler sekmelerin görünümünü ve davranışını belirten bir nesnedir parametresi.

Sözdizimi

$(selector, context).tabs (options);

JavaScript nesnesini kullanarak bir seferde bir veya daha fazla seçenek sağlayabilirsiniz. Sağlanacak birden fazla seçenek varsa, bunları virgül kullanarak aşağıdaki gibi ayıracaksınız -

$(selector, context).tabs({option1: value1, option2: value2..... });

Aşağıdaki tablo, bu yöntemle kullanılabilecek farklı seçenekleri listelemektedir -


$( ".selector" ).tabs (
   { active: 1 }
);
$( ".selector" ).tabs (
   { collapsible: true }
);
$( ".selector" ).tabs (
   { disabled: [ 0, 2 ] }
);
$( ".selector" ).tabs (
   { event: "mouseover" }
);
$( ".selector" ).tabs (
   { heightStyle: "fill" }
);
$( ".selector" ).tabs (
   { { hide: { effect: "explode", duration: 1000 } } }
);
$( ".selector" ).tabs (
   { show: { effect: "blind", duration: 800 } }
);

Sr.No.	Seçenek ve Açıklama
1	aktif Bu seçenek, geçerli etkin sekmeyi / paneli belirtir. Varsayılan olarak değeri0. Option - active Bu seçenek, geçerli etkin sekmeyi / paneli belirtir. Varsayılan olarak değeri0. Bu tip olabilir - Boolean- Yanlış olarak ayarlandığında , tüm panelleri daraltır. Bu gerektiren katlanabilir hareket etme seçeneği doğrudur . Integer - Etkin (açık) olan panelin sıfır tabanlı dizini. Negatif bir değer, son panelden geriye giden panelleri seçer. Syntax `$( ".selector" ).tabs ( { active: 1 } );`
2	katlanabilir Bu seçenek true olarak ayarlandığında sekmelerin seçiminin kaldırılmasına izin verir. Yanlış olarak ayarlandığında (varsayılan), seçili sekmeye tıklamak seçimi kaldırmaz (seçili kalır). Varsayılan olarak değerifalse. Option - collapsible Bu seçenek true olarak ayarlandığında sekmelerin seçiminin kaldırılmasına izin verir. Yanlış olarak ayarlandığında (varsayılan), seçili sekmeye tıklamak seçimi kaldırmaz (seçili kalır). Varsayılan olarak değerifalse. Syntax `$( ".selector" ).tabs ( { collapsible: true } );`
3	engelli Bu seçenek, devre dışı bırakılan (ve bu nedenle seçilemeyen) dizin sekmelerini belirtmek için bir dizi kullanır. Örneğin, ilk iki sekmeyi devre dışı bırakmak için [0, 1] kullanın. Varsayılan olarak değerifalse. Option - disabled Bu seçenek, devre dışı bırakılan (ve bu nedenle seçilemeyen) dizin sekmelerini belirtmek için bir dizi kullanır. Örneğin, ilk iki sekmeyi devre dışı bırakmak için [0, 1] kullanın. Varsayılan olarak değerifalse. Bu tip olabilir - Boolean - Tüm sekmeleri etkinleştirin veya devre dışı bırakın. Array - Devre dışı bırakılması gereken sekmelerin sıfır tabanlı dizinlerini içeren bir dizi, örneğin [0, 2], birinci ve üçüncü sekmeyi devre dışı bırakır. Syntax `$( ".selector" ).tabs ( { disabled: [ 0, 2 ] } );`
4	Etkinlik Bu seçenek, kullanıcıların yeni bir sekme seçmesine izin veren bir olay adıdır. Örneğin, bu seçenek "fareyle üzerine gelme" olarak ayarlanmışsa, fareyi bir sekmenin üzerine getirmek onu seçecektir. Varsayılan olarak değeri"click". Option - event Bu seçenek, kullanıcıların yeni bir sekme seçmesine izin veren bir olay adıdır. Örneğin, bu seçenek "fareyle üzerine gelme" olarak ayarlanmışsa, fareyi bir sekmenin üzerine getirmek onu seçecektir. Varsayılan olarak değeri"click". Syntax `$( ".selector" ).tabs ( { event: "mouseover" } );`
5	heightStyle Bu seçenek, sekme widget'ının ve her panelin yüksekliğini kontrol eder. Varsayılan olarak değeri"content". Option - heightStyle Bu seçenek, sekme widget'ının ve her panelin yüksekliğini kontrol eder. Varsayılan olarak değeri"content". Olası değerler - auto - Tüm paneller en yüksek panelin yüksekliğine ayarlanacaktır. fill - Sekmelerin üst öğe yüksekliğine bağlı olarak mevcut yüksekliğe genişletin. content - Her panel yalnızca içeriği kadar uzun olacaktır. Syntax `$( ".selector" ).tabs ( { heightStyle: "fill" } );`
6	saklamak Bu seçenek, panelin gizlenmesinin nasıl canlandırılacağını belirler. Varsayılan olarak değerinull. Option - hide Bu seçenek, panelin gizlenmesinin nasıl canlandırılacağını belirler. Varsayılan olarak değerinull. Bu tip olabilir - Boolean- Yanlış olarak ayarlandığında , hiçbir animasyon kullanılmayacak ve panel hemen gizlenecektir. Number - Panel, belirtilen süre ve varsayılan yumuşatma ile kaybolur. String- Panel, belirtilen efekt kullanılarak gizlenecektir. Değer slideUp veya katlanabilir Object- Bu tür için özelliklerin etkisi , gecikmesi , süresi ve rahatlaması sağlanabilir. Syntax `$( ".selector" ).tabs ( { { hide: { effect: "explode", duration: 1000 } } } );`
7	göstermek Bu seçenek, panel gösteriminin nasıl canlandırılacağını belirler. Varsayılan olarak değerinull. Option - show Bu seçenek, panel gösteriminin nasıl canlandırılacağını belirler. Varsayılan olarak değerinull. Bu tip olabilir - Boolean- Yanlış olarak ayarlandığında , hiçbir animasyon kullanılmayacak ve panel hemen gösterilecektir. Number - Panel, belirtilen süre ve varsayılan yumuşatma ile kaybolur. String- Panel, belirtilen efekt kullanılarak gösterilecektir. Değer slideUp veya katlanabilir . Object- Bu tür için özelliklerin etkisi , gecikmesi , süresi ve rahatlaması sağlanabilir. Syntax `$( ".selector" ).tabs ( { show: { effect: "blind", duration: 800 } } );`

Aşağıdaki bölüm size sekme işlevselliği ile ilgili birkaç çalışma örneği gösterecektir.

Varsayılan İşlevsellik

Aşağıdaki örnek, sekme işlevselliğinin basit bir örneğini gösterir, hiçbir parametreyi tabs() yöntem.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css
         " rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#tabs-1" ).tabs();
         });
      </script>
		
      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-1">
         <ul>
            <li><a href = "#tabs-2">Tab 1</a></li>
            <li><a href = "#tabs-3">Tab 2</a></li>
            <li><a href = "#tabs-4">Tab 3</a></li>
         </ul>
         <div id = "tabs-2">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor sit 
               amet, consectetur, adipisci velit... 
            </p>
         </div>
         <div id = "tabs-3">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-4">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Yukarıdaki kodu bir HTML dosyasına kaydedelim tabsexample.htmve javascript'i destekleyen standart bir tarayıcıda açın, aşağıdaki çıktıyı görmelisiniz. Şimdi, sonuçla oynayabilirsiniz -

Yukarıdaki örnekte, içerik arasında geçiş yapmak için sekmelere tıklayın.

HeightStyle, katlanabilir ve gizleme kullanımı

Aşağıdaki örnek, üç seçeneğin kullanımını göstermektedir (a) heightStyle (b) collapsible, ve (c) hide JqueryUI'nin sekmeler işlevinde.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-5" ).tabs({
               heightStyle:"fill",
               collapsible:true,
               hide:"slideUp"
            });
         });
      </script>
		
      <style>
         #tabs-5{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-5">
         <ul>
            <li><a href = "#tabs-6">Tab 1</a></li>
            <li><a href = "#tabs-7">Tab 2</a></li>
            <li><a href = "#tabs-8">Tab 3</a></li>
         </ul>
         <div id = "tabs-6">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-7">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-8">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Yukarıdaki kodu bir HTML dosyasına kaydedelim tabsexample.htmve javascript'i destekleyen standart bir tarayıcıda açın, aşağıdaki çıktıyı da görmelisiniz. Şimdi, sonuçla oynayabilirsiniz -

İçeriğini kapalı / açık arasında değiştirmek için seçili sekmeyi tıklayın. Sekme kapatıldığında "slideUp" animasyon efektini de görebilirsiniz.

Olay Kullanımı

Aşağıdaki örnek, üç seçeneğin kullanımını göstermektedir event JqueryUI'nin sekmeler işlevinde.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel="stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-9" ).tabs({
               event:"mouseover"
            });
         });
      </script>
		
      <style>
         #tabs-9{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-9">
         <ul>
            <li><a href = "#tabs-10">Tab 1</a></li>
            <li><a href = "#tabs-11">Tab 2</a></li>
            <li><a href = "#tabs-12">Tab 3</a></li>
         </ul> 
         <div id = "tabs-10">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit... </p>
         </div>
         <div id = "tabs-11">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-12">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Yukarıdaki örnekte, sekmelerin üzerine fareyle gelinerek bölümleri açık / kapalı olarak değiştirin.

$ (seçici, bağlam) .tabs ("eylem", parametreler) Yöntem

Sekmeler ( "eylem", params) yöntemi seçerek devre dışı bırakarak, ekleme veya sekmeyi kaldırarak (bir JavaScript programı aracılığıyla) sekmelerinde bir eylem verir. Eylem, ilk bağımsız değişkende bir dizge olarak belirtilir (örneğin, yeni bir sekme eklemek için "ekle"). Aşağıdaki tabloda geçilebilecek eylemlere göz atın.

Sözdizimi

$(selector, context).tabs ("action", params);;

Aşağıdaki tablo, bu yöntemle kullanılabilecek farklı eylemleri listelemektedir -


$( ".selector" ).tabs("destroy");
$( ".selector" ).tabs("disable");
$( ".selector" ).tabs( "disable", 1 );
$( ".selector" ).tabs("enable");
$( ".selector" ).tabs( "enable", 1 );
$( ".selector" ).tabs("load", 1);
var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
$( ".selector" ).tabs("option");
$( ".selector" ).tabs( "option", "disabled", true );
$( ".selector" ).tabs( "option", { disabled: true } );
$( ".selector" ).tabs( "refresh" );
var widget = $( ".selector" ).tabs( "widget" );

Sr.No.	Eylem ve Açıklama
1	yok etmek Bu eylem, bir elemanın sekme işlevselliğini tamamen yok eder. Öğeler başlatma öncesi durumlarına geri döner. Bu yöntem herhangi bir argümanı kabul etmez. Action - destroy Bu eylem, bir elemanın sekme işlevselliğini tamamen yok eder. Öğeler başlatma öncesi durumlarına geri döner. Bu yöntem herhangi bir argümanı kabul etmez. Syntax `$( ".selector" ).tabs("destroy");`
2	devre dışı bırakmak Bu eylem tüm sekmeleri devre dışı bırakır. Bu yöntem herhangi bir argümanı kabul etmez. Action - disable Bu eylem tüm sekmeleri devre dışı bırakır. Bu yöntem herhangi bir argümanı kabul etmez. Syntax `$( ".selector" ).tabs("disable");`
3	devre dışı bırak (indeks) Bu eylem, belirtilen sekmeyi devre dışı bırakır. Nerede endeksi ise sekme devre dışı bırakılması. Action - disable( index ) Bu eylem, belirtilen sekmeyi devre dışı bırakır. Nerede endeksi ise sekme devre dışı bırakılması. Aynı anda birden fazla sekmeyi devre dışı bırakmak için, devre dışı bırakılan seçeneği ayarlayın: $ ("#tabs") .tabs ("seçenek", "devre dışı", [1, 2, 3]). Syntax `$( ".selector" ).tabs( "disable", 1 );`
4	etkinleştirme Bu eylem tüm sekmeleri etkinleştirir. Bu imza hiçbir argümanı kabul etmiyor. Action - enable Bu eylem tüm sekmeleri etkinleştirir. Bu imza hiçbir argümanı kabul etmiyor. Syntax `$( ".selector" ).tabs("enable");`
5	etkinleştir (indeks) Bu eylem, belirli bir sekmeyi etkinleştirir. Nerede indeksi etkin olmasını sekmesidir. Action - enable( index ) Bu eylem, belirli bir sekmeyi etkinleştirir. Nerede indeksi etkin olmasını sekmesidir. Aynı anda birden fazla sekmeyi etkinleştirmek için devre dışı bırakılan özelliği şu şekilde sıfırlayın: $ ("#örnek") .tabs ("seçenek", "devre dışı", []) ;. Syntax `$( ".selector" ).tabs( "enable", 1 );`
6	yük endeksi ) Bu eylem, önbelleği yok sayarak dizine alınmış sekmeyi yeniden yüklemeye zorlar. Nerede indeksi yüklemek için sekme olduğunu. Action - load( index ) Bu eylem, önbelleği yok sayarak dizine alınmış sekmeyi yeniden yüklemeye zorlar. Nerede indeksi yüklemek için sekme olduğunu. Syntax `$( ".selector" ).tabs("load", 1);`
7	seçenek (seçenekAdı) Bu eylem, şu anda belirtilen seçenekAdı ile ilişkili değeri alır . Action - option( optionName ) Bu eylem, şu anda belirtilen seçenekAdı ile ilişkili değeri alır . Syntax `var isDisabled = $( ".selector" ).tabs( "option", "disabled" );`
8	seçenek Bu eylem, geçerli sekme seçenekleri karmasını temsil eden anahtar / değer çiftlerini içeren bir nesne alır. Action - option Bu eylem, geçerli sekme seçenekleri karmasını temsil eden anahtar / değer çiftlerini içeren bir nesne alır. Bu yöntem herhangi bir argümanı kabul etmez. Syntax `$( ".selector" ).tabs("option");`
9	seçenek (seçenekAdı, değer) Bu eylem, belirtilen optionName ile ilişkili tabs seçeneğinin değerini ayarlar . OptionName bağımsız değişkeni ayarlanacak seçeneğin adıdır ve değer , seçenek için ayarlanacak değerdir . Action - option( optionName, value ) Bu eylem, belirtilen optionName ile ilişkili tabs seçeneğinin değerini ayarlar . OptionName bağımsız değişkeni ayarlanacak seçeneğin adıdır ve değer , seçenek için ayarlanacak değerdir . Syntax `$( ".selector" ).tabs( "option", "disabled", true );`
10	seçenek (seçenekler) Bu eylem, sekmeler için bir veya daha fazla seçeneği ayarlar. Action - option( options ) Bu eylem, sekmeler için bir veya daha fazla seçeneği ayarlar. Syntax `$( ".selector" ).tabs( "option", { disabled: true } );`
11	yenilemek Bu işlem, doğrudan DOM'a eklenen veya kaldırılan herhangi bir sekme olduğunda sekme panellerinin yüksekliğini yeniden hesaplar. Sonuçlar içeriğe ve heightStyle seçeneğine bağlıdır . Action - refresh Bu işlem, doğrudan DOM'a eklenen veya kaldırılan herhangi bir sekme olduğunda sekme panellerinin yüksekliğini yeniden hesaplar. Sonuçlar içeriğe ve heightStyle seçeneğine bağlıdır . Syntax `$( ".selector" ).tabs( "refresh" );`
12	Araç Bu eylem, ui-tabs sınıf adıyla açıklanmış sekmeler widget'ı olarak hizmet veren öğeyi döndürür . Action - widget Bu eylem, ui-tabs sınıf adıyla açıklanmış sekmeler widget'ı olarak hizmet veren öğeyi döndürür . Syntax `var widget = $( ".selector" ).tabs( "widget" );`

Eylem Kullanımı Devre Dışı Bırak ()

Şimdi yukarıdaki tablodaki eylemleri kullanarak bir örnek görelim. Aşağıdaki örnek, disable () yönteminin kullanımını gösterir .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-13" ).tabs();
            $( "#tabs-13" ).tabs("disable");
         });
      </script>
		
      <style>
         #tabs-13{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-13">
         <ul>
            <li><a href = "#tabs-14">Tab 1</a></li>
            <li><a href = "#tabs-15">Tab 2</a></li>
            <li><a href = "#tabs-16">Tab 3</a></li>
         </ul>
         <div id = "tabs-14">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-15">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-16">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Yukarıdaki kodu bir HTML dosyasına kaydedelim tabsexample.htm ve javascript'i destekleyen standart bir tarayıcıda açın, aşağıdaki çıktıyı da görmelisiniz -

Burada tüm sekmelerin devre dışı olduğunu görebilirsiniz.

Eylem Devre Dışı Bırakma Kullanımı (dizin)

Şimdi yukarıdaki tablodaki eylemleri kullanarak bir örnek görelim. Aşağıdaki örnek, disable (dizin) yönteminin kullanımını gösterir .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-17" ).tabs();
            $( "#tabs-17" ).tabs("disable",2);
         });
      </script>
		
      <style>
         #tabs-17{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-17">
         <ul>
            <li><a href = "#tabs-18">Tab 1</a></li>
            <li><a href = "#tabs-19">Tab 2</a></li>
            <li><a href = "#tabs-20">Tab 3</a></li>
         </ul>
         <div id = "tabs-18">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-19">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-20">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Yukarıdaki kodu bir HTML dosyasına kaydedelim tabsexample.htm ve javascript'i destekleyen standart bir tarayıcıda açın, aşağıdaki çıktıyı görmelisiniz -

Yukarıdaki örnekte, Sekme 3'ün devre dışı bırakıldığını fark ettiniz.

Sekme öğelerinde Etkinlik Yönetimi

JqueryUI, önceki bölümlerde gördüğümüz sekmeler (seçenekler) yöntemine ek olarak, belirli bir olay için tetiklenen olay yöntemleri sağlar. Bu olay yöntemleri aşağıda listelenmiştir -


$( ".selector" ).slider({
   activate: function( event, ui ) {}
});
$( ".selector" ).slider({
   beforeActivate: function( event, ui ) {}
});
$( ".selector" ).slider({
   beforeLoad: function( event, ui ) {}
});
$( ".selector" ).slider({
   create: function( event, ui ) {}
});
$( ".selector" ).slider({
   load: function( event, ui ) {}
});

Sr.No.	Etkinlik Yöntemi ve Açıklaması
1	etkinleştir (olay, kullanıcı arabirimi) Bu olay, sekme etkinleştirildikten sonra tetiklenir (animasyonun tamamlanmasından sonra). Event - activate(event, ui) Bu olay, sekme etkinleştirildikten sonra tetiklenir (animasyonun tamamlanmasından sonra). Nerede olay tipi olan Olay ve ui tipi olan Nesne . Olası değerler ui vardır - newTab - Az önce etkinleştirilen sekme. oldTab - Devre dışı bırakılan sekme. newPanel - Az önce etkinleştirilen panel. oldPanel - Devre dışı bırakılan panel. Syntax `$( ".selector" ).slider({ activate: function( event, ui ) {} });`
2	beforeActivate (olay, kullanıcı arabirimi) Bu olay, sekme etkinleştirilmeden önce tetiklenir. Event - beforeActivate(event, ui) Bu olay, sekme etkinleştirilmeden önce tetiklenir. Nerede olay tipi olan Olay ve ui tipi olan Nesne . Olası değerler ui vardır - newTab - Etkinleştirilmek üzere olan sekme. oldTab - Devre dışı bırakılmak üzere olan sekme. newPanel - Panel etkinleştirilmek üzere. oldPanel - Panel devre dışı bırakılmak üzere. Syntax `$( ".selector" ).slider({ beforeActivate: function( event, ui ) {} });`
3	beforeLoad (olay, kullanıcı arabirimi) Bu olay, beforeActivate olayından sonra bir uzak sekme yüklenmek üzereyken tetiklenir . Bu olay, Ajax isteği yapılmadan hemen önce tetiklenir. Event - beforeLoad(event, ui) Bu olay, beforeActivate olayından sonra bir uzak sekme yüklenmek üzereyken tetiklenir . Bu olay, Ajax isteği yapılmadan hemen önce tetiklenir. Nerede olay tipi olan Olay ve ui tipi olan Nesne . Olası değerler ui vardır - tab - Yüklenmekte olan sekme. panel - Ajax yanıtı tarafından doldurulacak panel. jqXHR- İçeriği isteyen jqXHR nesnesi. ajaxSettings- jQuery.ajax tarafından içeriği istemek için kullanılacak ayarlar . Syntax `$( ".selector" ).slider({ beforeLoad: function( event, ui ) {} });`
4	oluştur (olay, kullanıcı arabirimi) Bu olay, sekmeler oluşturulduğunda tetiklenir. Event - create(event, ui) Bu olay, sekmeler oluşturulduğunda tetiklenir. Nerede olay tipi olan Olay ve ui tipi olan Nesne . Olası değerler ui vardır - tab - Etkin sekme. panel - Aktif panel. Syntax `$( ".selector" ).slider({ create: function( event, ui ) {} });`
5	yük (olay, kullanıcı arabirimi) Bu olay, bir uzak sekme yüklendikten sonra tetiklenir. Event - load(event, ui) Bu olay, bir uzak sekme yüklendikten sonra tetiklenir. Nerede olay tipi olan Olay ve ui tipi olan Nesne . Olası değerler ui vardır - tab - Yeni yüklenen sekme. panel - Ajax yanıtının yeni doldurduğu panel. Syntax `$( ".selector" ).slider({ load: function( event, ui ) {} });`

Misal

Aşağıdaki örnek, sekme widget'larında olay yöntemi kullanımını gösterir. Bu örnek, etkinleştirme ve oluşturma olaylarının kullanımını gösterir .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-21" ).tabs({
               activate: function( event, ui ) {
                  var result = $( "#result-2" ).empty();
                  result.append( "activated" );
               },
               create: function( event, ui ) {
                  var result = $( "#result-1" ).empty();
                  result.append( "created" );
               }
            });
         });
      </script>
		
      <style>
         #tabs-21{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-21">
         <ul>
            <li><a href = "#tabs-22">Tab 1</a></li>
            <li><a href = "#tabs-23">Tab 2</a></li>
            <li><a href = "#tabs-24">Tab 3</a></li>
         </ul>
         <div id = "tabs-22">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-23">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>   
         </div>
         <div id = "tabs-24">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
               enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div><br>
      
      <span class = "resultarea" id = result-1></span><br>
      <span class = "resultarea" id = result-2></span>
   </body>
</html>

Yukarıdaki kodu bir HTML dosyasına kaydedelim tabsexample.htm ve javascript'i destekleyen standart bir tarayıcıda açın, aşağıdaki çıktıyı görmelisiniz -

Olaylara özel aşağıda yazdırılan bir mesajı görmek için sekmelere tıklayın.