jQWidgets jqxTabs método addAt()

jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente y optimizado, independiente de la plataforma y ampliamente compatible. jqxTabs representa un widget de jQuery Tab que se utiliza para dividir el contenido en varias secciones. Los elementos <li> se usan para el título de la pestaña y los elementos <div> se usan para el contenido de la pestaña.

El método addAt() se usa para agregar la pestaña en una posición determinada. La pestaña de adición contiene el contenido de la pestaña. Este método acepta tres parámetros que se dan a continuación:

  • índice: Acepta el número de índice donde se agregó la nueva pestaña. La indexación comienza con 0.
  • tabTitle: Acepta el título de la pestaña recién agregada.
  • tabContent: Acepta el contenido de la pestaña recién agregada.

Sintaxis:

$('Selector').jqxTabs('addAt', index, tabTitle, tabContent);

Archivos vinculados: descargue jQWidgets desde el enlace dado https://www.jqwidgets.com/download/. En el archivo HTML, busque los archivos de script en la carpeta descargada.

<enlace rel=”hoja de estilo” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<enlace rel=”hoja de estilo” href=”jqwidgets/styles/jqx.energyblue.css” tipo =”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets /jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtabs .js”></secuencia de comandos>

El siguiente ejemplo ilustra el método jQWidgets jqxTabs addAt().

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
        "jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="
        jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" 
        src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxtabs.js"></script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
  
        <h3>
            jQWidgets jqxTabs addAt() Method
        </h3>
  
        <div id='jqxTabs'>
            <ul style='margin-left: 20px;'>
                <li>GeeksforGeeks</li>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
  
            <div>
                A Computer Science portal for geeks. 
                It contains well written, well thought 
                and well explained computer science 
                and programming articles, ...
            </div>
            <div>
                HTML stands for HyperText Markup 
                Language. It is used to design web 
                pages using a markup language. HTML 
                is the combination of Hypertext and 
                Markup language. Hypertext defines 
                the link between the web pages.
            </div>
            <div>
                Cascading Style Sheets, fondly referred 
                to as CSS, is a simply designed language 
                intended to simplify the process of making 
                web pages presentable. CSS allows you to 
                apply styles to web pages. More importantly, 
                CSS enables you to do this independent of 
                the HTML that makes up each web page.
            </div>
            <div>
                JavaScript is a lightweight, cross-platform, 
                and interpreted scripting language. It is 
                well-known for the development of web pages, 
                many non-browser environments also use it. 
                JavaScript can be used for Client-side 
                developments as well as Server-side developments.
            </div>
        </div>
    </center>
  
    <script type="text/javascript">
        $(document).ready(function() {
            $('#jqxTabs').jqxTabs({ 
                theme: 'energyblue',
                width: 550,
                height: 150
            });
  
            $('#jqxTabs').jqxTabs('addAt', 4, 'PHP', 
                `The term PHP is an acronym for PHP: 
                Hypertext Preprocessor. PHP is a 
                server-side scripting language designed 
                specifically for web development. It is 
                open-source which means it is free to 
                download and use. It is very simple to 
                learn and use. The files have the 
                extension “.php”.`
            );
        });
    </script>
</body>
  
</html>

Producción:

Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtabs/jquery-tabs-api.htm

Publicación traducida automáticamente

Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *