Cómo utilizar b-jui en thinkphp

b-JUI (DWZ Bootstrap) es un marco de cliente enriquecido, que se modifica en función del marco de cliente enriquecido DWZ-jUI.

Este artículo es el manual de usuario chino de B-JUI, que incluye un código de muestra para referencia de los estudiantes interesados.

Descripción general

B-JUI tiene solo una página principal (documento). Todas las subpáginas en el marco se adjuntarán a la página principal como fragmentos de página después de obtenerse a través de Ajax, mientras que son externas. Las páginas se insertarán en la página principal a través de iframe. Esta sección presenta la estructura de la página principal de B-JUI.

Tipo de documento HTML5

Utilice el tipo de documento HTML5 con Bootstrap y B-JUI, y consulte los siguientes formatos para la configuración.

<! DOCTYPE html & gt

& lthtml lang = " zh-CN " & gt;

...

& lt/html & gt;

Estructura de la página de inicio (solo parte de texto)

La página principal consta de cuatro partes: superior (encabezado), central izquierda (menú de navegación), central derecha (espacio de trabajo) e inferior (pie de página). donde el menú de navegación izquierdo puede reducirse. Su estructura es la siguiente:

& ltheader class = " bjui-header " id = " bjui-header " & gt;

& lt! -Encabezado->

& lt/header>

& ltdiv class = " bjui-leftside " id = " bjui-leftside " & gt;

<! -Menú de navegación->;

& lt/div & gt;

& ltdiv id="bjui-container " >>p>

& lt! -espacio de trabajo->

</div>

<footer class="bui-footer" id="bui-footer">.

<! -Pie de página->

</footer>

Estructura de subpágina (es decir, fragmento de página [en adelante, página])

Página Es generalmente se compone de dos partes, o solo se conserva la parte del contenido de la página bui, donde la parte del contenido de la página bui se puede seleccionar desde la barra bui-head (barra de herramientas superior) y bui-footBar (barra de herramientas inferior). Su estructura es la siguiente:

& ltdiv class="bjui-pageHeader " >>p>

& lt! -Módulos de nivel superior [como botones de función y paneles de búsqueda]-& gt;

& lt/div & gt;

& ltdiv class="bjui-pageContent " >

& ltdiv class="bjui-headBar " >

& lt! -Barra de herramientas superior-& gt;

& lt/div & gt;

& ltdiv data-layout-h="0 " >>p>

& lt ! -Área de contenido->;

& lt/div & gt;

& ltdiv class="bjui-footBar " >

& lt! -Barra de herramientas inferior->

</div>

</div>

indicación del atributo data-layout-h El contenedor tiene un diseño adaptable a la página .

Cuando el valor es 0, B-JUI asignará automáticamente la altura del contenedor a: la altura total de la página menos la altura de los elementos fijos (encabezado de página bui \ barra de cabeza bui \ pie de página bui) en la página .

Cuando el valor del atributo data-layout-h no es igual a 0, la altura del contenedor es la altura total de la página menos el valor del atributo.

Los elementos fijos deben personalizarse (los elementos a nivel de bloque son válidos). Agregue el atributo data-layout-fixed="true " a este elemento.

Consulte table.html del código fuente de B-JUI para ver la página completa y form.html para ver solo algunas páginas de bjui-pageContent.

Convención de nomenclatura de ID de elemento

Debido a que, de forma predeterminada, todo el contenido de este marco se encuentra en un documento, el ID del elemento debe ser único al nombrarlo. Si los ID duplicados son inevitables, intente utilizar:

$.CurrentNavtab.find('#dom-id ') cuando necesite operar elementos en la página actual, en el espacio de trabajo de la pestaña actual Encuentra el elemento con la identificación especificada.

O $.CurrentDialog.find('#dom-ID ') encuentra el elemento con el ID especificado en la ventana emergente actual.

Espacio de trabajo con pestañas (navtab)

Toda la parte del espacio de trabajo del marco B-JUI es un componente navtab, que se encuentra en el contenedor "# bui-container" en la página de inicio. . La estructura HTML fija es la siguiente:

