Difference between revisions of "JQuery General Examples"

From Organic Design wiki
m
m
 
(9 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
<style type="text/css">
 
<style type="text/css">
−
body, p, blockquote {
 
−
margin: 0;
 
−
padding: 0;
 
−
}
 
−
 
−
a img, iframe { border: none; }
 
−
 
−
/* Headers
 
−
------------------------------*/
 
−
 
−
h1, h2, h3, h4, h5, h6 {
 
−
margin: 0;
 
−
padding: 0;
 
−
}
 
  
−
h1 { font-size: 150%; }
+
#large p { margin: 10px 0; }
−
h2 { font-size: 140%; }
 
−
h3 { font-size: 130%; }
 
−
h4 { font-size: 120%; }
 
−
h5 { font-size: 110%; }
 
−
 
−
/* Lists
 
−
------------------------------*/
 
−
 
−
ul, ol, dl, li, dt, dd {
 
−
margin: 0;
 
−
padding: 0;
 
−
}
 
−
 
−
/* Links
 
−
------------------------------*/
 
−
 
 
−
a, a:link {}
 
−
a:visited {}
 
−
a:hover {}
 
−
a:active {}
 
−
 
 
−
/* Forms
 
−
------------------------------*/
 
−
 
 
−
form, fieldset {
 
−
margin: 0;
 
−
padding: 0;
 
−
}
 
−
 
−
fieldset { border: 1px solid #000; }
 
−
 
 
−
legend {
 
−
padding: 0;
 
−
color: #000;
 
−
}
 
−
 
 
−
input, textarea, select {
 
−
margin: 0;
 
−
padding: 1px;
 
−
font-size: 100%;
 
−
font-family: inherit;
 
−
}
 
−
 
−
select { padding: 0; }
 
−
 
 
−
p { margin: 10px 0; }
 
  
 
li { margin-left: 10px; }
 
li { margin-left: 10px; }
  
−
h3 { margin: 5px 0; }
+
#large {
−
 
 
−
.red { background-color: red; }
 
−
.blue { color: blue; }
 
−
.green { color: green; }
 
−
 
 
−
#rating {
 
−
border: 1px solid black;
 
−
margin: 5px;
 
−
padding: 5px;
 
−
}
 
−
 
 
−
table {
 
 
border: 1px solid #666;
 
border: 1px solid #666;
 
margin: 20px 0 20px 0 !important;
 
margin: 20px 0 20px 0 !important;
 
}
 
}
  
−
th, td {
+
#large th, #large td {
 
padding: 2px 4px 2px 4px !important;
 
padding: 2px 4px 2px 4px !important;
 
text-align: left;
 
text-align: left;
Line 90: Line 18:
 
}
 
}
  
−
th {
+
#large th {
 
background-color: #fc0;
 
background-color: #fc0;
 
}
 
}
  
−
th:hover {
+
#large th:hover {
 
background-color: #fc7;
 
background-color: #fc7;
 
}
 
}
  
−
tbody tr.even {
+
#large tbody tr.even {
 
background-color: #fea
 
background-color: #fea
 
}
 
}
  
−
tr a {
+
#large tr a {
 
color: rgb(102, 102, 102);
 
color: rgb(102, 102, 102);
 
text-decoration: none;
 
text-decoration: none;
 
}
 
}
−
tr a:hover {
+
#large tr a:hover {
 
text-decoration: underline;
 
text-decoration: underline;
 
}
 
}
  
−
dl dd {
+
#large dl dd {
 
margin-left: 10px;
 
margin-left: 10px;
 
}
 
}
  
−
dl dt {
+
#large dl dt {
 
font-weight: bold;
 
font-weight: bold;
 
}
 
}
  
−
dl {
+
#large dl {
 
border: 1px solid black;
 
border: 1px solid black;
 
margin: 5px;
 
margin: 5px;
−
}
 
−
 
−
.highlight {
 
−
border: 5px dotted #eee;
 
−
}
 
−
 
−
.error {
 
−
background-color: #fee;
 
 
}
 
}
  
Line 134: Line 54:
  
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
−
<script src="http://tablesorter.com/jquery.tablesorter.js"></script>
+
<script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.js"></script>
  
−
<script type="text/javascript"  
+
 
 +
<script type="text/javascript">
 
$(document).ready(function() {
 
$(document).ready(function() {
  
Line 150: Line 71:
 
</script>
 
</script>
  
 +
<h3>jQuery Tablekit</h3>
 +
<br />
  
−
 
+
Click headers to sort
−
<h5>jQuery Tablekit</h5>
 
−
 
 
−
 
 
−
 
 
−
<!-- tablecode taken from tablesorter examples -->
 
−
 
 
−
 
 
  
 
<table id="large" cellspacing="0">
 
<table id="large" cellspacing="0">
Line 175: Line 91:
  
 
<th>Ip</th>
 
<th>Ip</th>
−
 
−
 
  
 
<th>Url</th>
 
<th>Url</th>
Line 193: Line 107:
  
 
<tr>
 
<tr>
−
 
−
 
  
 
<td>devo@flexomat.com</td>
 
<td>devo@flexomat.com</td>
Line 205: Line 117:
  
 
<td>172.78.200.124</td>
 
<td>172.78.200.124</td>
−
 
−
 
  
 
<td>http://gmail.com</td>
 
<td>http://gmail.com</td>
−
 
−
 
  
 
<td>15:10</td>
 
<td>15:10</td>
Line 219: Line 127:
  
 
</tr>
 
</tr>
−
 
−
 
 
−
 
 
<tr>
 
<tr>
−
 
 
<td>henry@mountdev.net</td>
 
<td>henry@mountdev.net</td>
−
 
−
 
  
 
<td>35889</td>
 
<td>35889</td>
Line 239: Line 141:
  
 
<td>3:54</td>
 
<td>3:54</td>
−
 
−
 
  
 
<td>1974/1/19</td>
 
<td>1974/1/19</td>
Line 247: Line 147:
  
 
</tr>
 
</tr>
−
 
−
 
 
  
 
<tr>
 
<tr>
Line 255: Line 153:
  
 
<td>60021</td>
 
<td>60021</td>
−
 
−
 
  
 
<td>941-964-5617</td>
 
<td>941-964-5617</td>
−
 
−
 
  
 
<td>$2743.41</td>
 
<td>$2743.41</td>
Line 271: Line 165:
  
 
<td>2000/3/25</td>
 
<td>2000/3/25</td>
−
 
−
 
  
 
<td>25/3/2000</td>
 
<td>25/3/2000</td>
−
 
−
 
  
 
</tr>
 
</tr>
−
 
−
 
 
  
 
<tr>
 
<tr>
Line 289: Line 177:
  
 
<td>941-964-9511</td>
 
<td>941-964-9511</td>
−
 
−
 
  
 
<td>$2998.18</td>
 
<td>$2998.18</td>
  
 
<td>210.214.231.182</td>
 
<td>210.214.231.182</td>
−
 
−
 
  
 
<td>http://google.se</td>
 
<td>http://google.se</td>
Line 305: Line 189:
  
 
<td>24/1/1993</td>
 
<td>24/1/1993</td>
−
 
−
 
  
 
</tr>
 
</tr>
−
 
−
 
 
  
 
<tr>
 
<tr>
  
 
<td>muffins@reno.gov</td>
 
<td>muffins@reno.gov</td>
−
 
−
 
  
 
<td>76375</td>
 
<td>76375</td>
Line 323: Line 201:
  
 
<td>$1836.09</td>
 
<td>$1836.09</td>
−
 
−
 
  
 
<td>220.222.93.171</td>
 
<td>220.222.93.171</td>
Line 331: Line 207:
  
 
<td>15:22</td>
 
<td>15:22</td>
−
 
−
 
  
 
<td>1988/4/4</td>
 
<td>1988/4/4</td>
Line 339: Line 213:
  
 
</tr>
 
</tr>
−
 
−
 
−
 
−
 
 
  
 
<tr>
 
<tr>
Line 351: Line 221:
  
 
<td>941-964-2575</td>
 
<td>941-964-2575</td>
−
 
  
  
Line 357: Line 226:
  
 
<td>228.170.245.253</td>
 
<td>228.170.245.253</td>
−
 
−
 
  
 
<td>http://flexomat.com</td>
 
<td>http://flexomat.com</td>
Line 368: Line 235:
 
<td>12/12/1975</td>
 
<td>12/12/1975</td>
  
 +
</tr>
  
 +
  </tbody>
  
−
</tr>
+
</table>
  
−
 
 
  
−
  </tbody>
 
  
−
</table>
 
  
 
</html>
 
</html>

Latest revision as of 02:34, 1 November 2010

jQuery Tablekit


Click headers to sort

Email Id Phone Total Ip Url Time ISO Date UK Date
devo@flexomat.com 66672 941-964-8535 $2482.79 172.78.200.124 http://gmail.com 15:10 1988/12/14 14/12/1988
henry@mountdev.net 35889 941-964-9543 $2776.09 119.232.182.142 http://www.gmail.com 3:54 1974/1/19 19/1/1974
christian@reno.gov 60021 941-964-5617 $2743.41 167.209.64.181 http://www.dotnet.ca 10:58 2000/3/25 25/3/2000
muffins@donuts.com 17927 941-964-9511 $2998.18 210.214.231.182 http://google.se 21:22 1993/1/24 24/1/1993
muffins@reno.gov 76375 941-964-2757 $1836.09 220.222.93.171 http://www.samba.org 15:22 1988/4/4 4/4/1988
mendez@gmail.com 45834 941-964-2575 $2805.46 228.170.245.253 http://flexomat.com 11:31 1975/12/12 12/12/1975

Retrieved from "https://organicdesign.nz/wiki/index.php?title=JQuery_General_Examples&oldid=99282"