jQWidgets jqxListMenu alwaysShowNavigationArrows Propiedad

jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente, optimizado, independiente de la plataforma y ampliamente compatible. jqxListMenu es un widget de jQuery que se usa para mostrar una colección de listas ordenadas y desordenadas. Podemos crear una lista anidada usando la lista ordenada y desordenada.

La propiedad alwaysShowNavigationArrows se usa para establecer o devolver si las flechas de navegación se muestran para todos los elementos o no. Acepta valores de tipo booleano y su valor por defecto es false.

Sintaxis:

  • Establezca la propiedad alwaysShowNavigationArrows.

    $('selector').jqxListMenu({ 
        alwaysShowNavigationArrows: Boolean 
    });
  •  

  • Devuelve la propiedad alwaysShowNavigationArrows.

    var nav = $('selector')
      .jqxListMenu('alwaysShowNavigationArrows');
  • Archivos vinculados: descargue jQWidgets desde el enlace https://www.jqwidgets.com/download/. En el archivo HTML, busque los archivos de script en la carpeta descargada.

    <link rel=”hoja de estilo” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”scripts/jquery-1.11.1.min .js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqx-all.js ”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxlistmenu.js”></ script>
    <script type=”text/javascript” src=”jqwidgets/jqxpanel.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>

    El siguiente ejemplo ilustra la propiedad jqxListMenu alwaysShowNavigationArrows en jQWidgets.

    Ejemplo:

    HTML

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <link rel="stylesheet" 
              href="jqwidgets/styles/jqx.base.css" 
              type="text/css" />
        <script type="text/javascript" 
                src="scripts/jquery-1.11.1.min.js">
        </script>
        <script type="text/javascript" 
                src="jqwidgets/jqxcore.js">
        </script>
        <script type="text/javascript" 
                src="jqwidgets/jqx-all.js">
        </script>
        <script type="text/javascript" 
                src="jqwidgets/jqxdata.js">
        </script>
        <script type="text/javascript" 
                src="jqwidgets/jqxlistmenu.js">
        </script>
        <script type="text/javascript" 
                src="jqwidgets/jqxpanel.js">
        </script>
        <script type="text/javascript" 
                src="jqwidgets/jqxscrollbar.js">
        </script>
        <script type="text/javascript" 
                src="jqwidgets/jqxbuttons.js">
        </script>
      
        <style>
            h1,
            h3 {
                text-align: center;
            }
              
            #GFG {
                width: 100%;
                margin: 0 auto;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
      
        <h3>
            jQWidgets jqxListMenu 
            alwaysShowNavigationArrows Property
        </h3>
      
      
        <div id="GFG" style="width: 300px;">
            <ul id="list" data-role="listmenu">
                <li>Web Technology
                    <ul data-role="listmenu">
                        <li>Frontend Development
                            <ul data-role="listmenu">
                                <li>HTML</li>
                                <li>CSS</li>
                                <li>JavaScript</li>
                                <li>jQuery</li>
                            </ul>
                        </li>
                        <li>Backend Development
                            <ul data-role="listmenu">
                                <li>PHP</li>
                                <li>Node.js</li>
                                <li>Python</li>
                                <li>Java</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>GeeksforGeeks Programming
                    <ul data-role="listmenu">
                        <li>C++</li>
                        <li>Java</li>
                        <li>Python</li>
                    </ul>
                </li>
            </ul>
        </div>
      
        <script type="text/javascript">
            $(document).ready(function() {
                $('#list').jqxListMenu({
                    width: 300,
                    height: 250,
                    showHeader: true,
                    showBackButton: true,
                    showFilter: false,
                      alwaysShowNavigationArrows: false
                });
            });
        </script>
    </body>
      
    </html>

    Producción:

    Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxlistmenu/jquery-listmenu-api.htm

Publicación traducida automáticamente

Artículo escrito por ppatelkap 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 *