jQuery UI | Вкладки

Опубликовано: 5 Января, 2022

Вкладки используются для создания нескольких разделов на веб-странице, которые можно менять местами, как гармошку. Это помогает группировать контент и просматривать контент из определенной группы за раз.

Вкладки создаются с помощью специальной разметки, которая выглядит следующим образом:

  • Вкладки должны быть заключены в упорядоченный список или неупорядоченный список.
  • Каждый заголовок вкладки должен быть заключен отдельно в элемент списка и привязанный тег, заключенный с атрибутом href, определяющим содержимое для каждой панели вкладок.
  • Каждая панель вкладок может быть пустой, но у нее должен быть собственный идентификатор, соответствующий хешированному имени, введенному в элемент привязки соответствующей вкладки.

Содержимое внутри панели вкладок может быть определено на той же странице или может быть загружено через Ajax, оба они обрабатываются атрибутом href, связанным с тегом привязки этой панели.
Ниже мы напишем код для простой 4-панельной вкладки с использованием jquery UI.

Вкладки указываются в теге div с идентификатором. Идентификатор которого указан внутри кода jquery. Здесь мы выбрали вторую вкладку в качестве вкладки по умолчанию, которая будет выбрана при открытии веб-страницы. Вы можете изменить его, указав другое значение в активном параметре.
Примечание: вкладки индексируются, начиная с «0».

Ниже приведены примеры вкладок jQuery:
Пример 1. Этот пример кода представляет собой простую вкладку jquery, все вкладки доступны для оценки.

  • Программа:
    < html >
    < head >
    < link href =
    ' https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css '
    rel = 'stylesheet' >
    </ head >
    < style >
    b{
    float: right;
    margin: 7px;
    color: lime;
    }
    #geeks a:hover{
    color: lime;
    background: gray;
    }
    </ style >
    < body >
    < br >
    < br >
    < div id = "geeks" >
    < ul >
    < li >< a href = "#Algorithms" >Algorithms</ a ></ li >
    < li >< a href = "#Data_Structure" >Data Structure</ a ></ li >
    < li >< a href = "#Practice" >Practice</ a ></ li >
    < li >< a href = "#interview" >interview</ a ></ li >
    < b >GeeksforGeeks</ b >
    </ ul >
    < div id = 'Algorithms' >
    < p >
    The answer to this is simple, we can have all the
    above things only if we have performance. So
    performance is like currency through which we can
    buy all the above things. Another reason
    for studying performance is – speed is fun!
    </ p >
    </ div >
    < div id = 'Data_Structure' >
    < p >
    For example, let us say, we want to store marks of
    all students in a class, we can use an array to store
    them. This helps in reducing the use of number of
    variables as we don't need to create a separate
    variable for marks of every subject. All marks can
    be accessed by simply traversing the array.
    </ p >
    </ div >
    < div id = 'Practice' >
    < p >
    Asymptotic Analysis is the big idea that handles
    above issues in analyzing algorithms. In Asymptotic
    Analysis, we evaluate the performance of an algorithm
    in terms of input size (we don't measure the actual
    running time). We calculate, how does the time
    (or space) taken by an algorithm increases with
    the input size.
    </ p >
    </ div >
    < div id = 'interview' >
    < p >
    Also, in Asymptotic analysis, we always talk about
    input sizes larger than a constant value. It might
    be possible that those large inputs are never given
    to your software and an algorithm which is
    asymptotically slower, always performs better for
    your particular situation. So, you may end up choosing
    an algorithm that is Asymptotically slower but faster
    for your software.
    </ p >
    </ div >
    </ div >
    < script src =
    " https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js " >
    </ script >
    < script src =
    " https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js " >
    </ script >
    < script >
    $(document).ready(function() {
    $("#geeks").tabs({
    active: 0
    })
    })
    </ script >
    </ body >
    </ html >
  • Выход:

