Bug Tracker

Ticket #6561: contains-selectors.htm

File contains-selectors.htm, 5.0 KB (added by Motty, 10 years ago)
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html><head>
3 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE6" />
4 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
5<style type="text/css">
6body {background: #fff; color: #000;}
7
8td.tar { text-align: right; }
9input { background: #eee; color: #000; width: 60px; }
10
11table, td, th { border: #333 1px solid; border-collapse: collapse; padding: 3px; }
12#demo td { height: 75px; width: 75px; vertical-align: top; }
13span.date { text-align: right; display: block; }
14</style>
15</head><body>
16
17<h2>jQuery Selectors</h2>
18<table id="setup">
19 <tr>
20  <th>Target</th>
21  <th>Selector</th>
22  <th>Case</th>
23  <th colspan=2>Style</th>
24 </tr>
25 <tr>
26  <td class="tar">
27   <select class="sc0">
28    <option value="td" selected>td</option>
29    <option value=".date">.date</option>
30    <option value=".event">.event</option>
31   </select>
32  </td>
33  <td>:contains( <input class="sc1" type="text" style="width:100px" value="2" title="case sensitive" /> )</td>
34  <td>Sensitive</td>
35  <td>Background</td>
36  <td><input class="sc2" type="text" value="#EB7"></td>
37 </tr>
38 <tr>
39  <td class="tar">
40   <select class="ex0">
41    <option value="td">td</option>
42    <option value=".date" selected>.date</option>
43    <option value=".event">.event</option>
44   </select>
45  </td>
46  <td>:containsExact( <input class="ex1" type="text" style="width:100px" value="3" /> )</td>
47  <td>Insensitive</td>
48  <td>Text Color</td>
49  <td><input class="ex2" type="text" value="#F00"></td>
50 </tr>
51 <tr>
52  <td class="tar">
53   <select class="ec0">
54    <option value="td">td</option>
55    <option value=".date">.date</option>
56    <option value=".event" selected>.event</option>
57   </select>
58  </td>
59  <td>:containsExactCase( <input class="ec1" type="text" style="width:100px" value="Vacation" title="case sensitive" /> )&nbsp;</td>
60  <td>Sensitive</td>
61  <td>Border</td>
62  <td><input class="ec2" type="text" value="#00F"></td>
63 </tr>
64</table>
65<br>
66Basic Table Cell: &lt;td&gt;&lt;span class="date"&gt;#&lt;/span&gt;&lt;span class="event"&gt;Event&lt;/span&gt;&lt;/td&gt;<br>
67<br>
68<button>Update</button>
69<br><br>
70
71 <table id="demo">
72  <tr>
73   <td><span class="date">1</span></td>
74   <td><span class="date">2</span></td>
75   <td><span class="date">3</span></td>
76   <td><span class="date">4</span></td>
77   <td><span class="date">5</span></td>
78   <td><span class="date">6</span></td>
79   <td><span class="date">7</span></td>
80  <tr>
81  <tr>
82   <td><span class="date">8</span></td>
83   <td><span class="date">9</span><span class="event">Event day #1</span></td>
84   <td><span class="date">10</span><span class="event">Event day #2</span></td>
85   <td><span class="date">11</span><span class="event">Event day #3</span></td>
86   <td><span class="date">12</span><span class="event">Event</span></td>
87   <td><span class="date">13</span></td>
88   <td><span class="date">14</span></td>
89  <tr>
90  <tr>
91   <td><span class="date">15</span></td>
92   <td><span class="date">16</span><span class="event">Vacation</span></td>
93   <td><span class="date">17</span><span class="event">vacation</span></td>
94   <td><span class="date">18</span></td>
95   <td><span class="date">19</span></td>
96   <td><span class="date">20</span></td>
97   <td><span class="date">21</span></td>
98  <tr>
99  <tr>
100   <td><span class="date">22</span></td>
101   <td><span class="date">23</span></td>
102   <td><span class="date">24</span></td>
103   <td><span class="date">25</span></td>
104   <td><span class="date">26</span></td>
105   <td><span class="date">27</span></td>
106   <td><span class="date">28</span></td>
107  <tr>
108  <tr>
109   <td><span class="date">29</span></td>
110   <td><span class="date">30</span></td>
111   <td><span class="date">31</span></td>
112   <td></td>
113   <td></td>
114   <td></td>
115   <td></td>
116  <tr>
117 </table>
118
119<script type="text/javascript">
120// Two new selectors: http://dev.jquery.com/ticket/6561
121$.extend($.expr[':'],{
122 containsExact: function(a,i,m){
123  return $.trim($(a).text().toLowerCase()) === m[3].toLowerCase();
124 },
125 containsExactCase: function(a,i,m){
126  return $.trim($(a).text()) === m[3];
127 }
128});
129
130// Set up page
131$(document).ready(function(){
132 process();
133 $(':button').click(function(){
134        reset();
135  process();
136 })
137})
138
139// process inputs
140function process(){
141 $('#demo')
142  .find( $('.sc0').val() + ':contains(' + $('.sc1').val() + ')').css('background', $('.sc2').val() ).end()
143  .find( $('.ec0').val() + ':containsExactCase(' + $('.ec1').val() + ')').css( 'border', $('.ec2').val() + ' 2px solid' ).end()
144  .find( $('.ex0').val() + ':containsExact(' + $('.ex1').val() + ')').css({ color : $('.ex2').val() , 'font-weight' : 'bold' });
145}
146// reset changes
147function reset(){
148 $('#demo')
149  .find('td, .event, .date').css({
150   background : 'transparent',
151   border     : 'transparent 0px solid',
152   color      : $('body').css('color') ,
153   fontWeight : 'normal'
154  }).end()
155  .find('td').css({
156   border : '#000 1px solid'
157  });
158}
159</script>
160
161</body></html>