How to create a plugin for jQuery - TopNotice
Page 1 of 4
Use daily to work more or less always the same plugin of jQuery, jQuery UI as well, which only covers 70% of my needs, I use blockUi and qTip2 .
I have long thought that deep down I would not need to write the plugin yourself, basically, I always try to centralize the code as possible, never missing my files utils.js commons.js and where to put everything that is common use the entire application. I recently gave a blind eye to the more detailed structure of the plugin and I concluded that writing can be useful for my projects. The reason is that better organize the code in the orientation of the multiple re-use, packaged for functionality, not simply by a common factor a series of functions.
Writing a plugin is added as a solid brick house on JQuery, it inherits the robustness, modularity, they understand more about the logic. He thinks in a more structured short.
Our first plugin: TopNotice
What I write is not a particularly complex plugin, I thought more for his versatility and for its educational usefulness, but it is said that you may find interesting enough to use it in some small project, or perhaps as a base to build something more evolved.
TopNotice show a box near the top of the screen, centered horizontally with a customizable message, we see the result to be achieved:
The required
As usual we download the latest of jQuery .
Then prepare a simple structure on the filesystem as shown in the picture below:
HTML
We prepare a simple structure:
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
how to <title> JQuery Plugin (TopNotice) - centre-equestre-lepuy.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 id="topnotice" style="display: none;"> </ div>
<div id="struct">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus not always diam.
Nunc sagittis pulvinar sapien, ut ut placerat accumsan diam.
Donec erat sapien, ullamcorper quis Mattis speed, Sodales eget Augusta?
Curabitur ac tellus accumsan!
Etiam nisl pain,
Commodus posuere consequat sit amet, consequat sit amet east.
Aenean always convallis harassment.
Fusco to me id quam CONGU
sollicitudin placerat suscipit.
</ P>
Show <button id="showNotice"> warning </ button>
</ Div>
</ Body>
</ Html>
We include the CSS, JavaScript and order all we need. Before jQuery, then our plugin, we will see shortly, then the javascript that will manage the page.
Inside the body tag, prepare a div with id = "topnotice" we will use for our demonstration. Note that the div should be initially hidden (display: none).
Complete the code with some text to give a more realistic and complete the page and the button that will command our box.
The CSS
@ CHARSET "UTF-8";
body {
font-family: "Helvetica", "Arial", sans-serif;
font-size: 12px;
color: # 666;
}
# {Topnotice
text-align: center;
position: absolute;
}
# Struct {
width: 600px;
margin: 0 auto;
text-align: center;
}
{p
margin-top: 100px;
}
button {
background-color: # efefef;
border: 1px solid # dcdcdc;
padding: 5px;
width: 200px;
cursor: pointer;
}
A few lines to define the basic structure, to emphasize only the style assigned to the div "topnotice," the bare minimum because then we think the plugin to customize according to your needs.
 |
CSS Course
Web Design and Accessibility according to W3C CSS and XHTML. Starting from 29 €. |
 |
HTML Course
The markup language for the Web from 29 €. |
 |
Javascript Course
Complete guide to client-side scripting. Starting from 39 €. |
