the "one" requirement is as follows:
1: The registration does not open the page, changes to the pop-up layer,
2: New users buy a house desire to investigate,
3: The user name automatically retrieves the recommended username,
4: Date of birth Change the user input to the control selection.
5: Try to improve the user experience, to attract users to register.
"Two" no picture without truth.
1: Simplified page:
2: Surface tip and rounded border:
3: Support Polls (asynchronous submission)
4: Automatically retrieve the recommended user name (test data)
5: Data validation
6: Calendar
7: Support Drag
8: Slide into display
9:over
"Three" code analysis
1. The production of the pop-up layer,
A. Refer to these three first:
Copy Code code as follows:
<script src= "Jquery-1.4.2.min.js" type= "Text/javascript" language= "JavaScript" ></script>
<script src= "Jquery-impromptu.3.1.min.js" type= "Text/javascript" language= "JavaScript" ></script>
<link rel= "stylesheet" media= "All" type= "Text/css" href= "Examples.css"/>
B. Call this method $.prompt, implement pop-up.
2. Surfacing text
A. Refer to these two first:
Copy Code code as follows:
<link rel= "stylesheet" media= "All" type= "Text/css" href= "Jquery.tooltip.css"/>
<script src= "Jquery.tooltip.min.js" type= "Text/javascript" language= "JavaScript" ></script>
B. Invoke the following code implementation to surface:
Code
Copy Code code as follows:
$ ("#suggest2"). ToolTip ({bodyhandler:function () {return "username must begin with a letter";},showurl:false});
$ ("#cemail"). ToolTip ({bodyhandler:function () {return "recommended to use Sina game";},showurl:false});
$ ("#Text1"). ToolTip ({bodyhandler:function () {return "Minors please do not register";},showurl:false});
3. Voting
A. Refer to the following two:
Copy Code code as follows:
<script type= "Text/javascript" src= "Jquery.rater.js" ></script>
<link rel= "stylesheet" type= "Text/css" href= "rater.css" media= "screen"/>
B. Call $ (' #demo2 '). Rater (' handler1.ashx ') to achieve a vote
4. Automatic retrieval of recommended user name (automatic completion)
A. Quote the following two
Copy Code code as follows:
<script src= "Jquery.autocomplete.min.js" type= "Text/javascript" language= "JavaScript" ></script>
<link rel= "stylesheet" media= "All" type= "Text/css" href= "Jquery.autocomplete.css"/>
<script src= "Localdata.js" type= "Text/javascript" language= "JavaScript" ></script>
B. Call $ ("#suggest2"). focus (). AutoComplete (cities), automatic retrieval (with local test data in localdata.js)
5. Data validation
A. Reference this <script src= "jquery.validate.js" type= "Text/javascript" language= "JavaScript" ></script>
Then write the following CSS:
Copy Code code as follows:
<style type= "Text/css" >
#commentForm {width:500px;}
#commentForm label {width:500px;}
#commentForm Label.error, #commentForm input.submit {margin-left:0px;color:red;}
</style>
(Commentform is the ID of the form)
B. Call this $ ("#commentForm"). Validate () implementation validation; The class within the form and some attributes are configured so that everything is fully validated.
such as: Mailbox <input id= "Cemail" name= "email" class= "required email"/>
6. Calendar
Speaking of this shame! Start with the jquery calendar plugin, and later because it can't be placed above the frame, switch to another one.
A. Quote the two first
Copy Code code as follows:
<script src= "Calendar2008.js" type= "Text/javascript" language= "JavaScript" ></script>
<link rel= "stylesheet" media= "All" type= "Text/css" href= "Rightbar.css"/>
B. Write the following code again
Copy Code code as follows:
var c = new Calendar ("C");
document.write (c);
The following two are used for fine-tuning positioning
C.offsettop = 22;
C.offsetleft = 25;
HTML code:
Copy Code code as follows:
<input class= "Required Dateiso" name= "BeginTime" "type=" text "id=" Text1 "size=" "onfocus=" C.showmoreday = false; C.show (this); "Value=" "/>
Can see that he class= "required Dateiso" Automatic validation time format
7. Dragging and dragging
A. Refer to this first: <script src= "Jquery-ui.min.js" type= "Text/javascript" language= "JavaScript" ></script>
B. Write again this $ ("xxx"). draggable (); Implement drag-and-drop
8. Slide into display:
Plug-ins provide an extension:
Copy Code code as follows:
$ (document). Ready (function () {
$.fn.extend ({
Dropin:function (speed, callback) {
var $t = $ (this);
if ($t. CSS ("display") = = "None") {
Eltop = $t. CSS (' top ');
Elouterheight = $t. Outerheight (True);
$t. CSS ({top:-elouterheight, display: ' Blocks '})
. Animate ({top:eltop},speed, ' Swing ', callback);
}
}
});
});
The call $.prompt ("Mes", {show: ' Dropin '}) enables sliding into.
9. Fillet border.
A. Reference this <script src= "jquery.corner.js" type= "Text/javascript" language= "JavaScript" ></script>
B. Call $. ("xxx"). Corner ("cc: #d1c7b7");
C. Note: Four corners of the missing place of the color can also be set, generally with the background color consistent.
"Four" summary
The general name plug-in CSS and script naming are very normative, so there is a rare conflict. As long as the CSS and JS do not conflict, you can rest assured that use, random use, chaos.
"Five" help (resolved)
Originally wanted to exclusively the jquery plugin, the result of the jquery calendar plug-in is not floating above the pop-up layer, so a different calendar control. I set the Z-index to 10000000000000000, the result can be imagined----still not float. Can not find where the CSS conflict, which found a tell me.
Copy Code code as follows:
Table.jcalendar {
border:1px solid #000;
Background: #aaa;
Border-collapse:separate;
border-spacing:2px;
z-index:100000000000000000000000000000000;
Position:absolute;
}
Solution:
Method One:
On your page begin to define the following style
. ui-datepicker {z-index:1200}
When calling dialog, use the following code
JQuery ("#midialog"). Dialog ({zindex:900});
Method Two:
[Code]
. DatePicker ({
Beforeshow:function (i, E) {
var z = jQuery (i). Closest (". Ui-dialog"). CSS ("Z-index") + 4;
E.dpdiv.css (' Z-index ', z);
}
})
Code package download
Author: Zhang Lei (zhanglei ' s Blog)
