Latest web development tutorials

Bootstrap general plug-in

En la sección anterior se analizóel diseño de los componentes para el montaje es sólo el principio.Bootstrap viene con 12 tipos plugin de jQuery amplía la funcionalidad se puede añadir al sitio más interactivo. Incluso si usted no es un desarrollador de JavaScript avanzado, también puede comenzar a aprender los plug-ins Bootstrap de JavaScript. API uso de rutina de carga de datos (en arranque API de datos), la mayor parte del plug-in puede ser activado sin necesidad de escribir código.

Sitio Referencias tapón de Bootstrap de dos maneras:

  • Cita solo: utilizar un.jsarchivos separados*de Bootstrap.Algunos componentes plug-ins y CSS depende de otros plug-ins. Si conecta una referencia separada, asegúrese de que entienden las dependencias entre los plug-ins.
  • Compilar Cita (simultáneamente): Usebootstrap.jso la versión comprimida debootstrap.min.js.
    No trate de citar estos dos archivos, y porque bootstrap.jsbootstrap.min.js contienen todos los plugins.
Todos los plug-ins se basan en jQuery. Debe hacer referencia en el archivo plugin jQuery antes. Visita bower.json ver Bootstrap versión compatible actualmente de jQuery.

datos de la propiedad

  • Sólo se puede ser capaz de utilizar todos los datos de atributos API de plugins Bootstrap, sin escribir una sola línea de código JavaScript. Esta es una API de Bootstrap de primera clase, debe ser la forma que prefiera.
  • Por otra parte, en algunos casos puede que tenga que desactivar esta función. Por lo tanto, también ofrecemos un método API atributo de datos cerrada, es decir, para levantar el espacio de nombres-API de datosy vinculante para los eventos de documentos. Tales como los siguientes:
    $ (Document) .OFF ( '. Data-api')
    
  • Para cerrar un plug-in específico, justo antes de que el espacio de nombres-API de datos más el nombre del widget como un espacio de nombres, como se muestra aquí:
    $ (Document) .OFF ( '. Alert.data-api')
    

API programática

Proporcionamos una forma de pura API JavaScript para todos los plugins de archivos de inicio. Todas las llamadas a la API públicas están soportados de forma individual o en modo encadenados, y devuelve un conjunto de elementos que opera (Nota: el formulario e invocar acuerdo jQuery). Por ejemplo:

$ ( ". Btn.danger"). Button ( "cambiar"). AddClass ( "grasa")

Todos los métodos pueden tomar una opciones opcionales objeto como un parámetro, o una cadena que representa un método particular, o sin parámetros (en este caso, se inicializará el plug-in para el comportamiento por defecto), de la siguiente manera:

// Ya iniciada con el comportamiento por defecto de $ ( "# myModal"). Modal ()    
 // Inicializar el teclado no admite el $ ( "# myModal") modal ({Teclado: false}).  
// Inicializar y llamar a la demostración de inmediato
$ ( "# MyModal"). Modal ( "mostrar")                

Cada plug-in enla propiedad constructortambién expone suconstructor original:$ .fn.popover.Constructor. Si desea obtener una instancia de un widget en particular se puede obtener directamente a través de los elementos de la página:

 $ ( '[Rel = popover]'). Los datos ( 'popover').

Evitar colisiones de espacio de nombres

A veces pueden necesitar ser utilizado con otros marcos de interfaz de usuario plugins de archivos de inicio. En este caso, pueden ocurrir colisiones de espacio de nombres. Por desgracia, si esto sucede, puede restaurar su valor original llamando a los métodos de controles.noConflict.

// Devuelve $ .fn.button antes de que el valor asignado var = $ bootstrapButton .fn.button.noConflict () 
funciones BootstrapBtn // Por el $ (). conferidas Bootstrap					       
$ .fn.bootstrapBtn = BootstrapButton            

evento

Bootstrap ofrece un evento personalizado como un comportamiento único de la mayoría de los plug-ins. En general, estos eventos son de dos tipos:

  • Infinitivo: Esto se desencadena cuando comienza el evento.Tales comopor ejemplo: espectáculo.infinitivo evento proporciona una funciónpreventDefault.Esto hace que sea posible para detener la operación antes de comenzar el evento.
    $ ( '# MyModal'). En ( 'show.bs.modal', function (e) {
    Se muestra // cuadro modal Prevenir si (datos!) e.preventDefault volver () 
    })
    
  • participio pasado: Esta se activará después de que se termine la operación.Tales comopor ejemplo: se muestra.