Difference between revisions of "JQuery General Examples"
From Organic Design wiki
m |
m |
||
| (10 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
<style type="text/css"> | <style type="text/css"> | ||
| − | + | #large p { margin: 10px 0; } | |
| − | margin: | ||
| − | + | li { margin-left: 10px; } | |
| − | border:1px solid # | + | |
| − | margin:20px 0 !important; | + | #large { |
| + | border: 1px solid #666; | ||
| + | margin: 20px 0 20px 0 !important; | ||
| + | } | ||
| + | |||
| + | #large th, #large td { | ||
| + | padding: 2px 4px 2px 4px !important; | ||
| + | text-align: left; | ||
| + | vertical-align: top; | ||
| + | } | ||
| + | |||
| + | #large th { | ||
| + | background-color: #fc0; | ||
} | } | ||
| − | th { | + | |
| − | background-color:# | + | #large th:hover { |
| + | background-color: #fc7; | ||
} | } | ||
| − | + | ||
| − | + | #large tbody tr.even { | |
| − | + | background-color: #fea | |
| − | |||
| − | |||
} | } | ||
| + | |||
| + | #large tr a { | ||
| + | color: rgb(102, 102, 102); | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | #large tr a:hover { | ||
| + | text-decoration: underline; | ||
| + | } | ||
| + | |||
| + | #large dl dd { | ||
| + | margin-left: 10px; | ||
| + | } | ||
| + | |||
| + | #large dl dt { | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | |||
| + | #large dl { | ||
| + | border: 1px solid black; | ||
| + | margin: 5px; | ||
| + | } | ||
| + | |||
</style> | </style> | ||
<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 38: | Line 71: | ||
</script> | </script> | ||
| + | <h3>jQuery Tablekit</h3> | ||
| + | <br /> | ||
| − | + | Click headers to sort | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<table id="large" cellspacing="0"> | <table id="large" cellspacing="0"> | ||
| Line 63: | Line 91: | ||
<th>Ip</th> | <th>Ip</th> | ||
| − | |||
| − | |||
<th>Url</th> | <th>Url</th> | ||
| Line 81: | Line 107: | ||
<tr> | <tr> | ||
| − | |||
| − | |||
<td>devo@flexomat.com</td> | <td>devo@flexomat.com</td> | ||
| Line 93: | 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 107: | Line 127: | ||
</tr> | </tr> | ||
| − | |||
| − | |||
| − | |||
<tr> | <tr> | ||
| − | |||
<td>henry@mountdev.net</td> | <td>henry@mountdev.net</td> | ||
| − | |||
| − | |||
<td>35889</td> | <td>35889</td> | ||
| Line 127: | Line 141: | ||
<td>3:54</td> | <td>3:54</td> | ||
| − | |||
| − | |||
<td>1974/1/19</td> | <td>1974/1/19</td> | ||
| Line 135: | Line 147: | ||
</tr> | </tr> | ||
| − | |||
| − | |||
<tr> | <tr> | ||
| Line 143: | 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 159: | 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 177: | 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 193: | 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 211: | Line 201: | ||
<td>$1836.09</td> | <td>$1836.09</td> | ||
| − | |||
| − | |||
<td>220.222.93.171</td> | <td>220.222.93.171</td> | ||
| Line 219: | Line 207: | ||
<td>15:22</td> | <td>15:22</td> | ||
| − | |||
| − | |||
<td>1988/4/4</td> | <td>1988/4/4</td> | ||
| Line 227: | Line 213: | ||
</tr> | </tr> | ||
| − | |||
| − | |||
| − | |||
| − | |||
<tr> | <tr> | ||
| Line 239: | Line 221: | ||
<td>941-964-2575</td> | <td>941-964-2575</td> | ||
| − | |||
| Line 245: | 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 256: | Line 235: | ||
<td>12/12/1975</td> | <td>12/12/1975</td> | ||
| + | </tr> | ||
| + | </tbody> | ||
| − | + | </table> | |
| − | |||
| − | |||
| − | |||
</html> | </html> | ||
Latest revision as of 02:34, 1 November 2010
jQuery Tablekit
Click headers to sort
| 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 |