& ltdiv id = " bjui-navtab " class = " tabs page " & gt.

& ltdiv class = " tabsPageHeader " >>p>

& ltdiv class = " tabsPageHeaderContent " >>p>

& ltul class = " nav tab-tab nav-tabs " >

& ltLi data-tabid = " main " class = " main active " >& lta href = " JavaScript:;"& gt& ltspan & gtMi página de inicio

& lt /ul & gt;

& lt/div & gt;

& ltdiv class="tabsLeft " >& lti class="fa fa-angle-double-left " >& lt/ I & gt;& lt/div & gt;

& ltdiv class="tabsRight " >& ltI class = " fa fa-angle-double-right " >& lt/I & gt; /div & gt;

& ltdiv class="tabsMore " >& lti class="fa fa-angle-double-down " >& lt/I & gt;& lt/div & gt ;

& lt/div & gt;

& ltul class="tabsMoreList " />

& lt李& gt& lta href = " JavaScript:;" página de inicio

& lt/ul & gt;

& ltdiv class = " navtab-panel tabsPageContent layoutBox " />

El área de contenido de cada página

& lt/div & gt;

& lt/div & gt

Uso (cómo crear navtab):

DOM; Haga clic en el activador:

& lta href = " mytab . html " data-toggle = " navtab " data-id = " mynavtab " data-title = "Mi página comercial" >Abrir navtab

& ltbutton type = " button " class = " BTN-Green" data-toggle = " navtab " data-ID = " mynavtab " data-URL = " mytab . html " data-title = "Mi página comercial " >Abrir navtab

jQuery:

$(selector). navtab({id:'ID de la etiqueta', URL:'URL de la página de carga', título:'Título de la etiqueta'})

Obtiene el contenedor de contenido de la navtab actual: $. FichaNavActual.

Parámetros:

El valor predeterminado del tipo de nombre describe la cadena de ID de la etiqueta navtab. Si se especifica duplicado, se sobrescribirán las etiquetas existentes con el mismo ID. Cadena de título El nombre que se muestra después de abrir la etiqueta Nueva pestaña. La cadena URL define la URL para solicitar datos. Escriba una cadena para obtener el modo de solicitud Http, opcional 'get/post'. Al solicitar la URL, el objeto de datos {} necesita enviar datos.

Método:

Llame al método navtab de esta manera:

$(selector).

navtab('Nombre del método', parámetro 1,... parámetro n)

Para cambiar a la pestaña:

$(selector). navtab('switchTab ', tag ID)

Los parámetros entre corchetes indican que el parámetro es opcional.

Métodos disponibles:

SwitchTab(tabid): Cambia a una pestaña.

Refresh(tabid): Actualiza la etiqueta.

Recargar (opciones): recargar una pestaña. Las opciones son las mismas que los parámetros predeterminados de navtab. Si no se especifica ningún ID, la pestaña actual se recargará de forma predeterminada.

CloseTab(tabid): Cierra una pestaña.

CloseCurrentTab([tabid]): Cierra la pestaña actual.

CloseAllTab(): Cierra todas las pestañas.

Evento:

Escuche el evento de navtab así:

$(documento). on('bjui.beforeLoadNavtab ', function (e) {

var $navtab = $(e.target)

//Haz algo...

})

Este nombre describe el evento bjui.beforeLoadNavtab antes de cargar el contenido marcado. bjui.beforeCloseNavtab cierra el evento antes de la marca.

Ventanas emergentes (cuadros de diálogo)

Las ventanas emergentes se dividen en ventanas emergentes normales y ventanas emergentes modales que se pueden minimizar mediante. el componente de la barra de tareas. La estructura DOM de la ventana emergente se colocará en el cuerpo principal y la estructura es la siguiente:

& ltdiv class = " bui-dialog bui-dialog-container "

& ltdiv class="dialogHeader " >

<! -Área de botones como maximizar, minimizar y cerrar->

<h 1><! -title-></h 1>

</div>

& ltdiv class = "cuadro de diseño de contenido de diálogo unitBox" >>p>

<! -Área de contenido de la página->

