Such as
| The code is as follows |
Copy Code |
$.messager.lays (width, height); |
This method is used primarily to define the width and height of the pop-up window.
| The code is as follows |
Copy Code |
$.messager.anim (Type,speed); |
The method primarily defines how and how quickly the window is rendered.
| The code is as follows |
Copy Code |
Display as Fadein animation
$.messager.anim ("Fade", 1000);
Show in animated mode
$.messager.anim ("show", 1000); |
This method primarily defines what the window displays, and how long the window is displayed to hide it.
If you use the default caption, the title is set to 0, and the title and text can also be set to display for HTML content. If you want the user to click the Close button on the window to close the message box, set time to 0.
| The code is as follows |
Copy Code |
$.messager.show (0, "This is a cue box", 5000);
$.messager.show ("<font color= ' red ' > Hint info </font>", "<a href= ' http://www.111cn.net" >111cn.net welcome you </a> ", 3000); |
After understanding the role of each method in the message plug-in, it is easy to use, the following actions:
1. Introduce jquery.js and jquery.messager.js files to the page.
2. Call the function in the message plug-in when the page is loaded, set the window size, display the effect, and display the contents.
| The code is as follows |
Copy Code |
$ (function () {
$.messager.lays (200, 200);
$.messager.anim (' fade ', 1000);
$.messager.show ("Hint info", "<a href=" http://www.111cn.net "> Concise modern Magic Welcome you </A>", 5000);
}); |
Cases
| The code is as follows |
Copy Code |
| <script src= ". /jquery/js/jquery-1.4.2.min.js "type=" Text/javascript "></script>
<script type= "Text/javascript" src= "Js/jquery.messager.js" ></script> <script type= "Text/javascript" >
$ (document). Ready (function () {
$.messager.show (0, ' a jquery messager message pop-up plugin! ');
$ ("#showMessager300x200"). Click (function () {
$.messager.lays (300, 200);
$.messager.show (0, ' 300x200 message ', 40000);
});
$ ("#showMessagerFadeIn"). Click (function () {
$.messager.anim (' fade ', 2000);
$.messager.show (0, ' fadein animated message ');
});
$ ("#showMessagerShow"). Click (function () {
$.messager.anim (' show ', 1000);
$.messager.show (0, ' show animated message ');
});
$ ("#showMessagerDim"). Click (function () {
$.messager.show (' <font color=red> custom title </font> ', ' <font color=green style= ' font-size:14px; Font-weight:bold; " > Custom Content </font> ');
});
$ ("#showMessagerSec"). Click (function () {
$.messager.show (0, ' One second off message ', 1000);
});
});
</script>
<style type= "Text/css" >
<!--
body,td,th {font-size:12px;}
Body {background-color: #fefefe;}
Input {background-color: #F5D99E; color: #333; border:solid 1px #993300; font-size:12px;}
-->
</style> Html
<p><strong>jqueyr Plugin-messager </strong></p>
<p><input type= "button" id= "showmessager300x200" value= "display a 300x200 message"/></p>
<p><input type= "button" id= "Showmessagerfadein" value= "displays a fadein animated message"/></p>
<p><input type= "button" id= "Showmessagershow" value= "displays a show animated message"/></p>
<p><input type= "button" id= "Showmessagerdim" value= "Display definition content and header message"/></p>
<p><input type= "button" id= "Showmessagersec" value= "one second off message"/></p> |
Look at one more example
Jquery Code:
| The code is as follows |
Copy Code |
| <script type= "Text/javascript" >
$ (function () {
$ (window). Load (function () {
$ ("Div[id=newnotice]"). CSS ({"Right": "0px", "bottom": "1px"});
$ ("Div[id=newnotice]"). Slidedown ("slow");
}). Scroll (function () {
$ ("Div[id=newnotice]"). CSS ({"Bottom": "0px"});
$ ("Div[id=newnotice]"). CSS ({"Right": "0px", "bottom": "1px"});
}). Resize (function () {
$ ("Div[id=newnotice]"). CSS ({"Bottom": "});
$ ("Div[id=newnotice]"). CSS ({"Right": "0px", "bottom": "1px"});
});
$ ("label[id=tomin]"). Click (function () {
$ ("Div[id=noticecon]", "Div[id=newnotice]"). Slideup ();
});
$ ("Label[id=tomax]"). Click (function () {
$ ("Div[id=noticecon]", "Div[id=newnotice]"). Slidedown ();
});
$ ("label[id=toclose]"). Click (function () {
$ ("Div[id=newnotice]"). Hide ();
});
/**
$.get ("/cgi/test.xml", function (data) {
$ (data). Find (' channel '). Find (' item '). Each (function (index, ele) {
var titles = $ (ele). Find (' title '). Text ();
var links = $ (ele). Find (' link '). text ();
$ ("#noticecon"). Find (' ol '). Append (' <li><a href= "' +links+ '" > ' +titles+ ' </a></li> ');
})
});
**/
});
</script> |
HTML code
| The code is as follows |
Copy Code |
| <div id= "Newnotice"
<p>
<span class= " Title "> Hottest news </span>
<span id=" BTS "
<label class= "button" id= "Tomin" title= "Minimize" >_</ Label>
<label class= button "id=" Tomax "title=" ("Max") > Port </label>
< Label class= "button" id= "Toclose" title= "Off" >X</LABEL>
< /span>
</p>
<div id= "Noticecon"
<ol
</ol>
</div>
</div> |
