NY jQuery Modal Window – nu i min udgave

Hermed genproduktionen af Modal Window plugin’et. Denne gang i en udgave, skrevet udelukkende af mig selv. For nye læsere har jeg jo været tvunget til at skrive jQuery Modal Window om, da jeg skiftede arbejde. Se en masse demoer på siden jQuery Modal Window.

jQuery Modal Window opbygning

jQuery Modal Window er opbygget af to dele. jQuery plugin delen og så en controller klasse, hvis API benyttes til at styre jQuery Modal Window og dets indhold.

jQuery Modal Window udvidelser

Der er i min nye udgave blevet plads til et par forbedringer og udvidelser. jQuery Modal Window kan nu nemmere arbejde sammen med andre plugins og der er kommet nogle nye indstillingsmuligheder til.

jQuery Modal Window samarbejds API

For bedre at kunne servicere og samarbejde med andre plugins har jeg skrevet en række hjælpemetoder.

jQuery Modal Window controller

jQuery Modal Window controller har for det første en række public variable, som kan tilgåes for at komme til elementer og informationer benyttet af jQuery Modal Window.

• mwc.settings
  De settings, som ligger til grund for jQuery Modal Window. Det er endnu ikke muligt at ændre settings on the fly.
• mwc.modal
  Selve modal vinduet, som jQuery objekt
• mwc.modalContent
  Modal vinduets indhold. Altså det indhold du vælger skal vises.
• mwc.background
  Baggrunden bag modal vinduet. Madpapiret kaldes det også ofte.
• mwc.block
  jQuery Modal Window containeren, som indeholder både modal og background

Derudover har jQuery Modal Window også en række metoder, som kan benyttes udefra.

• mwc.fireResizeModal(modalCss, ignoreStartEvent, noAnimate)
  Denne metode starter en gencalculering og placering af modal vinduet.
  modalCss giver mulighed for at sende egne mål med på vinduets størrelse og placering. ignoreStartEvent vil tvinge jQuery Modal Window til IKKE at fyre onModalResize eventen, hvis den sættes til true. noAnimate vil ignorere en eventuel animation når modal vinduet ændrer størrelse.
• mwc.calculateModalCSS()
  Denne metode udregner den plads og position modal vinduet vil kunne optage. Kan benyttes til at få nøjagtige mål på hvor stort ens indhold må være.
  returnerer en modalCss.
• mwc.deconstruct()
  Lukker og fjerner jQuery Modal Window.
• mwc.getScrollBarWidth()
  Returnerer størrelsen på browserens scrollbar bredde. Kan være nyttig info, hvis man har tænkt sig at lave scroll.

jQuery Modal Window plugin API

Jeg har givet selve jQuery plugin’et en ekstra metode. Her vil jeg dog kort gennemgå dem alle.

• jQuery.fn.openModalWindow(settings)
  Denne metode åbner et bestemt indhold i et nyt jQuery Modal Window. Intet nyt under solen her.
• jQuery.fn.closeModalWindow()
  Kaldes denne metode på et hvilket som helst element inde i jQuery Modal Window’s block element vil den lukke og fjerne sig selv.
• jQuery.fn.updateModalWindow(modalCss, ignoreStartEvent)
  Kaldes denne metode på et hvilket som helst element inde i jQuery Modal Window’s block element vil den udregne en ny størrelse og position.
• jQuery.fn.getModalWindowControl()
  Denne metode er ny og kaldes den på et hvilket som helst element inde i jQuery Modal Window’s block element vil den returnere jQuery Modal Window controlleren, hvis API man så kan benytte.

Ekstra indstillinger

jQuery Modal Window har fået fire nye indstillingsmuligheder. To events og to booleans til at influere hvordan jQuery Modal Window fungerer.

• settings.noBackground
  Hvis sat til true vil der ikke kommer noget madpapir bag modal vinduet.
  Som standard sat til false.
• settings.enableModalScroll
  Hvis sat til false vil jQuery Modal Window ikke lave scroll hvis indholdet bliver for stort.
  Som standard sat til true.
• settings.onModalResize
  Denne event bliver fyret lige inden jQuery Modal Window skal til at ændre størrelse og position på modal vinduet.
  Ønsker man at benytte denne event skal man selv sørge for at ændre størrelsen på modal vinduet.
  Som standard sat til null.
• settings.onModalResized
  Denne event bliver fyret efter modal vinduet har ændret størrelse og position.
  Som standard sat til null.

Se alle indstillinger på siden jQuery Modal Window dokumentation.

jQuery Image Viewer

Jeg skriver allerede nu på den nye udgave af jQuery LightView, som kommer til at hedde jQuery Image Viewer. jQuery Image Viewer kommer til at arbejde tæt sammen med jQuery Modal Window, som jeg tror vil udgøre et solidt fundament for jQuery Image Viewer. En ny blogpost vil komme online så snart jeg er færdig.