</div>

<! - fragmento div para cambiar el tamaño ->

</div>

Uso (cómo crear un cuadro de diálogo):

DOM haga clic en Activador:

& lta href = " mi diálogo . html " data-toggle = " dialog " data-id = " mi diálogo " data-title = "Mi ventana emergente" >Abrir ventana emergente

& ltbutton type = " botón " clase = " BTN-Green" data-toggle = " dialog " data-ID = " mynavtab " data-URL = " mytab . html " data-title = "Mi ventana emergente" >Abrir ventana emergente

jQuery:

$(selector). Diálogo ({id: 'La identificación de la ventana emergente', URL: 'La URL de la página de carga', Título: 'El título de la ventana emergente' })

Obtener el cuadro de diálogo actual: $. Cuadro de diálogo actual

Parámetros:

El valor predeterminado del tipo de nombre describe el ID de la ventana emergente de la pestaña de navegación en la cadena de identificación.

Si se especifica duplicado, se sobrescribirán las ventanas emergentes existentes con el mismo ID. Cadena de título El nombre que se mostrará cuando se abra la ventana emergente de nueva pestaña. La cadena URL define la URL para solicitar datos. Escriba una cadena para obtener el modo de solicitud Http, opcional 'get/post'. Al solicitar la URL, el objeto de datos {} necesita enviar datos. Ancho int 500 El ancho de la ventana emergente. Height int 300 La altura de la ventana emergente. Max boolean false maximiza la ventana emergente directamente cuando se abre. Máscara booleana falsa si la ventana es modal. El valor booleano resizable verdadero puede cambiar el tamaño de la ventana emergente. El booleano dibujable verdadero puede arrastrar la ventana emergente. Maxable booleano verdadero si se muestra el botón maximizar. minable booleano verdadero si se muestra el botón minimizar (la ventana emergente modal no es válida).

Método:

Se llama de la misma manera que navtab: Para cerrar la ventana emergente:

$(selector). Diálogo ("Cerrar", ID de ventana emergente)

Los parámetros entre corchetes indican que el parámetro es opcional.

Métodos disponibles:

SwitchDialog(id): cambia a ventana emergente (la ventana emergente modal no es válida).

Refresh(id): Actualiza una ventana emergente.

Recargar (opción): Recarga una ventana emergente. Las opciones son las mismas que los parámetros predeterminados del cuadro de diálogo. Si no se especifica ningún ID, la ventana emergente actual se recargará de forma predeterminada.

Cerrar(id): Cierra una ventana emergente.

CloseCurrent(): Cierra la ventana emergente actual.

Eventos:

Escuche eventos de diálogo como este:

$(documentación). on('bjui.beforeLoadDialog ', function (e) {

var $dialog = $(e.target)

//Haz algo...

})

Este nombre describe el evento bjui.beforeLoadDialog antes de cargar el contenido de la ventana emergente. bjui.beforeCloseDialog cierra el evento frente a la ventana emergente.

Ajax

Esta sección presenta principalmente las operaciones de Ajax y las funciones de devolución de llamada en el marco B-JUI.

Operación Ajax:

Búsqueda Ajax: se utiliza principalmente para formularios de búsqueda y formularios de paginación, como # formulario de página "table .html" en el código fuente de B-JUI:

& ltform id = " page form " data-toggle = " Búsqueda Ajax " action = " table . html " método = " post " & gt;

Búsqueda de restablecimiento de Ajax: se utiliza principalmente Restablecer búsqueda forma. El atributo data-clear-query le indica al formulario si se deben borrar los parámetros de consulta y conservar solo la información de paginación y clasificación de campos.

Por ejemplo, el botón de borrar consulta en el código fuente de B-JUI "table.html":

& lta class = " BTN BTN-orange " href = " JavaScript:; " data-toggle = " recargar search " data-clear-query = " true " data-icon = " deshacer " & gt; clear query

Carga Ajax: se utiliza principalmente para cargar el contenido de la URL para el contenedor especificado, los datos- El valor del atributo objetivo es Una expresión selectora que le indica a Ajax que coloque el contenido cargado en un contenedor, adecuado para la actualización local:

