Recently, fantashow of the company wants to embed a webpage and make a star rating comment plug-in:
HTML code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> template </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<LINK rel = "stylesheet" type = "text/CSS" href = "style/main.css"/>
</Head>
<Body>
<! -- Content start -->
<Div id = "Wrap">
<Div class = "template-title"> template title </div> <! -- Template title -->
<Div class = "template-line"> </div> <! -- Separator -->
<Div class = "template-View-content">
Average rating:
<Div class = "Review-star-box">
<Span id = "View-Star"> <A> </a> <> </a> </span> <! -- Star display, a label represents a star -->
</Div>
<SPAN class = "Star-Now"> <! -- Displays the number of stars and ratings. --> </span>
</Div>
<Div class = "template-line"> </div> <! -- Separator -->
<Div class = "Write-container">
<Div class = "rate-this-template"> <SPAN class = "strong"> rate this template: </span>
<Div class = "Review-star-box">
<Div id = "Review-Star"> <A> </a> <> </a> </div> <! -- Star display, a label represents a star -->
</Div>
</Div>
</Div>
<Div class = "Write-a-Review"> <span style = "float: Right"> reviews: 238 </span> write a reviewall </div>
<Form action = "" method = "Post">
<Input type = "hidden" name = "star" class = "star" value = "0"/> <! -- Star parameter, hidden Domain -->
<Textarea class = "Write-content" name = "content"> write your rview hrere </textarea>
<Div class = "template-bottom">
<Div class = "Left">
<SPAN class = "success"> your review has been successfully submitted. </span>
</Div>
<Div class = "right">
<SPAN class = "Write-submite"> submit </span>
</Div>
<Div class = "Clear-float"> </div>
</Div>
</Form>
</Div>
<! -- Content end -->
<SCRIPT type = "text/JavaScript" src = "JS/jquery-1.7.2.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "JS/Main. js"> </SCRIPT>
</Body>
</Html>
CSS code:
/* -- CSS reset --*/
HTML, body {Background: # f7ecd5; padding: 0; margin: 0; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #333; line-Height: 1}
FORM {display: inline} IMG {border: none;} ul, Li, ol, DL, DD {margin: 0; padding: 0; List-style: None}
. Strong {font-weight: bold}
. Clear-float {clear: Both; line-Height: 0; font-size: 0 ;}
# Wrap {width: 260px; margin: auto}/* -- webpage width --*/
# Wrap. template-title {font-weight: bold; font-size: 16px; line-Height: 35px ;}
# Wrap. template-View-content {margin: 20px auto; line-Height: 35px; Height: 35px ;}
# Wrap. template-line {border-bottom: 1px solid # fefaf2; border-top: 1px solid # e0d3b5}
# Wrap. Web-content {padding: 5px 0; Height: 120px ;}
# Wrap # create_time {margin-left: 10px ;}
# Wrap. Write-container {margin: 20px auto}
# Wrap. Write-a-review {margin: 5px auto}
# Wrap. write-title, # wrap. write-content {width: 250px; Border: 1px solid # a0bcca; border-radius: 3px; padding: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666; font-style: italic}
# Wrap. Write-content {Height: 85px; margin: 5px auto; overflow-Y: auto}
# Wrap. Write-submite {text-align: Right; color: #009}
# Wrap. Rate-this-template {Height: 20px; line-Height: 20px ;}
/* # wrap. template-bottom {} */
# wrap. template-bottom. left {float: Left; width: 80% }< br> # wrap. template-bottom. right {float: Right; width: 20%; text-align: right}
# wrap. template-bottom. right span {cursor: pointer}
# wrap. template-bottom. success {color: Green}
# wrap span. link {color: #000099; font-style: italic ;}< BR ># wrap a: link {color: #009; text-Decoration: none}
# wrap a: visited {color: #009; text-Decoration: None}
# wrap a: hover {color: #009; text-Decoration: none}
# wrap a: Active {color: #009; text-Decoration: None}
/* -- Review star --*/
# Review-star {margin-left: 5px}
# Wrap. review-star-box {width: 110px; Height: 35px; Vertical-align: Top; display: inline-block; * display: inline; * ZOOM: 1; * margin-top:-2px ;}
# Wrap # starnum {margin-left: 10px; font-weight: lighter}
# Review-star A, # wrap # view-star A {width: 20px; Height: 20px; display: inline-block; _ display: inline; _ ZOOM: 1; cursor: pointer; Background: URL (images/star.png) No-repeat left top; _ Background: URL (images/star.gif) No-repeat left top ;}
# Review-star. on, # review-star. hover, # wrap # view-star. on {Background: URL (images/star.png) No-repeat left-28px; _ Background: URL (images/star.gif) No-repeat left-28px ;}
# Wrap # view-star {margin-left: 5px ;}
# Wrap # view-star A {cursor: auto; margin-top: 8px; * margin-top: 0; _ margin-top: 8px}
# Wrap. Star-now {margin: auto 5px; display: inline-block; _ display: inline; _ ZOOM: 1}
JS Code:
$ (Function (){
// Display the star rating
(Function (){
VaR d = 4; // This variable is the star level in the read database.
$ (". Star-Now" 2.16.html (d)
For (VAR I = 0; I <= (D-1); I ++) {$ ("# view-star A: eq (" + I + ")"). addclass ("On ");}
})();
(Function () {// starts comments
// ----- Star Selection -----
VaR D = 0; // The default number of stars;
VaR S = false;
$ ("# Starnum" ).html (D + "star ");
For (I = 0; I <= (D-1); I ++) {$ ("# review-star A: eq (" + I + ")"). addclass ("On ");}
$ ("# Review-star a"). Hover (function () {// when the mouse enters
VaR n = $ (this). Index ();
$ ("# Review-star a"). removeclass ("hover ");
// $ ("# Review-star a"). removeclass ("On ");
For (VAR I = 0; I <= N; I ++) {// hover
$ ("# Review-star A: eq (" + I + ")"). addclass ("hover ");
}
If (typeof me! = 'Undefined') {$ ("# review-star a"). removeclass ("On ");}
If (! S) {$ ("# review-star a"). removeclass ("On ")}
}, Function () {// move the mouse away
$ ("# Review-star a"). removeclass ("hover");/* --- move the mouse ---*/
If (typeof me! = 'Undefined '){
For (VAR m = 0; m <= Me; m ++ ){
$ ("# Review-star A: eq (" + M + ")"). addclass ("On ");
}
}
If (! S ){
For (var k = 0; k <D; k ++)
{
$ ("# Review-star A: eq (" + K + ")"). addclass ("On ");
}
}
});
$ ("# review-star "). click (function () {
var n = $ (this ). index ();
$ ("# review-star "). removeclass ("On");
for (VAR I = 0; I <= N; I ++) {// select a star rating
// $ ("# starnum" ).html (I + 1 + "star")
$ (". star "). val (I + 1)
$ ("# review-star A: eq (" + I + ")"). addclass ("On");
}< br> return me = N, S = true;
});
}) (); // end of comment
}); // jquery end
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
