jQuery Mobile Column-Toggle Table class.columnToggleTable Option

Опубликовано: 14 Августа, 2022

jQuery Mobile — это система пользовательского интерфейса на основе HTML5, предназначенная для создания адаптивных веб-сайтов и приложений, доступных на всех смартфонах, планшетах и настольных устройствах.

Виджет таблицы Column-Toggle позволяет скрывать/показывать менее важные столбцы с помощью кнопки Column с флажками.

В этой статье мы собираемся изучить опцию jQuery Mobile Column-Toggle Table class.columnToggleTable. Параметр class.columnToggleTable — это класс, назначенный таблице.

Синтаксис:

<div class="ui-table-columntoggle">
// content
</div>

Параметр: эта опция не принимает никаких параметров/аргументов.

Тип возвращаемого значения: этот параметр не возвращает никакого значения.

Ссылка CDN: Ниже приведены некоторые сценарии jQuery Mobile, которые потребуются для вашего проекта, поэтому добавьте их в свой проект.

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Пример. В этом примере описывается параметр jQuery Mobile Column-Toggle Table classs.columnToggleTable.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" 
          href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src=
"https://code.jquery.com/jquery-1.11.1.min.js">
    </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
</head>
  
<body>
    <center>
        <div data-role="page" id="gfgpage">
            <div>
                <h1 style="color:green;">GeeksforGeeks</h1>
            </div>
            <div data-role="main" class="ui-content">
                <h3>
                    jQuery Mobile Column-Toggle 
                    Table classes.columnToggleTable Option
                </h3>
                <table data-role="table" 
                       id="gfg-table-column-toggle" 
                       data-mode="columntoggle"
                       class="ui-table-columntoggle ui-table-columntoggle-btn"
                       data-column-btn-theme="b">
                    <thead>
                        <tr>
                            <th>Sl No.</th>
                            <th>Article Title</th>
                            <th data-priority="2">Category</th>
                            <th data-priority="1">Topic</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>1</th>
                            <td>
                                <a href=
"https://www.geeksforgeeks.org/hashing-data-structure/">
                                    Hashing Data Structure</a>
                            </td>
                            <td>Coding</td>
                            <td>Data Structures</td>
                        </tr>
                        <tr>
                            <th>2</th>
                            <td><a href=
"https://www.geeksforgeeks.org/graph-data-structure-and-algorithms/">
                                    Graph Data Structure And Algorithms</a>
                            </td>
                            <td>Coding</td>
                            <td>Data Structures</td>
                        </tr>
                        <tr>
                            <th>3</th>
                            <td><a href=
"https://www.geeksforgeeks.org/ml-multiple-linear-regression-using-python/">
                                    ML | Multiple Linear Regression using Python</a>
                            </td>
                            <td>Machine Learning</td>
                            <td>Supervised Learning</td>
                        </tr>
                        <tr>
                            <th>4</th>
                            <td><a href=
"https://www.geeksforgeeks.org/implementing-dbscan-algorithm-using-sklearn/">
                                    Implementing DBSCAN algorithm using Sklearn</a>
                            </td>
                            <td>Machine Learning</td>
                            <td>Unsupervised Learning</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </center>
</body>
  
</html>

Выход:

Ссылка: https://api.jquerymobile.com/table-columntoggle/#option-classes.columnToggleTable

JQuery

jQuery Mobile Column-Toggle Table class.columnToggleTable Option

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