Пример 2: По умолчанию все вкладки закрыты, но вы также можете оставить все вкладки закрытыми по умолчанию. Для этого мы используем опцию Collapsible и устанавливаем ее значение на «True», а значение активной опции устанавливаем на false.

  • Программа:
    < html >
    < head >
    < link href =
    ' https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css '
    rel = 'stylesheet' >
    </ head >
    < style >
    b{
    float: right;
    margin: 7px;
    color: lime;
    }
    #geeks a:hover{
    color: lime;
    background: gray;
    }
    </ style >
    < body >
    < br >
    < br >
    < div id = "geeks" >
    < ul >
    < li >< a href = "#Algorithms" >Algorithms</ a ></ li >
    < li >< a href = "#Data_Structure" >Data Structure</ a ></ li >
    < li >< a href = "#Practice" >Practice</ a ></ li >
    < li >< a href = "#interview" >interview</ a ></ li >
    < b >GeeksforGeeks</ b >
    </ ul >
    < div id = 'Algorithms' >
    < p >
    The answer to this is simple, we can have all the
    above things only if we have performance. So
    performance is like currency through which we can
    buy all the above things. Another reason
    for studying performance is – speed is fun!
    </ p >
    </ div >
    < div id = 'Data_Structure' >
    < p >
    For example, let us say, we want to store marks of
    all students in a class, we can use an array to store
    them. This helps in reducing the use of number of
    variables as we don't need to create a separate
    variable for marks of every subject. All marks can
    be accessed by simply traversing the array.
    </ p >
    </ div >
    < div id = 'Practice' >
    < p >
    Asymptotic Analysis is the big idea that handles
    above issues in analyzing algorithms. In Asymptotic
    Analysis, we evaluate the performance of an algorithm
    in terms of input size (we don't measure the actual
    running time). We calculate, how does the time
    (or space) taken by an algorithm increases with
    the input size.
    </ p >
    </ div >
    < div id = 'interview' >
    < p >
    Also, in Asymptotic analysis, we always talk about
    input sizes larger than a constant value. It might
    be possible that those large inputs are never given
    to your software and an algorithm which is
    asymptotically slower, always performs better for
    your particular situation. So, you may end up choosing
    an algorithm that is Asymptotically slower but faster
    for your software.
    </ p >
    </ div >
    </ div >
    < script src =
    " https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js " >
    </ script >
    < script src =
    " https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js " >
    </ script >
    < script >
    $(document).ready(function() {
    $("#geeks").tabs({
    active: false,
    collapsible: true
    })
    })
    </ script >
    </ body >
    </ html >
  • Выход:

Пример 3: В этом примере мы отключим вкладки. Мы можем отключить определенные вкладки или все вкладки с помощью параметра отключения . Сначала мы отключаем все вкладки, для которых мы установили значение «Истина» для параметра отключения.

  • Программа:
    < html >
    < head >
    < link href =
    ' https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css '
    rel = 'stylesheet' >
    </ head >
    < style >
    b{
    float: right;
    margin: 7px;
    color: lime;
    }
    #geeks a:hover{
    color: lime;
    background: gray;
    }
    </ style >
    < body >
    < br >
    < br >
    < div id = "geeks" >
    < ul >
    < li >< a href = "#Algorithms" >Algorithms</ a ></ li >
    < li >< a href = "#Data_Structure" >Data Structure</ a ></ li >
    < li >< a href = "#Practice" >Practice</ a ></ li >
    < li >< a href = "#interview" >interview</ a ></ li >
    < b >GeeksforGeeks</ b >
    </ ul >
    < div id = 'Algorithms' >
    < p >
    The answer to this is simple, we can have all the
    above things only if we have performance. So
    performance is like currency through which we can
    buy all the above things. Another reason
    for studying performance is – speed is fun!
    </ p >
    </ div >
    < div id = 'Data_Structure' >
    < p >
    For example, let us say, we want to store marks of
    all students in a class, we can use an array to store
    them. This helps in reducing the use of number of
    variables as we don't need to create a separate
    variable for marks of every subject. All marks can
    be accessed by simply traversing the array.
    </ p >
    </ div >
    < div id = 'Practice' >
    < p >
    Asymptotic Analysis is the big idea that handles
    above issues in analyzing algorithms. In Asymptotic
    Analysis, we evaluate the performance of an algorithm
    in terms of input size (we don't measure the actual
    running time). We calculate, how does the time
    (or space) taken by an algorithm increases with
    the input size.
    </ p >
    </ div >
    < div id = 'interview' >
    < p >
    Also, in Asymptotic analysis, we always talk about
    input sizes larger than a constant value. It might
    be possible that those large inputs are never given
    to your software and an algorithm which is
    asymptotically slower, always performs better for
    your particular situation. So, you may end up choosing
    an algorithm that is Asymptotically slower but faster
    for your software.
    </ p >
    </ div >
    </ div >
    < script src =
    " https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js " >
    </ script >
    < script src =
    " https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js " >
    </ script >
    < script >
    $(document).ready(function() {
    $( "#geeks" ).tabs({
    disabled:true
    })
    })
    </ script >
    </ body >
    </ html >
  • Выход:

Пример 4: В этом примере мы отключим некоторые определенные вкладки. В приведенном ниже коде мы отключаем 1-ю и 3-ю вкладку (0-я 2-я с точки зрения индексации):