& lta href = " table-edit . html " data-toggle = " ajaxload " data -target = " # d 11 " >Cargar contenido

Acción ajax: se utiliza principalmente para ejecutar comandos Ajax, como "eliminar", el atributo data-confirm-msg se usa para confirmar el mensaje antes de la operación. :

& lta href = " del . html " class = " btnbtn-red " data-toggle = " DOA jax " data-confirm-msg = "¿Está seguro de que desea eliminar esta línea de información? ?"& gtEliminar datos

Exportación Ajax: se utiliza principalmente para exportar información (descargar archivos), el atributo data-confirm-msg se usa para confirmar el mensaje antes de la operación:

& lta href = " libro 1 . xlsx " data- toggle = " do export " data-confirm-msg = "¿Está seguro de que desea exportar la información?"& gtExportar todo

Exportar Ajax los elementos seleccionados, principalmente se utiliza para exportar la información de los elementos seleccionados (descargar archivo), el atributo data-confirm-msg se utiliza para confirmar el mensaje antes de la operación, el atributo data-idname especifica el nombre del campo enviado al fondo, el valor predeterminado es "ids", el atributo del grupo de datos se utiliza para especificar el nombre de la casilla de verificación:

& lta href = " book 1 . xlsx " data-toggle = " doexportchecked " data-confirm-msg = "¿Está seguro de que desea exportar los elementos seleccionados?" data-idname = " expids " data-group = " ids " & gt; Exportar elementos seleccionados

Ajax elimina los elementos seleccionados, utilizados principalmente para exportar. la información de los elementos seleccionados (descargar archivos), el atributo data-confirm-msg se utiliza para confirmar el mensaje antes de la operación. El atributo data-idname especifica el nombre del campo enviado al fondo. El atributo -group se utiliza para especificar el nombre de la casilla de verificación:

& lta href = " del . html " data-toggle = " dodelchecked " data-confirm-msg = "¿Está seguro de que desea ¿eliminar los elementos seleccionados? "data-idname = " delids " data-group = " ids " >Exportar elementos seleccionados

Devolución de llamada de Ajax:

Las tres operaciones ajax de ajaxsearch, doajax y dodelchecked admiten ajax personalizado. La función de devolución de llamada se escribe de la siguiente manera:.

& lta href = " del . html " class = " btnbtn-red " data-toggle = " DOA jax " data-confirm-msg = "¿Está seguro de que desea eliminar esta línea de información? " data- callback = " mi devolución de llamada " & gt; eliminar datos

Función mycallback(json) {

//Hacer algo...

}

Los parámetros JSON devueltos por el servidor son los siguientes:

El código de estado de descripción del tipo de nombre int es obligatorio. Código de estado (OK = 200, Error = 300, Tiempo de espera = 301), los valores predeterminados de los tres parámetros se pueden configurar en BJUI.init y la cadena de mensaje es opcional. contenido de la información. La cadena tabid es opcional. Los ID de la pestaña de navegación que se actualizarán están separados por comas en inglés. No es necesario completar la ID de la pestaña de navegación actual, lo que puede hacer que la pestaña de navegación actual se actualice repetidamente. CloseCurrent booleano opcional. Si se debe cerrar la ventana actual (pestaña de navegación o cuadro de diálogo). La cadena de avance es opcional. Saltar a una URL. La cadena ForwardConfirm es opcional. Mensaje de confirmación antes de saltar a la URL.

La función de devolución de llamada predeterminada determina si se actualiza la pestaña de navegación, el cuadro de diálogo o el contenedor div local en función de la posición del elemento activador actual.

Mensaje de respuesta invocable:

$(selector). bjuiajax('ajaxDone ',json)

Form

La clase de la tabla es la misma que Bootstrap, solo los valores de relleno se ajustan para hacer la tabla más compacta.

Acolchado mínimo y divisores horizontales.

