Com crear un plugin per jQuery - TopNotice
Pàgina 1 de 4
Ús diari per treballar de forma més o menys sempre el mateix plugin de jQuery, jQuery UI, així, que només cobreix el 70% de les meves necessitats, jo ús blockUi i qTip2 .
Durant molt temps he pensat que en el fons jo no hauria d'escriure el plugin de tu mateix, en el fons, jo sempre miro de centralitzar el codi com sigui possible, sense perdre els meus arxius utils.js commons.js i on posar tot el que és ús comú de tota l'aplicació. Fa poc em va donar els ulls grossos a l'estructura més detallada de l'extensió i vaig arribar a la conclusió que l'escriptura pot ser útil per als meus projectes. La raó és que organitzar millor el codi en l'orientació de les múltiples re-ús, embalades per la seva funcionalitat, i no simplement per un factor comú una sèrie de funcions.
Escriure un plug-in s'afegeix com una casa de maó massís de jQuery, que hereta la robustesa, modularitat, que entenen més sobre la lògica. Ell pensa que en un curt més estructurat.
El nostre primer plugin: TopNotice
El que escric no és un plugin especialment complexa, he pensat més per la seva versatilitat i per la seva utilitat educativa, però es diu que vostè pot trobar prou interessant com per usar-lo en algun projecte petit, o potser com una base per construir una mica més evolucionat.
TopNotice mostrar un quadre a la part superior de la pantalla, centrada horitzontalment amb un missatge personalitzable, podem veure el resultat a obtenir:
La necessària
Com de costum, descarregar l'última versió de jQuery .
A continuació, preparar una estructura simple en el sistema d'arxius com es mostra a la imatge següent:
HTML
Preparem una estructura simple:
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
la forma de plugin jQuery <title> (TopNotice) - centre-equestre-sarremas.com </ title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
src = "/ images / Articoli / js_jqplugin / js / jquery.js" <script type="text/javascript"> </ script>
src = "/ images / Articoli / js_jqplugin / js / jquery.topnotice.mrwb.js" <script type="text/javascript"> </ script>
src = "/ images / Articoli / js_jqplugin / js / index.js" <script type="text/javascript"> </ script>
</ Head>
<body>
<div style="display: none;"> id = "topnotice" </ div>
<div id="struct">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus no sempre diam.
Nunc sagittis pulvinar sapiens, ut ut placerat diàmetre accumsan.
Donec erat Sapien, quis ullamcorper Mattis velocitat, sodales Egética Augusta?
Curabitur ac Tellus accumsan!
Etiam nisl dolor,
Còmode posuere consequat sit amet, consequat sit amet aquest.
Aenean sempre convallis assetjament.
Fusco em Identificació quam CONGU
sollicitudin placerat suscipit.
</ P>
Mostra <button advertència id="showNotice"> </ button>
</ Div>
</ Body>
</ HTML>
Comptem amb la CSS, JavaScript i per tot el que necessitem. Abans de jQuery, el nostre plugin, veurem en breu, a continuació, el codi JavaScript que s'encarregarà de la pàgina.
A l'interior del cos de l'etiqueta, prepari un div amb id = "topnotice" utilitzarem per a la nostra demostració. Tingueu en compte que el div s'ha inicialment ocult (display: none).
Completar el codi amb una mica de text per donar-li un aspecte més realista i completa de la pàgina i el botó de comandament que la nostra caixa.
El CSS
@ Charset "UTF-8";
body {
font-family: "Helvetica", "Arial", sans-serif;
font-size: 12px;
color: # 666;
}
# {Topnotice
text-align: center;
position: absolute;
}
# Struct {
ample: 600px;
margin: 0 auto;
text-align: center;
}
{P
margin-top: 100px;
}
botó {
background-color: # efefef;
border: 1px solid # dcdcdc;
padding: 5px;
ample: 200px;
cursor: pointer;
}
Unes poques línies per definir l'estructura bàsica, per emfatitzar l'estil assignat a la div "topnotice," el mínim, perquè llavors crec que el plugin per personalitzar d'acord a les seves necessitats.
 |
Curs d'AJAX
Web 2.0 aplicacions basades en AJAX amb ASP, ASP.NET i PHP. Descompte -10% fins al 2012.01.06. |
 |
Curs de CSS
Disseny Web i d'accessibilitat d'acord amb W3C CSS i XHTML. -15% De descompte fins al 2012.01.06. |
 |
Curs de Javascript
Guia completa de seqüència del costat del client. Descompte -10% fins al 2012.01.06. |
