Implementation of Demo page
Copy Code code as follows:
<div class= "Digg" id= "Digg" >
<div class= "Good" > <a href= "#" >
<p> This document is good </p>
<div class= "Bar" >
<div id= "g_img" style= "width:70%" ></div>
</div>
<span class= "num" id= "num" >70% (7000) </span> </a> </div>
<div class= "Bad" > <a href= "#" >
<p> documentation Needs Improvement </p>
<div class= "Bar" >
<div id= "b_img" style= "width:30%" ></div>
</div>
<span class= "num" >30% (3000) </span> </a> </div>
</div>
The main point is to control the width of the g_img by a percentage, as the CSS code is not posted.
Demo Code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>Digg</title>
<style type= "Text/css" >
* {
padding:0;
margin:0;
}
. Digg {
Height:auto;
width:190px;
font-size:12px;
Font-weight:normal;
}
. Digg a {
Display:block;
height:48px;
width:189px;
Background-image:url (images/mark.gif);
Background-repeat:no-repeat;
position:relative;
Color: #000;
Text-decoration:none;
}
. Digg. Good {
margin-bottom:10px;
margin-top:5px;
}
. Digg. Good a {
Background-position: -189px 0px;
}
. Digg. Good a:hover {
background-position:0px 0px;
}
. Digg. Bad a {
Background-position: -378px 0px;
}
. Digg. Bad A:hover {
Background-position: -567px 0px;
}
. Digg A P {
padding-left:30px;
line-height:25px;
}
. Digg. Bar {
Background-color:white;
height:5px;
left:20px;
Overflow:hidden;
Position:absolute;
Text-align:left;
top:30px;
width:55px;
}
. Bar #g_img {
Background-image:url (images/sprites.gif);
Background-repeat:repeat-x;
height:5px;
Width:auto;
}
. Bar #b_img {
Background-image:url (images/sprites.gif);
Background-repeat:repeat-x;
height:5px;
Width:auto;
background-position:0px-5px;
}
. num {
Color: #333;
Font:normal normal 10px/12px Tahoma;
left:80px;
Position:absolute;
top:26px;
}
. Digg. Good. Bar {
border:1px solid #40A300;
}
. Digg. Bad. Bar {
border:1px solid #555;
}
</style>
<body>
<div class= "Digg" id= "Digg" >
<div class= "Good" > <a href= "#" >
<p> This document is good </p>
<div class= "Bar" >
<div id= "g_img" style= "width:70%" ></div>
</div>
<span class= "num" id= "num" >70% (7000) </span> </a> </div>
<div class= "Bad" > <a href= "#" >
<p> documentation Needs Improvement </p>
<div class= "Bar" >
<div id= "b_img" style= "width:30%" ></div>
</div>
<span class= "num" >30% (3000) </span> </a> </div>
</div>
</body>
With the demo, other implementation is more convenient, the first is the page to get HTML, the page first load, using AJAX to obtain background data, do not directly display. (Here for easy testing, use ASP as the background language)
The following is the ASP output HTML code
Copy Code code as follows:
function getdigshtml () ' Output HTML
Dim rsajax,sql,str,digsnum,undigsnum,digsnumall,digsper,undigsper
Set Rsajax=server. CreateObject ("Adodb.recordset")
Sql= "SELECT * from Dig where id=1"
Rsajax.open sql,conn,1,1
Digsnum=rsajax ("digs")
Undigsnum=rsajax ("Undigs")
If IsNull (digsnum) then digsnum=0
If IsNull (undigsnum) then undigsnum=0
Digsnumdigsnumall=digsnum+undigsnum
If Digsnumall=0 Then
Digsper=0
Undigsper=0
Else
Digsper=formatnumber (CInt (digsnum)/cint (Digsnumall), 3) *100
Undigsper=formatnumber (CInt (undigsnum)/cint (Digsnumall), 3) *100
End If
str= "<div class= ' good ' >"
strstr=str& "<a href=javascript:isdigs (' digs ') >"
strstr=str& "<p> This document is good </p><div class= ' bar ' ><div id= ' g_img ' style= ' width:" &digsper & "% ' ></div></div>"
strstr=str& "<span class= ' num ' >" &digsper& "% (" &digsnum& ") </span>"
strstr=str& "</a></div><div class= ' bad ' >"
strstr=str& "<a href=javascript:isdigs (' Undigs ') >"
strstr=str& "<p> documentation to be improved </p><div class= ' bar ' ><div id= ' b_img ' style= ' width:" &undigsper & "% ' ></div></div>"
strstr=str& "<span class= ' num ' >" &undigsper& "% (" &undigsnum& ") </span>"
strstr=str& "</a></div>"
Getdigshtml=str
End Function
The end of the output is the front desk to get, this time we will use jquery Ajax, why not directly with Ajax, the reason is very simple, I will not ... Look at the Ajax code in jquery, it's simple
Copy Code code as follows:
function getdigshtml ()//Get top, Step on HTML
{
$.ajax ({
Type: ' POST ',
URL: ' digg.asp ',
Data: ' action=getdigshtml ',
Success:function (msg) {
$ ("#digg"). HTML (msg);
}
})
}
The output is over, and the next step is digs and undigs, similar to the code to get HTML.
Copy Code code as follows:
function Isdigs (digtype)//Top, step on the operation
{
$.ajax ({
Type: ' POST ',
URL: ' digg.asp ',
Data: ' Action=digs&digtype= ' +digtype,
/* Beforesend:function () {
$ ("#vote"). Hide ();
$ ("#loadings"). Show ();
The AJAX request displays the loading effect * *
Success:function (msg) {
Switch (msg)
{
/* Backstage to judge
Case ' 1 ':
$ ("#loadings"). Hide ();
$ ("#vote"). Show ();
Alert ("Please log in first!") ");
Break
Case ' 2 ':
$ ("#loadings"). Hide ();
$ ("#vote"). Show ();
Alert ("Please download first, then operate!") ");
Break
Case ' 4 ':
$ ("#loadings"). Hide ();
$ ("#vote"). Show ();
Alert ("You have participated in the evaluation!") ");
break;*/
Case ' 3 ':
Getdigshtml ()//rebind HTML
$ ("#loadings"). Hide ();
$ ("#vote"). Show ();
Alert ("Thank you for your participation!") ");
Break
Default
}
}
})
}
Commented out code: Part of the background data legal validation, Beforesend This method is the AJAX request before the implementation of the relevant operations (used to do loading more)
The final step is that each time the data is submitted and successfully returned, getdigshtml () will have to regain the binding set, so as to ensure the real-time data.
Demo code needs an ASP environment, you can test.
Package Download Address: http://www.jb51.net/jiaoben/28489.html