. Las tablas rayadas [no son compatibles con [IE8].

. Mesa bordeada.

El desplazamiento sobre la mesa añade el efecto de desplazamiento del mouse.

Implementación del botón de clasificación del campo de encabezado:

& ltth data-order-field="sex " >Nombre

& ltth data-order-direction = " ASC " data-order-field = " create time " >Hora de creación

data-order-field= " "El atributo hace que el campo se pueda ordenar y el valor del atributo es el nombre del campo con el que interactúa el fondo.

El atributo de dirección del orden de los datos indica el estado de clasificación actual del campo, valor opcional (asc/desc).

Formulario normal

Formulario normal, que puede mostrar elementos similares a una lista o diseñar un formulario con botones de clasificación adjuntos al campo de título.

Puede encontrar un ejemplo completo en el código fuente de B-JUI en table.html.

Tabla de título fijo

El encabezado de la tabla se puede fijar, se puede ajustar el ancho de cada columna y se pueden adjuntar botones de clasificación a los campos del encabezado.

& lttable data-toggle = " tabla fija " data-width = " 100% " data-layout-h = " 0 " & gt; = "tablefixed" Una vez agregado a la tabla, el encabezado será fijo. De forma predeterminada, B-JUI agregará clases a las tablas con encabezados fijos: tabla tabla rayada tabla delimitada tabla flotante. Si se establece una categoría en la tabla, prevalecerá la categoría establecida.

El atributo de ancho de datos puede definir el ancho de una tabla fija. El valor predeterminado es "100%", que se puede establecer en más del 100% o en un valor fijo, como por ejemplo: 150% y 1200 son legales. Cuando el ancho excede el área del cliente de navtab, aparece una barra de desplazamiento horizontal.

Puede encontrar un ejemplo completo en el código fuente de B-JUI en table-fixed.html.

Tablas editables

Se utilizan cuando es necesario agregar filas simples de contenido de forma dinámica.

& lttable class = " tabla con borde de tabla, tabla flotante con rayas de tabla " data-toggle = " table dit " data-initnum = " 0 " data-layout-h = " 0 " & gt;

& ltthead & gt

& lttr & gt

& ltth title = " No. " & gt& ltIngrese tipo="texto" nombre="editar [ #index#]. id " clase = " no " regla-datos = " requerido " valor = " 1 " tamaño = " 2 " >& lt/th & gt;

& ltTh título= " nombre " ><. Ingrese tipo="texto" nombre="edit[#index#]. nombre " regla-datos = " requerido " valor = " " tamaño = " 5 " >& lt/ésimo & gt;

& ltth title = " " herramienta para agregar datos = " true " ancho = " 100 "

& lta href = " JavaScript:;" = "¿Está seguro de que desea eliminar esta línea de información?"& gtDelete

& lt/th & gt;

& lt/tr & gt;

& lt/thead & gt;

& lt/table & gt;

Pasos de implementación:

Agregar el atributo data-toggle = "tablefixed" a la tabla en;

Agregue la información del formulario correspondiente al encabezado y coloque el nombre del campo en el atributo del título;

Si desea mostrar el botón Agregar en una columna, debe agregar el botón en la columna correspondiente. Agregar atributo data-add tool="true";

Si el botón eliminar aparece en cada fila, debe agregar un Classrow-del al botón eliminar. Si desea confirmar antes de eliminar, debe agregar el atributo data-confirm-msg= "Eliminar mensaje" en el botón de eliminar.

El atributo data-initnum de esta tabla indica el número de filas agregadas inicializadas al cargar la página. Cuando el valor es 0, no se requiere escritura.

Evento de agregar fila de activador externo:

Tipo de botón:

& ltbutton type = " button " class = " BTN-green " data-toggle = " tableditadd "objetivo-datos = " # tabla dit 1 " num-datos = " 1 " >. Agregar filas de edición

El atributo data-target establece el selector jQuery de la tabla de edición, y el atributo data-num establece el número de filas agregadas al hacer clic.

JQuery: $(selector). tabledit ('add ', objeto jQuery usado para editar la tabla, el número de filas a agregar)

$(selector).

tabledit('add ', $('#tabledit1 '), 2)

El ejemplo completo se puede encontrar en el código fuente B-JUI de table-edit.html.