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">
  
border:1px solid #666666;
+
#large p { margin: 10px 0; }
margin:20px 0 !important;
 
  
table {
+
li { margin-left: 10px; }
border:1px solid #666666;
+
 
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:#FFCC00;
+
#large th:hover {
 +
background-color: #fc7;
 
}
 
}
screen.css (line 100)
+
 
th, td {
+
#large tbody tr.even {
padding:2px 4px !important;
+
background-color: #fea
text-align:left;
 
vertical-align:top;
 
 
}
 
}
 +
 +
#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
<h5>jQuery Tablekit</h5>
 
 
 
 
 
 
 
<!-- tablecode taken from tablesorter examples -->
 
 
 
 
 
  
 
<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>
  
</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