javascript - que - onclick void 0

Parámetros de Dojo para pestañas

Question

Tengo problemas con la documentación de Dojo (como de costumbre).
En su API TabContainer , enumeran el segundo argumento como un objeto llamado "params", pero nunca dicen lo que realmente puede poner en este objeto params. ¿Puedo especificar el ancho? ¿La altura? ¿Especifico los id de los divs que quiero que sean las pestañas dentro del contenedor?

Tampoco hay ninguna especificación de qué atributos pondría en HTML si quisiera especificar los contenedores de pestañas que analizará el analizador de Dojo. Encontré el siguiente ejemplo que te permite poner el título, las opciones seleccionadas y las que se pueden cerrar. ¿Hay algo mas?

<div id="tabA1" dojoType="dijit.layout.ContentPane" title="First Tab"  selected="true" closable="true">
        First Tab
    </div>
    <div id="tabA2" dojoType="dijit.layout.ContentPane" title="Second Tab" closable="true">
        Second Tab
    </div>
    <div id="tabA3" dojoType="dijit.layout.ContentPane" title="Third Tab" closable="true">
        Third Tab
    </div>
</div>

Answer 1

No soy un experto en widgets de Dojo, pero esto es lo que sé:

1. Todos los constructores de widgets de Dojo tienen firma:

   var widget = nuevo Widget (params, nodo);

2. La mejor forma de descubrir params es mirar el código fuente: no se asuste, serían variables documentadas al comienzo de una clase relevante.

3. El archivo relevante suele ser fácil de encontrar utilizando el nombre del widget porque se nombran por su ruta.

4. La mejor manera de buscar esto es usar un pago de Dojo con su editor de texto favorito. Pero el pago nocturno también funciona (si sigues el maletero). O el navegador fuente Trac .

5. No subestime el poder de mirar pruebas y demostraciones.

Ejemplo: dijit.layout.TabContainer ⇒ dijit / layout / TabContainer.js . Si falta el archivo, busque en los directorios de la jerarquía para _base.js, o algunos archivos que suenan de manera similar, estos últimos pueden agrupar las clases relacionadas. Pero en la mayoría de los casos (como con TabContainer) lo encontrará de inmediato. Vámonos y miremos.

Hay dos parámetros públicos documentados en la parte superior de la clase:

• tabPosition - String. Define dónde van las pestañas en relación con el contenido de la pestaña. "arriba", "abajo", "izquierda-h", "derecha-h". Predeterminado: "arriba".
• tabStrip - bool. Define si el tablist obtiene una clase extra para el diseño. Predeterminado: falso.
• _controllerWidget: simplemente ignórelo, ningún parámetro público comienza con el guión bajo: es una convención común de JavaScript para designar miembros protegidos.

Pero no es todo. TabContainer se basa en dijit.layout.StackContainer (solo mira el encabezado dojo.declare ()). También podemos usar los parámetros públicos de StackContainer:

• doLayout - Boolean. Si es verdadero, cambie el tamaño de mi hijo que se muestra actualmente para que coincida con mi tamaño. Predeterminado: verdadero
• persistir - Boolean. Recuerda al niño seleccionado en todas las sesiones. Predeterminado: falso.

Como puede ver, el código y los parámetros están bien documentados, aunque no siempre reflejados en la herramienta API. Ahora podemos crear el contenedor de pestañas con confianza.

Pero veámoslo en acción primero. Todas las pruebas Dijit están siempre en dijit / tests . Cualquier widget dijit.layout. * Se probará en dijit / tests / layout . El archivo de prueba relevante se llamaría algo así como test_TabContainer.html, y de hecho veo 5 archivos para eso:

• test_TabContainer.html .
• test_TabContainer_noLayout.html .
• test_TabContainer_prog.html .
• test_TabContainer_remote.html .
• test_TabContainerTitlePane.html .

Por ejemplo, recreemos el primer TabContainer de test_TabContainer.html :

var tc = new dijit.layout.TabContainer(
  {persist: true, tabStrip: true}, "mainTabContainer");

O podemos hacerlo como en la prueba en línea:

<div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
    persist="true" tabStrip="true" style="width: 100%; height: 20em;">
  ...
</div>

Volviendo a su pregunta original: ahora puede ver que el ancho y el alto se especifican simplemente como estilos, sin atributos especiales, nada sofisticado, solo algunos CSS intuitivos. Entonces, si desea hacerlo programáticamente, simplemente configúrelos en un nodo antes de crear una nueva instancia de TabContainer.

Sí, me gustaría que el doc API también tuviera todos estos pequeños detalles, pero toda la configuración es intuitiva, y las partes relevantes están documentadas en el mismo archivo. Fuimos al código fuente, pero no intentamos descifrar el código fuente, solo leímos comentarios legibles por humanos en la parte superior de la clase.