├── LICENSE.txt
├── README.md
├── images
    ├── select_arrow.gif
    ├── select_arrow_bg.gif
    └── select_arrow_bg_hover.gif
├── index.html
├── jquery.sb.css
├── jquery.sb.js
├── jquery.sb.min.js
└── lib
    └── jquerytie
        ├── LICENSE.txt
        ├── README.md
        ├── index.html
        ├── jquery.tie.js
        └── jquery.tie.min.js


/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2010 RevSystems, Inc
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 | 
13 | The end-user documentation included with the redistribution, if any, must 
14 | include the following acknowledgment: "This product includes software developed 
15 | by RevSystems, Inc (http://www.revsystems.com/) and its contributors", in the 
16 | same place and form as other third-party acknowledgments. Alternately, this 
17 | acknowledgment may appear in the software itself, in the same form and location 
18 | as other such third-party acknowledgments.
19 | 
20 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
21 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
22 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
23 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
24 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
25 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
26 | THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # jQuery-SelectBox
  2 | 
  3 |   Traditional select elements are very difficult to style by themselves, 
  4 |   but they are also very usable and feature rich. This plugin attempts to 
  5 |   recreate all selectbox functionality and appearance while adding 
  6 |   animation and stylability.
  7 |   
  8 |   Please feel free to rate this plugin on [plugins.jquery.com](http://plugins.jquery.com/project/jquery-sb).
  9 | 
 10 | # Demo
 11 | 
 12 |   You can view the selectboxes in action [here](http://dl.dropbox.com/u/124192/websites/selectbox/index.html).
 13 |   
 14 | # TODO
 15 | 
 16 |   * Test ARIA markup
 17 |   * Create optional skins
 18 | 
 19 | # Features
 20 | 
 21 |   * Recreates and extends all functionality of the browser's built-in `<select>` element
 22 |   * Fully stylable and flexible with standard, valid markup
 23 |   * Compliant with ARIA guidelines and best practices
 24 |   * Original select is updated behind-the-scenes
 25 |   * Change event handlers on original `<select>` still work
 26 |   * Keyboard Accessible: Manages tab focus, supports up/down/home/end hotkeys and automatic matching of typed strings
 27 |   * Javascript animations on close/open
 28 |   * Intelligent collision avoidance (the selectbox tries to fit on the screen)
 29 |   * Deals effectively with cross-browser z-index issues
 30 |   * Handles optgroups
 31 |   * Handles disabled selects
 32 |   * Handles disabled optgroups
 33 |   * Handles disabled options
 34 |   * Can be refreshed arbitrarily, i.e. when you dynamically add/remove options from the original select
 35 |   * Options for a specific `<select>` can be changed on the fly
 36 |   * Can be set to refresh automatically, using [jquery.tie](https://github.com/revsystems/jQuery-Tie), when the underlying `<select>` changes
 37 |   * Allows custom markup formatting for visible elements
 38 | 
 39 |   The css in this plugin also includes an example custom style called "round_sb".
 40 |   Its purposes are (a) to give you an example of how to override the default style, 
 41 |   and (b) to give you a familiar but slightly more modern version of the selectbox 
 42 |   that you can integrate with minimal or no css modification.
 43 | 
 44 | # Compatibility
 45 | 
 46 |   jQuery-SelectBox has been tested and confirmed working in the following browsers:
 47 |   
 48 |   * Firefox 3.6.12
 49 |   * Google Chrome 7.0.517.44
 50 |   * Opera 11.00 build 1156
 51 |   * IE9 beta
 52 |   * IE8 (via IE9 beta)
 53 |   * IE7 (via IE9 beta)
 54 |   
 55 |   It requires [jQuery version 1.3.x](http://jquery.com) and up.
 56 |   
 57 |   IE6 and below are ignored by jQuery-SelectBox.
 58 | 
 59 | # Usage
 60 | 
 61 | Requires [jQuery](http://jquery.com) and this plugin.
 62 | 
 63 |     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 64 |     <script type="text/javascript" src="jquery.sb.js"></script>
 65 |     
 66 | If you want to use dynamic selects with [jquery.tie](https://github.com/revsystems/jQuery-Tie), you need to include it before jquery.sb:
 67 | 
 68 |     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 69 |     <script type="text/javascript" src="jquery.tie.js"></script>
 70 |     <script type="text/javascript" src="jquery.sb.js"></script>
 71 | 
 72 | There is also css. You can feel free to copy this css to your master file or include it separately.
 73 | 
 74 |     <link rel="stylesheet" href="jquery.sb.css" type="text/css" media="all" />
 75 | 
 76 | To apply the plugin to select elements:
 77 | 
 78 |     $(document).ready(function() {
 79 |       $("select").sb();
 80 |     });
 81 | 
 82 | To apply with options set:
 83 | 
 84 |     $(document).ready(function() {
 85 |       $("select").sb({
 86 |         animDuration: 1000,
 87 |         fixedWidth: true,
 88 |         etc...
 89 |       });
 90 |     });
 91 | 
 92 | If you've used javascript to modify the contents of the original select, and you want the changes to appear in the replacement, calling "refresh" should match them:
 93 | 
 94 |     $(document).ready(function() {
 95 |       $("select").sb();
 96 |       $("select").append("<option>Hey! I'm new!</option>");
 97 |       $("select").sb("refresh");
 98 |     });
 99 |     
100 | Alternatively, if you don't have control over the function that triggers the reload--for example, if you're using an AJAX framework--you can use 
101 | [jquery.tie](https://github.com/revsystems/jQuery-Tie) to monitor the contents of the original select and update when necessary:
102 | 
103 |     $(document).ready(function() {
104 |       $("select").sb({ useTie: true });
105 |       $("select").append("<option>Hey! I'm new!</option>");
106 |     });
107 |     
108 | Refreshing can be done at any time, even while the SelectBox is open.
109 | 
110 | You can also change the options for a SelectBox on the fly:
111 | 
112 |     // this initializes all s
113 |     $("select").sb()
114 |     
115 |     // and this sets a specific set to use fixedWidth styling:
116 |     $("select.fixed_width").sb("options", { fixedWidth: true });
117 | 
118 | # Custom Styling
119 | 
120 | ## Making a fixed width selectbox
121 | 
122 | Say you want to make your selectboxes a fixed width so they line up with the rest of your inputs. Try something like this.
123 | 
124 | When you initialize jQuery-sb, use the fixedWidth flag:
125 | 
126 |     $(document).ready(function() {
127 |       $("select.fixed_width").sb({ fixedWidth: true });
128 |     });
129 |     
130 | In your css, you can add the following to make a selectbox with visual width = 100px:
131 | 
132 |     .selectbox.fixed_width .display{
133 |       width:73px;
134 |       padding:0 24px 0 3px; /* remember padding contributes to the overall width. padding-right is large enough here for the arrow graphic. */
135 |     }
136 |     .selectbox.fixed_width.items{
137 |       width:100px; /* width of display text plus the padding (73 + 27) = 100, so they line up */
138 |     }
139 | 
140 | # Options
141 |   
142 |   View defaults and short descriptions for options in jquery.sb.js. This list is meant to be more 
143 |   informative than the js comments.
144 |  
145 |   **acTimeout** (duration)
146 |     
147 |     Short for "Autocomplete Timeout". When a selectbox is highlighted, you can type to select a 
148 |     matching option. This timeout specifies how long the user has after each keystroke to concatenate 
149 |     another letter onto the search string. If there is no keystroke before the timeout is completed, 
150 |     the search string is reset.
151 | 
152 |   **animDuration** (duration)
153 |   
154 |       Short for "Animation Duration". The time it takes for the closing/opening dropdown animation to play.
155 |   
156 |   **arrowMarkup** (string)
157 |   
158 |       The HTML that is appended to the display. Usually it's an arrow, but it could be whatever you want.
159 |       
160 |   **optionFormat** (function)
161 |       
162 |       Given an option as the context, returns a string or DOM/jQuery object that will be displayed in the dropdown.
163 |       The default is simply to use the option's text.
164 |       
165 |   **displayFormat** (function)
166 |       
167 |       Given an option as the context, returns a string or DOM/jQuery object that will be displayed in 
168 |       the "display"--the portion of the selectbox that is always visible. If not specified, it will default to 
169 |       the value of optionFormat.
170 |       
171 |   **optgroupFormat** (function)
172 |       
173 |       Given an optgroup as the context, returns a string that will be displayed in the dropdown. The 
174 |       default displays the optgroup's label attribute.
175 |       
176 |   **ddCtx** (selector / DOM Element / function that returns a selector)
177 |   
178 |       Short for "Dropdown Context". When the dropdown is displayed, its markup is appended to the bottom 
179 |       of this context. This helps take care of any z-index issues that IE might have. If you are using 
180 |       popups or overlays on your page, the default of "body" might not be appropriate and you can set 
181 |       something more specific. When not using the default, the ddCtx element should have position:relative 
182 |       or position:absolute in its CSS. Otherwise, the dropdown will not appear in the right place.
183 |       
184 |   **dropupThreshold** (integer)
185 |       
186 |       When determining whether to display a dropdown or a dropup, this value is used to weight the comparison.
187 |       The space above is compared to the space below the selectbox. If the dropupThreshold is positive, then 
188 |       the space above must be that many more pixels than the space below to show above. If the dropupThreshold 
189 |       is negative, then the space below must be that many more pixels than the space above to show below.
190 | 
191 |   **fixedWidth**  (boolean)
192 | 
193 |       False by default.
194 |       If set to FALSE, the width of the select will be variable, conforming to the longest dropdown value.
195 |       If set to TRUE, the width should be specified from the site's css.
196 | 
197 |   **maxHeight** (false / positive integer)
198 |   
199 |       Allows you to set the maximum pixel height of the dropdown. By default, the maximum height varies 
200 |       based on the position of the dropdown relative to the window.
201 | 
202 |   **maxWidth** (false / positive integer)
203 | 
204 |       Allows you to set the maximum pixel width of the selectbox. By default, the width varies based on the 
205 |       widest dropdown element. If white-space:nowrap is set on dropdown elements, then they will be clipped 
206 |       past the maxWidth.
207 | 
208 |   **selectboxClass** (string)
209 | 
210 |       The class used to identify selectboxes. This is used to kill inactive dropdowns when one is selected.
211 |       
212 |   **useTie** (boolean)
213 |       
214 |       Default is false. When set to true and jquery.tie is 
215 |       included on the page, this will automatically monitor changes in the underlying select and update 
216 |       jquery-sb accordingly.
217 | 
218 |       
219 | # Troubleshooting
220 | 
221 | ## jQuery-SelectBox in div with z-index
222 |   
223 | If you call $("select").sb() (no special options) on a select in a z-index'ed element, the dropdown 
224 | may appear UNDERNEATH the element.
225 | 
226 | You have two options in dealing with this scenario. The first is setting ddCtx to the absolutely 
227 | positioned element. This will make sure that it always appears on top of it. Or you can modify the 
228 | css for .items to have a z-index greater than the parent div.
229 | 
230 | For newer versions, I set the default z-index of .items to 99999, so you probably won't see this issue 
231 | unless you're using huge z-index values.
232 | 
233 | 
234 | ## margin:auto on body
235 | 
236 | Across different browsers and jQuery versions, it is very difficult to get a stanard margin value for the 
237 | body when it is set to "auto".
238 | 
239 | If you have margin-left set to auto for your body element, jQuery-SelectBox will completely break in IE7. 
240 | In other browsers, it may or may not position incorrectly.
241 | 
242 | If you need to center your page, I highly recommend not doing it with the `body` tag. The implementation 
243 | is too finicky. Instead, I often use the following pattern.
244 | 
245 | In your css file:
246 | 
247 |     body{margin:0;}
248 |     .outer_container{
249 |       text-align:center; /* text-align centers the child div in old versions of IE */
250 |     } 
251 |     .inner_container{
252 |       margin:0 auto; /* margin:auto centers in newer browsers */
253 |       text-align:left; /* text-align:left resets the sub-elements */
254 |       width:960px; /* the width of your page */
255 |     } 
256 | 
257 | In your HTML:
258 | 
259 |     <div class="outer_container">
260 |       <div class="inner_container">
261 |         Everything in here will be centered
262 |       </div>
263 |     </div>
264 |     
265 | If you use this pattern, you should have no issues with margin:auto on `body`.
266 | 
267 | 
268 | ## I need to keep margin:auto on my body tag. How do I get jQuery-SelectBox to behave?
269 | 
270 | If you're stuck with margin:auto on the `body` element, then I suggest specifying the ddCtx option.
271 | The ddCtx (dropdown context) option lets you change which element the dropdown is appended to, thereby 
272 | avoiding dependence on the body tag's margin.
273 | 
274 | For example, you might have this fragment in your markup:
275 | 
276 |     <body>
277 |       <div id="an_arbitrary_container">
278 |         <select>
279 |           <option>An Option</option>
280 |         </select>
281 |       </div>
282 |     </body>
283 | 
284 | In which case, you'd want the following CSS:
285 | 
286 |     #an_arbitrary_container{position:relative;}
287 | 
288 | And to specify ddCtx when you initialize jQuery-SelectBox:
289 | 
290 |     $("select").sb({ ddCtx: "#an_arbitrary_container" });
291 |     
292 | The downside to this method is that, if z-index comes into play, the dropdown might appear BEHIND siblings of 
293 | `#an_arbitrary_container`--due to the buggy z-index handling in IE7. Consider yourself warned. You can manipulate 
294 | the z-indexes in CSS so it works, but it's advanced.
295 |   
296 | 
297 | ## IE7/IE8: Javascript error is thrown when clicking to open the selectbox
298 |     
299 | See "margin:auto on body" above. If that is not the problem, please let me know on the
300 | [Issues Page](https://github.com/revsystems/jQuery-SelectBox/issues).
301 | 
302 | 
303 | # Bug Reports
304 | 
305 |   Before you report a bug, I highly suggest making sure you have the most up-to-date version of 
306 |   jQuery-SelectBox. I update the code very frequently and may introduce/squash bugs in rapid succession. This 
307 |   will continue until an official release is announced, at which point a stable download will be created and a new 
308 |   development branch will be started.
309 |   
310 |   If you spot a bug that's lingering, please let me know on the
311 |   [jQuery-SelectBox Github Issues page](https://github.com/revsystems/jQuery-SelectBox/issues).


--------------------------------------------------------------------------------
/images/select_arrow.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/revsystems/jQuery-SelectBox/2a7b208f5bbda93d386e856f98a5bf330a687cca/images/select_arrow.gif


--------------------------------------------------------------------------------
/images/select_arrow_bg.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/revsystems/jQuery-SelectBox/2a7b208f5bbda93d386e856f98a5bf330a687cca/images/select_arrow_bg.gif


--------------------------------------------------------------------------------
/images/select_arrow_bg_hover.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/revsystems/jQuery-SelectBox/2a7b208f5bbda93d386e856f98a5bf330a687cca/images/select_arrow_bg_hover.gif


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 | 
  3 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4 | <head>
  5 |   <meta http-equiv="content-type"  content="text/html;charset=UTF-8" />
  6 |   <title>Selectbox Replacment Demo</title>
  7 |   <link rel="stylesheet" href="jquery.sb.css" type="text/css" media="all" />
  8 |   <style type="text/css">
  9 |     body{font-size:13px;margin:8px;}
 10 |     .outer_container{text-align:center;}
 11 |     .inner_container{margin:0 auto;text-align:left;width:960px;}
 12 |   </style>
 13 |   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 14 |   <script type="text/javascript" src="lib/jquerytie/jquery.tie.js"></script>
 15 |   <script type="text/javascript" src="jquery.sb.js"></script>
 16 |   <script type="text/javascript">
 17 |     $(document).ready(function() {
 18 |       $("[name=example], [name=example2], [name=example3], [name=example4], [name=example6], [name=os0], [name=example7]").sb({ ddCtx: function() { return $(this).closest("form"); } });
 19 |       $("select[name=example]").append("<option value='8'>New Option</option>").sb("refresh");
 20 |       
 21 |       // dynamic examples
 22 |       $("[name=example5]").sb({ useTie: true });
 23 |       $("[name=example5]").append("<option>dynamically added</option>");
 24 |       $("[name=example5]").append("<option>and this one</option>");
 25 |       setTimeout(function() {
 26 |         $("[name=example5]").append("<option>this one is appended 5 seconds after load</option>");
 27 |       }, 5000);
 28 |       setTimeout(function() {
 29 |         $("[name=example5]").empty().append("<option>10 seconds later, we remove stuff and add this one.</option><option>5 seconds later, the one above will be disabled</option>");
 30 |       }, 10000);
 31 |       setTimeout(function() {
 32 |         $("[name=example5] option:first").attr("disabled", "disabled");
 33 |       }, 15000);
 34 |       
 35 |       
 36 |       $("select[name=example6]").sb({
 37 |         displayFormat: function() {
 38 |           if($(this).attr("label")) {
 39 |             return $("<div>").append($($(this).attr("label")).filter("strong")).html();
 40 |           }
 41 |           return $(this).text();
 42 |         }
 43 |       });
 44 |       $("[name=example8], [name=example9]").sb({
 45 |         fixedWidth: true
 46 |       });
 47 |       
 48 |       $("[name=custom_markup_example]").sb({
 49 |         optionFormat: function() {
 50 |             return $(this).attr("alt");
 51 |         }
 52 |       });
 53 |     });
 54 |   </script>
 55 | </head>
 56 | <body>
 57 |   
 58 |   <div class="outer_container">
 59 |     <div class="inner_container" style="position:relative;">
 60 |       <form action=".">
 61 |         <div>
 62 |           <br/>
 63 |           <br/>
 64 |           <br/>
 65 |           <br/>
 66 |           <br/>
 67 |           <br/>
 68 |           <br/>
 69 |           <br/>
 70 |           <br/>
 71 |           <br/>
 72 |           <br/>
 73 |           <br/>
 74 |           <br/>
 75 |           <br/>
 76 |           <br/>
 77 |           <br/>
 78 |           <h1 style="margin-top:0;">jquery.sb.js Selectbox Replacement</h1>
 79 | 
 80 |           <h1>Demos</h1>
 81 |           <div>
 82 |             <select name="example2" class="round_sb" disabled="disabled">
 83 |               <option>CT</option>
 84 |               <option>DE</option>
 85 |               <option>MA</option>
 86 |               <option selected="selected">Disabled</option>
 87 |               <option>NY</option>
 88 |               <option>PA</option>
 89 |             </select>
 90 |             <select name="example" class="round_sb">
 91 |               <option class="exampleOptionClass">Long dropdown test</option>
 92 |               <option>Long dropdown test</option>
 93 |               <optgroup label="Group 1">
 94 |                 <option>Blah</option>
 95 |                 <option>Rumor</option>
 96 |               </optgroup>
 97 |               <option>Long dropdown test</option>
 98 |               <option>Long dropdown test</option>
 99 |               <optgroup label="Group 2 long name long name">
100 |                 <option disabled="disabled">Lorem ipsum</option>
101 |                 <option>Whatever Whatever...</option>
102 |               </optgroup>
103 |               <option>Long dropdown test</option>
104 |               <option>Long dropdown test</option>
105 |               <option>Long dropdown test</option>
106 |               <option>Long dropdown test</option>
107 |               <option>Long dropdown test</option>
108 |               <option>Long dropdown test</option>
109 |               <option>Long dropdown test</option>
110 |               <option>Long dropdown test</option>
111 |               <option>Long dropdown test</option>
112 |               <option>Long dropdown test</option>
113 |               <option>Long dropdown test</option>
114 |               <option>Long dropdown test</option>
115 |               <option>Long dropdown test</option>
116 |               <option class="exampleOptionClass">Long dropdown test</option>
117 |               <option>Long dropdown test</option>
118 |               <optgroup label="Disabled optgroup" disabled="disabled">
119 |                   <option class="exampleOptionClass">Long dropdown test</option>
120 |                   <option class="exampleOptionClass">Long dropdown test</option>
121 |                   <option>Long dropdown test</option>
122 |                   <option class="exampleOptionClass">Long dropdown test</option>
123 |               </optgroup>
124 |               <option>Long dropdown test</option>
125 |               <option>Long dropdown test</option>
126 |               <option>Long dropdown test</option>
127 |               <option>Long dropdown test</option>
128 |               <option>Long dropdown test</option>
129 |               <option>Long dropdown test</option>
130 |               <option>Long dropdown test</option>
131 |               <option>Long dropdown test</option>
132 |               <option>Long dropdown test</option>
133 |               <option>Long dropdown test</option>
134 |               <option>Long dropdown test</option>
135 |               <option>Long dropdown test</option>
136 |               <option>Long dropdown test</option>
137 |               <option>Long dropdown test</option>
138 |               <option>Long dropdown test</option>
139 |               <option>Long dropdown test</option>
140 |               <option>Long dropdown test</option>
141 |               <option>Long dropdown test</option>
142 |               <option>Long dropdown test</option>
143 |               <option>Long dropdown test</option>
144 |               <option>Long dropdown test</option>
145 |               <option>Long dropdown test</option>
146 |               <option class="exampleOptionClass">Long dropdown test</option>
147 |             </select>
148 |             <input type="text" name="whatever" />
149 |           </div>
150 |           <select name="example3" class="round_sb">
151 |             <option>Test 1</option>
152 |             <option>Test 2</option>
153 |             <option>Test 3</option>
154 |             <option>Test 4</option>
155 |             <option disabled="disabled">Test 5</option>
156 |           </select><br/>
157 |           <label>State:
158 |             <select name="example4" class="round_sb">
159 |               <option>CT</option>
160 |               <option>DE</option>
161 |               <option>MA</option>
162 |               <option selected="selected">NJ</option>
163 |               <option>NY</option>
164 |               <option>PA</option>
165 |             </select>
166 |           </label><br/>
167 |           <label for="os0">Gift Certificate:</label>
168 |           <select name="os0" id="os0" class="round_sb">
169 |             <option value="Gift certificate 1 $50.00">Gift certificate 1 $50.00</option>
170 | 
171 |             <option value="Gift certificate 2 $80.00">Gift certificate 2 $80.00</option>
172 |             <option value="Gift certificate 3 $100.00">Gift certificate 3 $100.00</option>
173 |             <option value="Gift certificate 4 $150.00">Gift certificate 4 $150.00</option>
174 |             <option value="Gift certificate 5 $200.00">Gift certificate 5 $200.00</option>
175 |             <option value="Gift certificate 6 $250.00">Gift certificate 6 $250.00</option>
176 |             <option value="Gift certificate 7 $300.00">Gift certificate 7 $300.00</option>
177 | 
178 |             <option value="Gift certificate 8 $350.00">Gift certificate 8 $350.00</option>
179 |             <option value="Gift certificate 9 $400.00">Gift certificate 9 $400.00</option>
180 |           </select>
181 |           <br/>
182 |           <select name="example5" class="round_sb">
183 |             <option>abc</option>
184 |             <option>def</option>
185 |           </select>
186 |           <br/>
187 |           <select name="example6" class="round_sb">
188 |             <option>internal HTML test</option>
189 |             <option label="<strong>ttt</strong><br/><address>This is my address</address>">bolded</option>
190 |           </select>
191 |           <br/>
192 |           <select name="example7" class="round_sb">
193 |           </select>
194 |           <br/>
195 |           <select name="example8" class="fixed_width">
196 |             <option>short</option>
197 |             <option>this option is longer</option>
198 |             <option>but neither has an effect on width</option>
199 |           </select>
200 |           <select name="example9" class="fixed_width2">
201 |             <option>short</option>
202 |             <option>this option is longer</option>
203 |             <option>this example has a different width for the dropdown</option>
204 |           </select>
205 |           <br/>
206 |           <br/>
207 |           <br/>
208 |           <label>Custom Markup Example
209 |               <select name="custom_markup_example">
210 |                 <option alt="<div><span style='background:red;display:inline-block;*display:inline;height:10px;width:10px;vertical-align:middle;zoom:1;'></span> line 1</div><div>line 2</div><div>line 3</div>">a</option>
211 |                 <option alt="<div>another option</div>">b</option>
212 |               </select>
213 |           </label>
214 |           <br/>
215 |           <br/>
216 |           <br/>
217 |           <br/>
218 |           <br/>
219 |           <br/>
220 |           <br/>
221 |           <br/>
222 |           <br/>
223 |           <br/>
224 |           <br/>
225 |           <br/>
226 |           <br/>
227 |           <br/>
228 |           <br/>
229 |           <br/>
230 |           <br/>
231 |           <br/>
232 |           <br/>
233 |           <br/>
234 |           <br/>
235 |           <br/>
236 |           <br/>
237 |         </div>
238 |       </form>
239 |     </div>
240 |   </div>
241 |   
242 | </body>
243 | </html>


--------------------------------------------------------------------------------
/jquery.sb.css:
--------------------------------------------------------------------------------
  1 | /* applied to original <select> to hide */
  2 | .has_sb{position:absolute;left:-999999em;text-indent:-999999em;}
  3 | 
  4 | /* always visible styles */
  5 | .selectbox{display:inline-block;*display:inline;font-family:arial;font-size:1em;margin:1px;position:relative;vertical-align:middle;zoom:1;}
  6 | .selectbox .display{
  7 |   background:#fff;
  8 |   border:1px solid #abadb3;
  9 |   color:#000;
 10 |   cursor:default;
 11 |   display:block;
 12 |   font-weight:normal;
 13 |   height:1.46em;
 14 |   line-height:1.46em;
 15 |   overflow:hidden;
 16 |   outline:none;
 17 |   padding:0 24px 0 3px;
 18 |   position:relative;
 19 |   text-decoration:none;
 20 |   overflow:hidden;
 21 | }
 22 | .selectbox.disabled .display{color:#999;}
 23 | .selectbox.focused .display .text{background-color:#3399ff;color:#fcfcfc;display:inline-block;*display:inline;zoom:1;}
 24 | .selectbox .display.active{border-color:#7b7d83;}
 25 | .selectbox .display .arrow_btn{
 26 |     background:#dbdbdb url(images/select_arrow_bg.gif) repeat-x left center;
 27 |     border:1px solid #707070;
 28 |     display:block;
 29 |     height:1.15em;
 30 |     line-height:.92em;
 31 |     padding:1px;
 32 |     position:absolute;
 33 |     right:0;
 34 |     text-align:center;
 35 |     top:0;
 36 |     width:1.08em;
 37 | }
 38 | .selectbox .display .arrow_btn .arrow{
 39 |     background:transparent url(images/select_arrow.gif) no-repeat center center;
 40 |     display:inline-block;*display:inline;
 41 |     height:4px;
 42 |     left:.33em;
 43 |     position:absolute;
 44 |     top:.5em;
 45 |     width:7px;
 46 |     zoom:1;
 47 | }
 48 | .selectbox .display.active .arrow_btn{
 49 |     -moz-box-shadow:inset 0 0 1px 1px #9eb0ba;
 50 |     -webkit-box-shadow:inset 0 0 1px 1px #9eb0ba;
 51 | }
 52 | .selectbox .display.hover .arrow_btn{background-image:url(images/select_arrow_bg_hover.gif);}
 53 | .selectbox .value{display:none;}
 54 | 
 55 | /* dropdown styles */
 56 | .selectbox.items{
 57 |   background:#fff;
 58 |   border:1px solid #828790;
 59 |   display:block;
 60 |   font-family:arial;
 61 |   font-size:1em;
 62 |   list-style-type:none;
 63 |   margin:0;
 64 |   overflow-x:hidden;
 65 |   overflow-y:auto;
 66 |   padding:0 0 1px 0;
 67 |   z-index:99999;
 68 |   -moz-box-shadow:0 3px 5px rgba(0,0,0,.5);
 69 |   -webkit-box-shadow:0 3px 5px rgba(0,0,0,.5);
 70 | }
 71 | .selectbox.items.above{}
 72 | .selectbox.items li{display:block;margin:0;padding:0;/*white-space:nowrap; maybe necessary if using fixedWidth: false */}
 73 | .selectbox.items li.first{margin-top:0;}
 74 | .selectbox.items li>.item{color:#000;cursor:default;display:block;padding:4px 6px;text-decoration:none;}
 75 | .selectbox.items li>.item>.text{display:inline-block;*display:inline;zoom:1;}
 76 | .selectbox.items li.selected>.item{border-bottom:1px dotted #999;border-top:1px dotted #999;}
 77 | .selectbox.items li.disabled>.item{color:#999;}
 78 | .selectbox.items li.hover>.item{background-color:#3399ff;color:#fcfcfc;}
 79 | .selectbox.items .value{display:none;}
 80 | 
 81 | /* optgroup styles */
 82 | .selectbox.items .optgroup .items{
 83 |   border:none;
 84 |   margin:0;
 85 |   padding:0;
 86 |   -moz-box-shadow:none;
 87 |   -webkit-box-shadow:none;
 88 | }
 89 | .selectbox.items .optgroup>.label{cursor:default;font-weight:bold;line-height:1em;}
 90 | .selectbox.items .optgroup .items li>.item{padding-left:1em;}
 91 | 
 92 | /* easy rounding styles */
 93 | .selectbox .round_sb.display{
 94 |   padding:2px 26px 2px 5px;
 95 |   border-radius:5px;
 96 |   -moz-border-radius:5px;
 97 |   -webkit-border-radius:5px;
 98 | }
 99 | .selectbox .round_sb.display .arrow_btn{
100 |   right:2px;
101 |   top:2px;
102 |   border-radius:3px;
103 |   -moz-border-radius:3px;
104 |   -webkit-border-radius:3px;
105 | }
106 | .selectbox.round_sb.items{
107 |   border-radius:5px;
108 |   -moz-border-radius:5px;
109 |   -webkit-border-radius:5px;
110 | }
111 | .selectbox.round_sb.items>li>a{padding:4px 6px;}
112 | .selectbox.round_sb.items>li.first>.item{
113 |   -moz-border-radius-topleft:5px;
114 |   -moz-border-radius-topright:5px;
115 |   -webkit-border-top-left-radius:5px;
116 |   -webkit-border-top-right-radius:5px;
117 | }
118 | .selectbox.round_sb.items>li.last>.item{
119 |   -moz-border-radius-bottomleft:5px;
120 |   -moz-border-radius-bottomright:5px;
121 |   -webkit-border-bottom-left-radius:5px;
122 |   -webkit-border-bottom-right-radius:5px;
123 | }
124 | /* for optgroups */
125 | .selectbox.round_sb.items>li>.label{line-height:2.08em;padding:4px 6px;}
126 | .selectbox.round_sb.items>li>.items li>.item{padding:4px 6px 4px 12px;}
127 | 
128 | /* fixed width example styles */
129 | .selectbox .display.fixed_width{
130 |   width:73px;
131 |   padding:0 24px 0 3px;
132 | }
133 | 
134 | .selectbox.fixed_width.items{
135 |   width:100px; /* width of display text plus the padding (60 + 27) = 87 */
136 | }
137 | 
138 | .selectbox .display.fixed_width2{
139 |   width:60px;
140 |   padding:0 24px 0 3px;
141 | }
142 | 
143 | .selectbox.fixed_width2.items{
144 |   width:300px; /* width of display text plus the padding (60 + 27) = 87 */
145 | }
146 | 


--------------------------------------------------------------------------------
/jquery.sb.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |     jQuery-SelectBox
  3 |     
  4 |     Traditional select elements are very difficult to style by themselves, 
  5 |     but they are also very usable and feature rich. This plugin attempts to 
  6 |     recreate all selectbox functionality and appearance while adding 
  7 |     animation and stylability.
  8 |     
  9 |     This product includes software developed 
 10 |     by RevSystems, Inc (http://www.revsystems.com/) and its contributors
 11 |     
 12 |     Please see the accompanying LICENSE.txt for licensing information.
 13 | */
 14 | 
 15 | (function( $, window, undefined ) {
 16 |     // utility functions
 17 |     $.fn.borderWidth = function() { return $(this).outerWidth() - $(this).innerWidth(); };
 18 |     $.fn.paddingWidth = function() { return $(this).innerWidth() - $(this).width(); };
 19 |     $.fn.extraWidth = function() { return $(this).outerWidth(true) - $(this).width(); };
 20 |     $.fn.offsetFrom = function( e ) {
 21 |         var $e = $(e);
 22 |         return {
 23 |             left: $(this).offset().left - $e.offset().left,
 24 |             top: $(this).offset().top - $e.offset().top
 25 |         };
 26 |     };
 27 |     $.fn.maxWidth = function() {
 28 |         var max = 0;
 29 |         $(this).each(function() {
 30 |             if($(this).width() > max) {
 31 |               max = $(this).width();
 32 |             }
 33 |         });
 34 |         return max;
 35 |     };
 36 |     $.fn.triggerAll = function(event, params) {
 37 |       return $(this).each(function() {
 38 |         $(this).triggerHandler(event, params);
 39 |       });
 40 |     };
 41 |     var aps = Array.prototype.slice,
 42 |         randInt = function() {
 43 |             return Math.floor(Math.random() * 999999999);
 44 |         };
 45 |     
 46 |     // jQuery-Proto
 47 |     $.proto = function() {
 48 |         var name = arguments[0],    // The name of the jQuery function that will be called
 49 |             clazz = arguments[1],   // A reference to the class that you are associating
 50 |             klazz = clazz,          // A version of clazz with a delayed constructor
 51 |             extOpt = {},            // used to extend clazz with a variable name for the init function
 52 |             undefined;              // safety net
 53 |         
 54 |         opts = $.extend({
 55 |             elem: "elem",           // the property name on the object that will be set to the current jQuery context
 56 |             access: "access",       // the name of the access function to be set on the object
 57 |             init: "init",           // the name of the init function to be set on the object
 58 |             instantAccess: false    // when true, treat all args as access args (ignore constructor args) and allow construct/function call at the same time
 59 |         }, arguments[2]);
 60 |         
 61 |         if(clazz._super) {
 62 |             extOpt[opts.init] = function(){};
 63 |             klazz = clazz.extend(extOpt);
 64 |         }
 65 |         
 66 |         $.fn[name] = function() {
 67 |             var result, args = arguments;
 68 |                 
 69 |             $(this).each(function() {
 70 |                 var $e = $(this),
 71 |                     obj = $e.data(name),
 72 |                     isNew = !obj;
 73 |                 
 74 |                 // if the object is not defined for this element, then construct
 75 |                 if(isNew) {
 76 |                     
 77 |                     // create the new object and restore init if necessary
 78 |                     obj = new klazz();
 79 |                     if(clazz._super) {
 80 |                       obj[opts.init] = clazz.prototype.init;
 81 |                     }
 82 |                     
 83 |                     // set the elem property and initialize the object
 84 |                     obj[opts.elem] = $e[0];
 85 |                     if(obj[opts.init]) {
 86 |                         obj[opts.init].apply(obj, opts.instantAccess ? [] : aps.call(args, 0));
 87 |                     }
 88 |                     
 89 |                     // associate it with the element
 90 |                     $e.data(name, obj);
 91 |                     
 92 |                 }
 93 |                 
 94 |                 // if it is defined or we allow instance access, then access
 95 |                 if(!isNew || opts.instantAccess) {
 96 |                   
 97 |                     // call the access function if it exists (allows lazy loading)
 98 |                     if(obj[opts.access]) {
 99 |                         obj[opts.access].apply(obj, aps.call(args, 0));
100 |                     }
101 |                     
102 |                     // do something with the object
103 |                     if(args.length > 0) {
104 |                     
105 |                         if($.isFunction(obj[args[0]])) {
106 |                         
107 |                             // use the method access interface
108 |                             result = obj[args[0]].apply(obj, aps.call(args, 1));
109 |                             
110 |                         } else if(args.length === 1) {
111 |                           
112 |                             // just retrieve the property (leverage deep access with getObject if we can)
113 |                             if($.getObject) {
114 |                               result = $.getObject(args[0], obj);
115 |                             } else {
116 |                               result = obj[args[0]];
117 |                             }
118 |                             
119 |                         } else {
120 |                           
121 |                             // set the property (leverage deep access with setObject if we can)
122 |                             if($.setObject) {
123 |                               $.setObject(args[0], args[1], obj);
124 |                             } else {
125 |                               obj[args[0]] = args[1];
126 |                             }
127 |                             
128 |                         }
129 |                         
130 |                     } else if(result === undefined) {
131 |                     
132 |                         // return the first object if there are no args
133 |                         result = $e.data(name);
134 |                         
135 |                     }
136 |                 }
137 |             });
138 |             
139 |             // chain if no results were returned from the clazz's method (it's a setter)
140 |             if(result === undefined) {
141 |               return $(this);
142 |             }
143 |             
144 |             // return the first result if not chaining
145 |             return result;
146 |         };
147 |     };
148 |     
149 |     var falseFunc = function() {
150 |             return false;
151 |         },
152 |         SelectBox = function() {
153 |         
154 |         var self = this,
155 |             o = {},
156 |             $orig = null,
157 |             $label = null,
158 |             $sb = null,
159 |             $display = null,
160 |             $dd = null,
161 |             $items = null,
162 |             searchTerm = "",
163 |             cstTimeout = null,
164 |             delayReloadTimeout = null,
165 |             resizeTimeout = null,
166 |             
167 |             // functions
168 |             loadSB,
169 |             createOption,
170 |             focusOrig,
171 |             blurOrig,
172 |             destroySB,
173 |             reloadSB,
174 |             delayReloadSB,
175 |             openSB,
176 |             centerOnSelected,
177 |             closeSB,
178 |             positionSB,
179 |             positionSBIfOpen,
180 |             delayPositionSB,
181 |             clickSB,
182 |             clickSBItem,
183 |             keyupSB,
184 |             keydownSB,
185 |             focusSB,
186 |             blurSB,
187 |             addHoverState,
188 |             removeHoverState,
189 |             addActiveState,
190 |             removeActiveState,
191 |             getDDCtx,
192 |             getSelected,
193 |             getEnabled,
194 |             selectItem,
195 |             clearSearchTerm,
196 |             findMatchingItem,
197 |             selectMatchingItem,
198 |             selectNextItemStartsWith,
199 |             closeAll,
200 |             closeAllButMe,
201 |             closeAndUnbind,
202 |             blurAllButMe,
203 |             stopPageHotkeys,
204 |             flickerDisplay,
205 |             unbind;
206 |         
207 |         loadSB = function() {
208 |             
209 |             // create the new sb
210 |             $sb = $("<div class='sb " + o.selectboxClass + " " + $orig.attr("class") + "' id='sb" + randInt() + "'></div>")
211 |                 .attr("role", "listbox")
212 |                 .attr("aria-has-popup", "true")
213 |                 .attr("aria-labelledby", $label.attr("id") ? $label.attr("id") : "");
214 |             $("body").append($sb);
215 |             
216 |             // generate the display markup
217 |             var displayMarkup = $orig.children().size() > 0
218 |                 ? o.displayFormat.call($orig.find("option:selected")[0], 0, 0)
219 |                 : "&nbsp;";
220 |             $display = $("<div class='display " + $orig.attr("class") + "' id='sbd" + randInt() + "'></div>")
221 |                 .append($("<div class='text'></div>").append(displayMarkup))
222 |                 .append(o.arrowMarkup);
223 |             $sb.append($display);
224 |             
225 |             // generate the dropdown markup
226 |             $dd = $("<ul class='" + o.selectboxClass + " items " + $orig.attr("class") + "' role='menu' id='sbdd" + randInt() + "'></ul>")
227 |                 .attr("aria-hidden", "true");
228 |             $sb.append($dd)
229 |                 .attr("aria-owns", $dd.attr("id"));
230 |             if($orig.children().size() === 0) {
231 |                 $dd.append(createOption().addClass("selected"));
232 |             } else {
233 |                 $orig.children().each(function( i ) {
234 |                     var $opt, $og, $ogItem, $ogList;
235 |                     if($(this).is("optgroup")) {
236 |                         $og = $(this);
237 |                         $ogItem = $("<li class='optgroup'>" + o.optgroupFormat.call($og[0], i+1) + "</li>")
238 |                             .addClass($og.is(":disabled") ? "disabled" : "")
239 |                             .attr("aria-disabled", $og.is(":disabled") ? "true" : "");
240 |                         $ogList = $("<ul class='items'></ul>");
241 |                         $ogItem.append($ogList);
242 |                         $dd.append($ogItem);
243 |                         $og.children("option").each(function() {
244 |                             $opt = createOption($(this), i)
245 |                                 .addClass($og.is(":disabled") ? "disabled" : "")
246 |                                 .attr("aria-disabled", $og.is(":disabled") ? "true" : "");
247 |                             $ogList.append($opt);
248 |                         });
249 |                     } else {
250 |                         $dd.append(createOption($(this), i));
251 |                     }
252 |                 });
253 |             }
254 |             
255 |             // cache all sb items
256 |             $items = $dd.find("li").not(".optgroup");
257 |             
258 |             // for accessibility/styling
259 |             $sb.attr("aria-active-descendant", $items.filter(".selected").attr("id"));
260 |             $dd.children(":first").addClass("first");
261 |             $dd.children(":last").addClass("last");
262 |             
263 |             // modify width based on fixedWidth/maxWidth options
264 |             if(!o.fixedWidth) {
265 |                 var largestWidth = $dd.find(".text, .optgroup").maxWidth() + $display.extraWidth() + 1;
266 |                 $sb.width(o.maxWidth ? Math.min(o.maxWidth, largestWidth) : largestWidth);
267 |             } else if(o.maxWidth && $sb.width() > o.maxWidth) {
268 |                 $sb.width(o.maxWidth);
269 |             }
270 |             
271 |             // place the new markup in its semantic location (hide/show fixes positioning bugs)
272 |             $orig.before($sb).addClass("has_sb").hide().show();
273 |             
274 |             // these two lines fix a div/span display bug on load in ie7
275 |             positionSB();
276 |             flickerDisplay();
277 |             
278 |             // hide the dropdown now that it's initialized
279 |             $dd.hide();
280 |             
281 |             // bind events
282 |             if(!$orig.is(":disabled")) {
283 |                 $orig
284 |                     .bind("blur.sb", blurOrig)
285 |                     .bind("focus.sb", focusOrig);
286 |                 $display
287 |                     .mouseup(addActiveState)
288 |                     .mouseup(clickSB)
289 |                     .click(falseFunc)
290 |                     .focus(focusSB)
291 |                     .blur(blurSB)
292 |                     .hover(addHoverState, removeHoverState);
293 |                 getEnabled()
294 |                     .click(clickSBItem)
295 |                     .hover(addHoverState, removeHoverState);
296 |                 $dd.find(".optgroup")
297 |                     .hover(addHoverState, removeHoverState)
298 |                     .click(falseFunc);
299 |                 $items.filter(".disabled")
300 |                     .click(falseFunc);
301 |                 if(!$.browser.msie || $.browser.version >= 9) {
302 |                     $(window).resize($.throttle ? $.throttle(100, positionSBIfOpen) : delayPositionSB);
303 |                 }
304 |             } else {
305 |                 $sb.addClass("disabled").attr("aria-disabled");
306 |                 $display.click(function( e ) { e.preventDefault(); });
307 |             }
308 |             
309 |             // bind custom events
310 |             $sb.bind("close.sb", closeSB).bind("destroy.sb", destroySB);
311 |             $orig.bind("reload.sb", reloadSB);
312 |             if($.fn.tie && o.useTie) {
313 |                 $orig.bind("domupdate.sb", delayReloadSB);
314 |             }
315 |         };
316 |         
317 |         delayPositionSB = function() {
318 |             clearTimeout(resizeTimeout);
319 |             resizeTimeout = setTimeout(positionSBIfOpen, 50);
320 |         };
321 |         
322 |         positionSBIfOpen = function() {
323 |             if($sb.is(".open")) {
324 |                 positionSB();
325 |                 openSB(true);
326 |             }
327 |         }
328 |         
329 |         // create new markup from an <option>
330 |         createOption = function( $option, index ) {
331 |             if(!$option) { 
332 |                 $option = $("<option value=''>&nbsp;</option>");
333 |                 index = 0;
334 |             }
335 |             var $li = $("<li id='sbo" + randInt() + "'></li>")
336 |                     .attr("role", "option")
337 |                     .data("orig", $option[0])
338 |                     .data("value", $option ? $option.attr("value") : "")
339 |                     .addClass($option.is(":selected") ? "selected" : "")
340 |                     .addClass($option.is(":disabled") ? "disabled" : "")
341 | 					.addClass($option.attr("class"))
342 |                     .attr("aria-disabled", $option.is(":disabled") ? "true" : ""),
343 |                 $inner = $("<div class='item'></div>"),
344 |                 $text = $("<div class='text'></div>")
345 |                     .html(o.optionFormat.call($option[0], 0, index + 1));
346 |             return $li.append($inner.append($text));
347 |         };
348 |         
349 |         // causes focus if original is focused
350 |         focusOrig = function() {
351 |             blurAllButMe();
352 |             $display.triggerHandler("focus");
353 |         };
354 |         
355 |         // loses focus if original is blurred
356 |         blurOrig = function() {
357 |             if(!$sb.is(".open")) {
358 |                 $display.triggerHandler("blur");
359 |             }
360 |         };
361 |         
362 |         // unbind and remove
363 |         destroySB = function( internal ) {
364 |             $sb.remove();
365 |             $orig
366 |                 .unbind(".sb")
367 |                 .removeClass("has_sb");
368 |             $(window).unbind("resize", delayPositionSB);
369 |             if(!internal) {
370 |                 $orig.removeData("sb");
371 |             }
372 |         };
373 |         
374 |         // destroy then load, maintaining open/focused state if applicable
375 |         reloadSB = function() {
376 |             var isOpen = $sb.is(".open"),
377 |                 isFocused = $display.is(".focused");
378 |             closeSB(true);
379 |             destroySB(true);
380 |             self.init(o);
381 |             if(isOpen) {
382 |                 $orig.focus();
383 |                 openSB(true);
384 |             } else if(isFocused) {
385 |                 $orig.focus();
386 |             }
387 |         };
388 |         
389 |         // debouncing when useTie === true
390 |         delayReloadSB = function() {
391 |             clearTimeout(delayReloadTimeout);
392 |             delayReloadTimeout = setTimeout(reloadSB, 30);
393 |         };
394 |         
395 |         // when the user clicks outside the sb
396 |         closeAndUnbind = function() {
397 |             $sb.removeClass("focused");
398 |             closeSB();
399 |             unbind();
400 |         };
401 |         
402 |         unbind = function() {
403 |           $(document)
404 |               .unbind("click", closeAndUnbind)
405 |               .unbind("keyup", keyupSB)
406 |               .unbind("keypress", stopPageHotkeys)
407 |               .unbind("keydown", stopPageHotkeys)
408 |               .unbind("keydown", keydownSB);
409 |         };
410 |         
411 |         // trigger all sbs to close
412 |         closeAll = function() {
413 |             $(".sb.open." + o.selectboxClass).triggerAll("close");
414 |         };
415 |         
416 |         // trigger all sbs to blur
417 |         blurAllButMe = function() {
418 |             $(".sb.focused." + o.selectboxClass).not($sb[0]).find(".display").blur();
419 |         };
420 |         
421 |         // to prevent multiple selects open at once
422 |         closeAllButMe = function() {
423 |             $(".sb.open." + o.selectboxClass).not($sb[0]).triggerAll("close");
424 |         };
425 |         
426 |         // hide and reset dropdown markup
427 |         closeSB = function( instantClose ) {
428 |             if($sb.is(".open")) {
429 |                 $display.blur();
430 |                 $items.removeClass("hover");
431 |                 unbind();
432 |                 $dd.attr("aria-hidden", "true");
433 |                 if(instantClose === true) {
434 |                   $dd.hide();
435 |                   $sb.removeClass("open");
436 |                   $sb.append($dd);
437 |                 } else {
438 |                     $dd.fadeOut(o.animDuration, function() {
439 |                         $sb.removeClass("open");
440 |                         $sb.append($dd);
441 |                     });
442 |                 }
443 |             }
444 |         };
445 |         
446 |         // since the context can change, we should get it dynamically
447 |         getDDCtx = function() {
448 |             var $ddCtx = null;
449 |             if(o.ddCtx === "self") {
450 |                 $ddCtx = $sb;
451 |             } else if($.isFunction(o.ddCtx)) {
452 |                 $ddCtx = $(o.ddCtx.call($orig[0]));
453 |             } else {
454 |                 $ddCtx = $(o.ddCtx);
455 |             }
456 |             return $ddCtx;
457 |         };
458 |         
459 |         // DRY
460 |         getSelected = function() {
461 |           return $items.filter(".selected");
462 |         };
463 |         
464 |         // DRY
465 |         getEnabled = function() {
466 |           return $items.not(".disabled");
467 |         };
468 |         
469 |         // reposition the scroll of the dropdown so the selected option is centered (or appropriately onscreen)
470 |         centerOnSelected = function() {
471 |             $dd.scrollTop($dd.scrollTop() + getSelected().offsetFrom($dd).top - $dd.height() / 2 + getSelected().outerHeight(true) / 2);
472 |         };
473 |         
474 |         flickerDisplay = function() {
475 |             if($.browser.msie && $.browser.version < 8) {
476 |                 $("." + o.selectboxClass + " .display").hide().show(); // fix ie7 display bug
477 |             }
478 |         };
479 |         
480 |         // show, reposition, and reset dropdown markup
481 |         openSB = function( instantOpen ) {
482 |             var dir,
483 |                 $ddCtx = getDDCtx();
484 |             blurAllButMe();
485 |             $sb.addClass("open");
486 |             $ddCtx.append($dd);
487 |             dir = positionSB();
488 |             $dd.attr("aria-hidden", "false");
489 |             if(instantOpen === true) {
490 |                 $dd.show();
491 |                 centerOnSelected();
492 |             } else if(dir === "down") {
493 |                 $dd.slideDown(o.animDuration, centerOnSelected);
494 |             } else {
495 |                 $dd.fadeIn(o.animDuration, centerOnSelected);
496 |             }
497 |             $orig.focus();
498 |         };
499 |         
500 |         // position dropdown based on collision detection
501 |         positionSB = function() {
502 |             var $ddCtx = getDDCtx(),
503 |                 ddMaxHeight = 0,
504 |                 ddX = $display.offsetFrom($ddCtx).left,
505 |                 ddY = 0,
506 |                 dir = "",
507 |                 ml, mt,
508 |                 bottomSpace, topSpace,
509 |                 bottomOffset, spaceDiff,
510 |                 bodyX, bodyY;
511 |             
512 |             // modify dropdown css for getting values
513 |             $dd.removeClass("above");
514 |             $dd.show().css({
515 |                 maxHeight: "none",
516 |                 position: "relative",
517 |                 visibility: "hidden"
518 |             });
519 |             if(!o.fixedWidth) {
520 |               $dd.width($display.outerWidth() - $dd.extraWidth() + 1);
521 |             }
522 |             
523 |             // figure out if we should show above/below the display box
524 |             bottomSpace = $(window).scrollTop() + $(window).height() - $display.offset().top - $display.outerHeight();
525 |             topSpace = $display.offset().top - $(window).scrollTop();
526 |             bottomOffset = $display.offsetFrom($ddCtx).top + $display.outerHeight();
527 |             spaceDiff = bottomSpace - topSpace + o.dropupThreshold;
528 |             if($dd.outerHeight() < bottomSpace) {
529 |                 ddMaxHeight = o.maxHeight ? o.maxHeight : bottomSpace;
530 |                 ddY = bottomOffset;
531 |                 dir = "down";
532 |             } else if($dd.outerHeight() < topSpace) {
533 |                 ddMaxHeight = o.maxHeight ? o.maxHeight : topSpace;
534 |                 ddY = $display.offsetFrom($ddCtx).top - Math.min(ddMaxHeight, $dd.outerHeight());
535 |                 dir = "up";
536 |             } else if(spaceDiff >= 0) {
537 |                 ddMaxHeight = o.maxHeight ? o.maxHeight : bottomSpace;
538 |                 ddY = bottomOffset;
539 |                 dir = "down";
540 |             } else if(spaceDiff < 0) {
541 |                 ddMaxHeight = o.maxHeight ? o.maxHeight : topSpace;
542 |                 ddY = $display.offsetFrom($ddCtx).top - Math.min(ddMaxHeight, $dd.outerHeight());
543 |                 dir = "up";
544 |             } else {
545 |                 ddMaxHeight = o.maxHeight ? o.maxHeight : "none";
546 |                 ddY = bottomOffset;
547 |                 dir = "down";
548 |             }
549 |             
550 |             ml = ("" + $("body").css("margin-left")).match(/^\d+/) ? $("body").css("margin-left") : 0;
551 |             mt = ("" + $("body").css("margin-top")).match(/^\d+/) ? $("body").css("margin-top") : 0;
552 |             bodyX = $().jquery >= "1.4.2"
553 |                 ? parseInt(ml)
554 |                 : $("body").offset().left;
555 |             bodyY = $().jquery >= "1.4.2"
556 |                 ? parseInt(mt)
557 |                 : $("body").offset().top;
558 |             
559 |             
560 |             // modify dropdown css for display
561 |             $dd.hide().css({
562 |                 left: ddX + ($ddCtx.is("body") ? bodyX : 0),
563 |                 maxHeight: ddMaxHeight,
564 |                 position: "absolute",
565 |                 top: ddY + ($ddCtx.is("body") ? bodyY : 0),
566 |                 visibility: "visible"
567 |             });
568 |             if(dir === "up") {
569 |               $dd.addClass("above");
570 |             }
571 |             return dir;
572 |         };
573 |         
574 |         // when the user explicitly clicks the display
575 |         clickSB = function( e ) {
576 |             if($sb.is(".open")) {
577 |                 closeSB();
578 |             } else {
579 |                 openSB();
580 |             }
581 |             return false;
582 |         };
583 |         
584 |         // when the user selects an item in any manner
585 |         selectItem = function() {
586 |             var $item = $(this),
587 |                 oldVal = $orig.val(),
588 |                 newVal = $item.data("value");
589 |             
590 |             // update the original <select>
591 |             $orig.find("option").each(function() { this.selected = false; });
592 |             $($item.data("orig")).each(function() { this.selected = true; });
593 |             
594 |             // change the selection to this item
595 |             $items.removeClass("selected");
596 |             $item.addClass("selected");
597 |             $sb.attr("aria-active-descendant", $item.attr("id"));
598 |             
599 |             // update the title attr and the display markup
600 |             $display.find(".text").attr("title", $item.find(".text").html());
601 |             $display.find(".text").html(o.displayFormat.call($item.data("orig")));
602 |             
603 |             // trigger change on the old <select> if necessary
604 |             if(oldVal !== newVal) {
605 |                 $orig.change();
606 |             }
607 |         };
608 |         
609 |         // when the user explicitly clicks an item
610 |         clickSBItem = function( e ) {
611 |             closeAndUnbind();
612 |             $orig.focus();
613 |             selectItem.call(this);
614 |             return false;
615 |         };
616 |         
617 |         // start over for generating the search term
618 |         clearSearchTerm = function() {
619 |             searchTerm = "";
620 |         };
621 |         
622 |         // iterate over all the options to see if any match the search term
623 |         findMatchingItem = function( term ) {
624 |             var i, t, $tNode,
625 |                 $available = getEnabled();
626 |             for(i=0; i < $available.size(); i++) {
627 |                 $tNode = $available.eq(i).find(".text");
628 |                 t = $tNode.children().size() == 0 ? $tNode.text() : $tNode.find("*").text();
629 |                 if(term.length > 0 && t.toLowerCase().match("^" + term.toLowerCase())) {
630 |                     return $available.eq(i);
631 |                 }
632 |             }
633 |             return null;
634 |         };
635 |         
636 |         // if we get a match for any options, select it
637 |         selectMatchingItem = function( text ) {
638 |             var $matchingItem = findMatchingItem(text);
639 |             if($matchingItem !== null) {
640 |                 selectItem.call($matchingItem[0]);
641 |                 return true;
642 |             }
643 |             return false;
644 |         };
645 |         
646 |         // stop up/down/backspace/space from moving the page
647 |         stopPageHotkeys = function( e ) {
648 |             if(e.ctrlKey || e.altKey) {
649 |                 return;
650 |             }
651 |             if(e.which === 38 || e.which === 40 || e.which === 8 || e.which === 32) {
652 |                 e.preventDefault();
653 |             }
654 |         };
655 |         
656 |         // if a normal match fails, try matching the next element that starts with the pressed letter
657 |         selectNextItemStartsWith = function( c ) {
658 |             var i, t,
659 |                 $selected = getSelected(),
660 |                 $available = getEnabled();
661 |             for(i = $available.index($selected) + 1; i < $available.size(); i++) {
662 |                 t = $available.eq(i).find(".text").text();
663 |                 if(t !== "" && t.substring(0,1).toLowerCase() === c.toLowerCase()) {
664 |                     selectItem.call($available.eq(i)[0]);
665 |                     return true;
666 |                 }
667 |             }
668 |             return false;
669 |         };
670 |         
671 |         // go up/down using arrows or attempt to autocomplete based on string
672 |         keydownSB = function( e ) {
673 |             if(e.altKey || e.ctrlKey) {
674 |                 return false;
675 |             }
676 |             var $selected = getSelected(),
677 |                 $enabled = getEnabled();
678 |             switch(e.which) {
679 |             case 9: // tab
680 |                 closeSB();
681 |                 blurSB();
682 |                 break;
683 |             case 35: // end
684 |                 if($selected.size() > 0) {
685 |                     e.preventDefault();
686 |                     selectItem.call($enabled.filter(":last")[0]);
687 |                     centerOnSelected();
688 |                 }
689 |                 break;
690 |             case 36: // home
691 |                 if($selected.size() > 0) {
692 |                     e.preventDefault();
693 |                     selectItem.call($enabled.filter(":first")[0]);
694 |                     centerOnSelected();
695 |                 }
696 |                 break;
697 |             case 38: // up
698 |                 if($selected.size() > 0) {
699 |                     if($enabled.filter(":first")[0] !== $selected[0]) {
700 |                         e.preventDefault();
701 |                         selectItem.call($enabled.eq($enabled.index($selected)-1)[0]);
702 |                     }
703 |                     centerOnSelected();
704 |                 }
705 |                 break;
706 |             case 40: // down
707 |                 if($selected.size() > 0) {
708 |                     if($enabled.filter(":last")[0] !== $selected[0]) {
709 |                         e.preventDefault();
710 |                         selectItem.call($enabled.eq($enabled.index($selected)+1)[0]);
711 |                         centerOnSelected();
712 |                     }
713 |                 } else if($items.size() > 1) {
714 |                     e.preventDefault();
715 |                     selectItem.call($items.eq(0)[0]);
716 |                 }
717 |                 break;
718 |             default:
719 |                 break;
720 |             }
721 |         };
722 |         
723 |         // the user is typing -- try to select an item based on what they press
724 |         keyupSB = function( e ) {
725 |             if(e.altKey || e.ctrlKey) {
726 |               return false;
727 |             }
728 |             if(e.which !== 38 && e.which !== 40) {
729 |                 
730 |                 // add to the search term
731 |                 searchTerm += String.fromCharCode(e.keyCode);
732 |                 
733 |                 if(selectMatchingItem(searchTerm)) {
734 |                 
735 |                     // we found a match, continue with the current search term
736 |                     clearTimeout(cstTimeout);
737 |                     cstTimeout = setTimeout(clearSearchTerm, o.acTimeout);
738 |                     
739 |                 } else if(selectNextItemStartsWith(String.fromCharCode(e.keyCode))) {
740 |                     
741 |                     // we selected the next item that starts with what you just pressed
742 |                     centerOnSelected();
743 |                     clearTimeout(cstTimeout);
744 |                     cstTimeout = setTimeout(clearSearchTerm, o.acTimeout);
745 |                     
746 |                 } else {
747 |                     
748 |                     // no matches were found, clear everything
749 |                     clearSearchTerm();
750 |                     clearTimeout(cstTimeout);
751 |                     
752 |                 }
753 |             }
754 |         };
755 |         
756 |         // when the sb is focused (by tab or click), allow hotkey selection and kill all other selectboxes
757 |         focusSB = function() {
758 |             closeAllButMe();
759 |             $sb.addClass("focused");
760 |             $(document)
761 |                 .click(closeAndUnbind)
762 |                 .keyup(keyupSB)
763 |                 .keypress(stopPageHotkeys)
764 |                 .keydown(stopPageHotkeys)
765 |                 .keydown(keydownSB);
766 |         };
767 |         
768 |         // when the sb is blurred (by tab or click), disable hotkey selection
769 |         blurSB = function() {
770 |             $sb.removeClass("focused");
771 |             $display.removeClass("active");
772 |             $(document)
773 |                 .unbind("keyup", keyupSB)
774 |                 .unbind("keydown", stopPageHotkeys)
775 |                 .unbind("keypress", stopPageHotkeys)
776 |                 .unbind("keydown", keydownSB);
777 |         };
778 |         
779 |         // add hover class to an element
780 |         addHoverState = function() {
781 |           $(this).addClass("hover");
782 |         };
783 |         
784 |         // remove hover class from an element
785 |         removeHoverState = function() {
786 |           $(this).removeClass("hover");
787 |         };
788 |         
789 |         // add active class to the display
790 |         addActiveState = function() {
791 |           $display.addClass("active");
792 |           $(document).bind("mouseup", removeActiveState);
793 |         };
794 |         
795 |         // remove active class from an element
796 |         removeActiveState = function() {
797 |           $display.removeClass("active");
798 |           $(document).unbind("mouseup", removeActiveState);
799 |         };
800 |         
801 |         // constructor
802 |         this.init = function( opts ) {
803 |             
804 |             // this plugin is not compatible with IE6 and below;
805 |             // a normal <select> will be displayed for old browsers
806 |             if($.browser.msie && $.browser.version < 7) {
807 |               return;
808 |             }
809 |         
810 |             // get the original <select> and <label>
811 |             $orig = $(this.elem);
812 |             if($orig.attr("id")) {
813 |                 $label = $("label[for='" + $orig.attr("id") + "']:first");
814 |             }
815 |             if(!$label || $label.size() === 0) {
816 |                 $label = $orig.closest("label");
817 |             }
818 |             
819 |             // don't create duplicate SBs
820 |             if($orig.hasClass("has_sb")) {
821 |                 return;
822 |             }
823 |             
824 |             // set the various options
825 |             o = $.extend({
826 |                 acTimeout: 800,               // time between each keyup for the user to create a search string
827 |                 animDuration: 200,            // time to open/close dropdown in ms
828 |                 ddCtx: 'body',                // body | self | any selector | a function that returns a selector (the original select is the context)
829 |                 dropupThreshold: 150,         // the minimum amount of extra space required above the selectbox for it to display a dropup
830 |                 fixedWidth: false,            // if false, dropdown expands to widest and display conforms to whatever is selected
831 |                 maxHeight: false,             // if an integer, show scrollbars if the dropdown is too tall
832 |                 maxWidth: false,              // if an integer, prevent the display/dropdown from growing past this width; longer items will be clipped
833 |                 selectboxClass: 'selectbox',  // class to apply our markup
834 |                 useTie: false,                // if jquery.tie is included and this is true, the selectbox will update dynamically
835 |                 
836 |                 // markup appended to the display, typically for styling an arrow
837 |                 arrowMarkup: "<div class='arrow_btn'><span class='arrow'></span></div>",
838 |                 
839 |                 // use optionFormat by default
840 |                 displayFormat: undefined,
841 |                 
842 |                 // formatting for the display; note that it will be wrapped with <a href='#'><span class='text'></span></a>
843 |                 optionFormat: function( ogIndex, optIndex ) {
844 |                     if($(this).size() > 0) {
845 |                         var label = $(this).attr("label");
846 |                         if(label && label.length > 0) {
847 |                           return label;
848 |                         }
849 |                         return $(this).text();
850 |                     } else {
851 |                         return "";
852 |                     }
853 |                 },
854 |                 
855 |                 // the function to produce optgroup markup
856 |                 optgroupFormat: function( ogIndex ) {
857 |                     return "<span class='label'>" + $(this).attr("label") + "</span>";
858 |                 }
859 |             }, opts);
860 |             o.displayFormat = o.displayFormat || o.optionFormat;
861 |             
862 |             // generate the new sb
863 |             loadSB();
864 |         };
865 |         
866 |         // public method interface
867 |         this.open = openSB;
868 |         this.close = closeSB;
869 |         this.refresh = reloadSB;
870 |         this.destroy = destroySB;
871 |         this.options = function( opts ) {
872 |             o = $.extend(o, opts);
873 |             reloadSB();
874 |         };
875 |     };
876 | 
877 |     $.proto("sb", SelectBox);
878 | 
879 | }(jQuery, window));


--------------------------------------------------------------------------------
/jquery.sb.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     jQuery-SelectBox
 3 |     
 4 |     Traditional select elements are very difficult to style by themselves, 
 5 |     but they are also very usable and feature rich. This plugin attempts to 
 6 |     recreate all selectbox functionality and appearance while adding 
 7 |     animation and stylability.
 8 |     
 9 |     This product includes software developed 
10 |     by RevSystems, Inc (http://www.revsystems.com/) and its contributors
11 |     
12 |     Please see the accompanying LICENSE.txt for licensing information.
13 | */
14 | (function(e,d,g){e.fn.borderWidth=function(){return e(this).outerWidth()-e(this).innerWidth()};e.fn.paddingWidth=function(){return e(this).innerWidth()-e(this).width()};e.fn.extraWidth=function(){return e(this).outerWidth(true)-e(this).width()};e.fn.offsetFrom=function(i){var h=e(i);return{left:e(this).offset().left-h.offset().left,top:e(this).offset().top-h.offset().top}};e.fn.maxWidth=function(){var h=0;e(this).each(function(){if(e(this).width()>h){h=e(this).width()}});return h};e.fn.triggerAll=function(h,i){return e(this).each(function(){e(this).triggerHandler(h,i)})};var c=Array.prototype.slice,a=function(){return Math.floor(Math.random()*999999999)};e.proto=function(){var i=arguments[0],h=arguments[1],j=h,l={},k;opts=e.extend({elem:"elem",access:"access",init:"init",instantAccess:false},arguments[2]);if(h._super){l[opts.init]=function(){};j=h.extend(l)}e.fn[i]=function(){var m,n=arguments;e(this).each(function(){var p=e(this),q=p.data(i),o=!q;if(o){q=new j();if(h._super){q[opts.init]=h.prototype.init}q[opts.elem]=p[0];if(q[opts.init]){q[opts.init].apply(q,opts.instantAccess?[]:c.call(n,0))}p.data(i,q)}if(!o||opts.instantAccess){if(q[opts.access]){q[opts.access].apply(q,c.call(n,0))}if(n.length>0){if(e.isFunction(q[n[0]])){m=q[n[0]].apply(q,c.call(n,1))}else{if(n.length===1){if(e.getObject){m=e.getObject(n[0],q)}else{m=q[n[0]]}}else{if(e.setObject){e.setObject(n[0],n[1],q)}else{q[n[0]]=n[1]}}}}else{if(m===k){m=p.data(i)}}}});if(m===k){return e(this)}return m}};var b=function(){return false},f=function(){var q=this,U={},m=null,C=null,u=null,v=null,l=null,ac=null,W="",G=null,V=null,i=null,T,Z,n,af,s,ad,Y,M,aa,w,ae,h,ab,S,Q,L,y,z,j,X,R,J,I,P,H,O,E,B,k,N,p,A,F,x,t,r,K,D;T=function(){u=e("<div class='sb "+U.selectboxClass+" "+m.attr("class")+"' id='sb"+a()+"'></div>").attr("role","listbox").attr("aria-has-popup","true").attr("aria-labelledby",C.attr("id")?C.attr("id"):"");e("body").append(u);var ag=m.children().size()>0?U.displayFormat.call(m.find("option:selected")[0],0,0):"&nbsp;";v=e("<div class='display "+m.attr("class")+"' id='sbd"+a()+"'></div>").append(e("<div class='text'></div>").append(ag)).append(U.arrowMarkup);u.append(v);l=e("<ul class='"+U.selectboxClass+" items "+m.attr("class")+"' role='menu' id='sbdd"+a()+"'></ul>").attr("aria-hidden","true");u.append(l).attr("aria-owns",l.attr("id"));if(m.children().size()===0){l.append(Z().addClass("selected"))}else{m.children().each(function(ah){var ai,aj,ak,al;if(e(this).is("optgroup")){aj=e(this);ak=e("<li class='optgroup'>"+U.optgroupFormat.call(aj[0],ah+1)+"</li>").addClass(aj.is(":disabled")?"disabled":"").attr("aria-disabled",aj.is(":disabled")?"true":"");al=e("<ul class='items'></ul>");ak.append(al);l.append(ak);aj.children("option").each(function(){ai=Z(e(this),ah).addClass(aj.is(":disabled")?"disabled":"").attr("aria-disabled",aj.is(":disabled")?"true":"");al.append(ai)})}else{l.append(Z(e(this),ah))}})}ac=l.find("li").not(".optgroup");u.attr("aria-active-descendant",ac.filter(".selected").attr("id"));l.children(":first").addClass("first");l.children(":last").addClass("last");if(!U.fixedWidth){var o=l.find(".text, .optgroup").maxWidth()+v.extraWidth()+1;u.width(U.maxWidth?Math.min(U.maxWidth,o):o)}else{if(U.maxWidth&&u.width()>U.maxWidth){u.width(U.maxWidth)}}m.before(u).addClass("has_sb").hide().show();ae();K();l.hide();if(!m.is(":disabled")){m.bind("blur.sb",af).bind("focus.sb",n);v.mouseup(J).mouseup(S).click(b).focus(z).blur(j).hover(X,R);O().click(Q).hover(X,R);l.find(".optgroup").hover(X,R).click(b);ac.filter(".disabled").click(b);if(!e.browser.msie||e.browser.version>=9){e(d).resize(e.throttle?e.throttle(100,h):ab)}}else{u.addClass("disabled").attr("aria-disabled");v.click(function(ah){ah.preventDefault()})}u.bind("close.sb",w).bind("destroy.sb",s);m.bind("reload.sb",ad);if(e.fn.tie&&U.useTie){m.bind("domupdate.sb",Y)}};ab=function(){clearTimeout(i);i=setTimeout(h,50)};h=function(){if(u.is(".open")){ae();M(true)}};Z=function(ah,o){if(!ah){ah=e("<option value=''>&nbsp;</option>");o=0}var aj=e("<li id='sbo"+a()+"'></li>").attr("role","option").data("orig",ah[0]).data("value",ah?ah.attr("value"):"").addClass(ah.is(":selected")?"selected":"").addClass(ah.is(":disabled")?"disabled":"").attr("aria-disabled",ah.is(":disabled")?"true":""),ai=e("<div class='item'></div>"),ag=e("<div class='text'></div>").html(U.optionFormat.call(ah[0],0,o+1));return aj.append(ai.append(ag))};n=function(){t();v.triggerHandler("focus")};af=function(){if(!u.is(".open")){v.triggerHandler("blur")}};s=function(o){u.remove();m.unbind(".sb").removeClass("has_sb");e(d).unbind("resize",ab);if(!o){m.removeData("sb")}};ad=function(){var ag=u.is(".open"),o=v.is(".focused");w(true);s(true);q.init(U);if(ag){m.focus();M(true)}else{if(o){m.focus()}}};Y=function(){clearTimeout(V);V=setTimeout(ad,30)};x=function(){u.removeClass("focused");w();D()};D=function(){e(document).unbind("click",x).unbind("keyup",L).unbind("keypress",r).unbind("keydown",r).unbind("keydown",y)};A=function(){e(".sb.open."+U.selectboxClass).triggerAll("close")};t=function(){e(".sb.focused."+U.selectboxClass).not(u[0]).find(".display").blur()};F=function(){e(".sb.open."+U.selectboxClass).not(u[0]).triggerAll("close")};w=function(o){if(u.is(".open")){v.blur();ac.removeClass("hover");D();l.attr("aria-hidden","true");if(o===true){l.hide();u.removeClass("open");u.append(l)}else{l.fadeOut(U.animDuration,function(){u.removeClass("open");u.append(l)})}}};P=function(){var o=null;if(U.ddCtx==="self"){o=u}else{if(e.isFunction(U.ddCtx)){o=e(U.ddCtx.call(m[0]))}else{o=e(U.ddCtx)}}return o};H=function(){return ac.filter(".selected")};O=function(){return ac.not(".disabled")};aa=function(){l.scrollTop(l.scrollTop()+H().offsetFrom(l).top-l.height()/2+H().outerHeight(true)/2)};K=function(){if(e.browser.msie&&e.browser.version<8){e("."+U.selectboxClass+" .display").hide().show()}};M=function(ag){var o,ah=P();t();u.addClass("open");ah.append(l);o=ae();l.attr("aria-hidden","false");if(ag===true){l.show();aa()}else{if(o==="down"){l.slideDown(U.animDuration,aa)}else{l.fadeIn(U.animDuration,aa)}}m.focus()};ae=function(){var aj=P(),aq=0,ah=v.offsetFrom(aj).left,ag=0,ak="",an,o,ap,ao,ai,ar,am,al;l.removeClass("above");l.show().css({maxHeight:"none",position:"relative",visibility:"hidden"});if(!U.fixedWidth){l.width(v.outerWidth()-l.extraWidth()+1)}ap=e(d).scrollTop()+e(d).height()-v.offset().top-v.outerHeight();ao=v.offset().top-e(d).scrollTop();ai=v.offsetFrom(aj).top+v.outerHeight();ar=ap-ao+U.dropupThreshold;if(l.outerHeight()<ap){aq=U.maxHeight?U.maxHeight:ap;ag=ai;ak="down"}else{if(l.outerHeight()<ao){aq=U.maxHeight?U.maxHeight:ao;ag=v.offsetFrom(aj).top-Math.min(aq,l.outerHeight());ak="up"}else{if(ar>=0){aq=U.maxHeight?U.maxHeight:ap;ag=ai;ak="down"}else{if(ar<0){aq=U.maxHeight?U.maxHeight:ao;ag=v.offsetFrom(aj).top-Math.min(aq,l.outerHeight());ak="up"}else{aq=U.maxHeight?U.maxHeight:"none";ag=ai;ak="down"}}}}an=(""+e("body").css("margin-left")).match(/^\d+/)?e("body").css("margin-left"):0;o=(""+e("body").css("margin-top")).match(/^\d+/)?e("body").css("margin-top"):0;am=e().jquery>="1.4.2"?parseInt(an):e("body").offset().left;al=e().jquery>="1.4.2"?parseInt(o):e("body").offset().top;l.hide().css({left:ah+(aj.is("body")?am:0),maxHeight:aq,position:"absolute",top:ag+(aj.is("body")?al:0),visibility:"visible"});if(ak==="up"){l.addClass("above")}return ak};S=function(o){if(u.is(".open")){w()}else{M()}return false};E=function(){var ag=e(this),o=m.val(),ah=ag.data("value");m.find("option").each(function(){this.selected=false});e(ag.data("orig")).each(function(){this.selected=true});ac.removeClass("selected");ag.addClass("selected");u.attr("aria-active-descendant",ag.attr("id"));v.find(".text").attr("title",ag.find(".text").html());v.find(".text").html(U.displayFormat.call(ag.data("orig")));if(o!==ah){m.change()}};Q=function(o){x();m.focus();E.call(this);return false};B=function(){W=""};k=function(aj){var ai,ah,o,ag=O();for(ai=0;ai<ag.size();ai++){o=ag.eq(ai).find(".text");ah=o.children().size()==0?o.text():o.find("*").text();if(aj.length>0&&ah.toLowerCase().match("^"+aj.toLowerCase())){return ag.eq(ai)}}return null};N=function(ag){var o=k(ag);if(o!==null){E.call(o[0]);return true}return false};r=function(o){if(o.ctrlKey||o.altKey){return}if(o.which===38||o.which===40||o.which===8||o.which===32){o.preventDefault()}};p=function(aj){var ai,ah,o=H(),ag=O();for(ai=ag.index(o)+1;ai<ag.size();ai++){ah=ag.eq(ai).find(".text").text();if(ah!==""&&ah.substring(0,1).toLowerCase()===aj.toLowerCase()){E.call(ag.eq(ai)[0]);return true}}return false};y=function(ah){if(ah.altKey||ah.ctrlKey){return false}var ag=H(),o=O();switch(ah.which){case 9:w();j();break;case 35:if(ag.size()>0){ah.preventDefault();E.call(o.filter(":last")[0]);aa()}break;case 36:if(ag.size()>0){ah.preventDefault();E.call(o.filter(":first")[0]);aa()}break;case 38:if(ag.size()>0){if(o.filter(":first")[0]!==ag[0]){ah.preventDefault();E.call(o.eq(o.index(ag)-1)[0])}aa()}break;case 40:if(ag.size()>0){if(o.filter(":last")[0]!==ag[0]){ah.preventDefault();E.call(o.eq(o.index(ag)+1)[0]);aa()}}else{if(ac.size()>1){ah.preventDefault();E.call(ac.eq(0)[0])}}break;default:break}};L=function(o){if(o.altKey||o.ctrlKey){return false}if(o.which!==38&&o.which!==40){W+=String.fromCharCode(o.keyCode);if(N(W)){clearTimeout(G);G=setTimeout(B,U.acTimeout)}else{if(p(String.fromCharCode(o.keyCode))){aa();clearTimeout(G);G=setTimeout(B,U.acTimeout)}else{B();clearTimeout(G)}}}};z=function(){F();u.addClass("focused");e(document).click(x).keyup(L).keypress(r).keydown(r).keydown(y)};j=function(){u.removeClass("focused");v.removeClass("active");e(document).unbind("keyup",L).unbind("keydown",r).unbind("keypress",r).unbind("keydown",y)};X=function(){e(this).addClass("hover")};R=function(){e(this).removeClass("hover")};J=function(){v.addClass("active");e(document).bind("mouseup",I)};I=function(){v.removeClass("active");e(document).unbind("mouseup",I)};this.init=function(o){if(e.browser.msie&&e.browser.version<7){return}m=e(this.elem);if(m.attr("id")){C=e("label[for='"+m.attr("id")+"']:first")}if(!C||C.size()===0){C=m.closest("label")}if(m.hasClass("has_sb")){return}U=e.extend({acTimeout:800,animDuration:200,ddCtx:"body",dropupThreshold:150,fixedWidth:false,maxHeight:false,maxWidth:false,selectboxClass:"selectbox",useTie:false,arrowMarkup:"<div class='arrow_btn'><span class='arrow'></span></div>",displayFormat:g,optionFormat:function(ag,ai){if(e(this).size()>0){var ah=e(this).attr("label");if(ah&&ah.length>0){return ah}return e(this).text()}else{return""}},optgroupFormat:function(ag){return"<span class='label'>"+e(this).attr("label")+"</span>"}},o);U.displayFormat=U.displayFormat||U.optionFormat;T()};this.open=M;this.close=w;this.refresh=ad;this.destroy=s;this.options=function(o){U=e.extend(U,o);ad()}};e.proto("sb",f)}(jQuery,window));


--------------------------------------------------------------------------------
/lib/jquerytie/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2010 RevSystems, Inc
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 | 
13 | The end-user documentation included with the redistribution, if any, must 
14 | include the following acknowledgment: "This product includes software developed 
15 | by RevSystems, Inc (http://www.revsystems.com/) and its contributors", in the 
16 | same place and form as other third-party acknowledgments. Alternately, this 
17 | acknowledgment may appear in the software itself, in the same form and location 
18 | as other such third-party acknowledgments.
19 | 
20 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
21 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
22 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
23 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
24 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
25 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
26 | THE SOFTWARE.


--------------------------------------------------------------------------------
/lib/jquerytie/README.md:
--------------------------------------------------------------------------------
  1 | # jQuery-Tie BETA
  2 | 
  3 | This plugin allows you to match the css property of one DOM element to another.
  4 | It is persistent, which means the match is applied every time the matched element 
  5 | changes its css, attributes, or DOM content. It also introduces new events, 
  6 | "cssupdate" and "domupdate", which could be useful under other circumstances.
  7 | 
  8 | Please note that this plugin can be tricky and needs to be refined further before 
  9 | it is considered non-beta.
 10 | 
 11 | # Demo
 12 | 
 13 | You can see some examples [here](http://dl.dropbox.com/u/124192/websites/jquerytie/index.html).
 14 | 
 15 | ## Features
 16 | 
 17 |   * Tie one element's appearance to another's, even when JS modifies the page
 18 |   * Lets you set the listener scope to help limit trigger pollution
 19 |   * Introduces domupdate/cssupdate events, which bubble up from the target element
 20 |   
 21 | ## Compatibility
 22 | 
 23 | jQuery-Tie has been tested in the following browsers:
 24 |   
 25 |   * Firefox 3.6.12
 26 |   * Google Chrome 7.0.517.44
 27 |   * IE7 (via IE9 beta)
 28 |   * IE8 (via IE9 beta)
 29 |   * IE9 beta
 30 |   
 31 | It requires [jQuery version 1.3.x](http://jquery.com) and up.
 32 |   
 33 | ## Caution
 34 | 
 35 | Be forewarned that this plugin wraps core jQuery functions so that they 
 36 | can fire the necessary events. These functions are:
 37 | 
 38 |   * css
 39 |   * attr
 40 |   * append
 41 |   * prepend
 42 |   * before
 43 |   * after
 44 |   * text
 45 |   * html
 46 |   * empty
 47 |   * remove
 48 |   * jQuery.fx.prototype.update (for animate)
 49 | 
 50 | You'll notice functions like insertBefore and replace are not included
 51 | here. These functions will still fire the events because they use one of 
 52 | the functions listed above internally.
 53 | 
 54 | NON-JQUERY FUNCTIONS WILL NOT TRIGGER THE NEW EVENTS.
 55 | 
 56 | This means things calls like document.getElementById("div1").appendChild("text"); 
 57 | or "this.selected = true;" are not recognized by jquery.tie. Make sure 
 58 | you consistently use jQuery's DOM manipulation functions if you want jquery.tie 
 59 | to work correctly.
 60 | 
 61 | ## Usage
 62 | 
 63 | Requires [jQuery](http://jquery.com) and this plugin.
 64 | 
 65 |     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 66 |     <script type="text/javascript" src="jquery.tie.js"></script>
 67 |     
 68 | First, imagine we're working with this markup:
 69 | 
 70 |     <div id="element_container">
 71 |       <div class="group">
 72 |         <div id="a">Element A</div>
 73 |         <div id="b">Element B</div>
 74 |       </div>
 75 |     </div>
 76 | 
 77 | To match element A's width to element B's:
 78 | 
 79 |     $(document).ready(function() {
 80 |       $("#a").tie("width", "#a");
 81 |       $("#b").width(100);
 82 |     });
 83 |     
 84 | To match element A's width to element B's height:
 85 | 
 86 |     $(document).ready(function() {
 87 |       $("#a").tie("width", "#b", "height");
 88 |       $("#b").height(100);
 89 |     });
 90 |     
 91 | To match element A's width to twice element B's height:
 92 | 
 93 |     $(document).ready(function() {
 94 |       $("#a").tie("width", "#b", function() {
 95 |         return $(this).height() * 2;
 96 |       });
 97 |       $("#b").height(100);
 98 |     });
 99 |     
100 | ## Advanced Usage
101 | 
102 | ### Global Listeners
103 | 
104 | One issue with matching CSS is something I call "passive resizing".
105 | Basically, a block level element's width is controlled by one of its 
106 | parents' widths instead of its children.
107 | 
108 | To completely avoid the issue, you could set up a global listener:
109 | 
110 |     $(document).ready(function() {
111 |       $("#a").tie("width", "#b", "width", { globalListener: true });
112 |       $("#elements").width(300);
113 |     });
114 | 
115 | ### Proxy Listeners
116 | 
117 | Global listeners introduce a lot of extra function calls that we 
118 | may want to avoid. Any time there is ANY css/dom update on the page, 
119 | your tie function will be called.
120 | 
121 | For advanced users, there is a way to reduce this event pollution. 
122 | You can set a proxy listener.
123 | 
124 | To match element A's width to element B's width using passive resizing
125 | and a proxy listener:
126 | 
127 |     $(document).ready(function() {
128 |       $("#a").tie("width", "#b", "width", { proxyListener: "#elements" });
129 |       $("#elements").width(300);
130 |     });
131 | 
132 | Normally, the proxy listener would default to element B's parent. But in the 
133 | case above, no cssupdate event would be triggered on element B or its parent.
134 | 
135 | To deal with this, we set a proxy listener on #elements, which is what we 
136 | really want to track. So the tie function would be invoked whenever #elements 
137 | or any of its descendants fire a cssupdate/domupdate event.
138 | 
139 | ### onScroll and onResize
140 | 
141 | You also can trigger the tie function on scroll or resize:
142 | 
143 |     $(document).ready(function() {
144 |       $("#a").tie("top", "#b", function() {
145 |         return $(window).scrollTop();
146 |       }, { 
147 |         onScroll: true 
148 |       });
149 |     });
150 | 
151 |     $(document).ready(function() {
152 |       $("#a").tie("height", "body", function() {
153 |           return Math.max($(window).height(), $(this).height()); 
154 |         }, { 
155 |           onResize: true 
156 |         });
157 |     });
158 |     
159 | ### Events
160 | 
161 | To set up a domupdate event listener:
162 | 
163 |     $(document).ready(function() {
164 |       $("#a").domupdate(function() {
165 |         alert("the dom of my descendants has been updated!");
166 |       });
167 |       $("#a").domupdate();
168 |     });
169 | 
170 | To set up a cssupdate event listener:
171 | 
172 |     $(document).ready(function() {
173 |       $("#a").cssupdate(function() {
174 |         alert("the css of my descendants has been updated!");
175 |       });
176 |       $("#a").cssupdate();
177 |     });
178 | 
179 | ## Options
180 | 
181 |   View defaults and short descriptions for options in jquery.tie.js. This list 
182 |   is meant to be more informative than the js comments.
183 |   
184 |   **globalListener** (boolean)
185 |     
186 |     Default is false. If true, sets the proxyListener to "body". The tie function 
187 |     will be triggered any time there is a cssupdate/domupdate event in the document.
188 |     
189 |   **onResize** (boolean)
190 |   
191 |     Default is false. If true, triggers the tie function when the window is 
192 |     resized.
193 |     
194 |   **onScroll** (boolean)
195 |   
196 |     Default is false. If true, triggers the tie function when the window is 
197 |     scrolled.
198 |     
199 |   **proxyListener** (selector / DOM Element / function that returns a selector)
200 |   
201 |     Default is the parent of element B. Lets you specify the point in the DOM where 
202 |     the tie function should listen for cssupdate/domupdate events.


--------------------------------------------------------------------------------
/lib/jquerytie/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 | 
  3 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4 | <head>
  5 |   <meta http-equiv="content-type"  content="text/html;charset=UTF-8" />
  6 |   <title>jquery.tie.js</title>
  7 |   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  8 |   <script type="text/javascript" src="jquery.tie.min.js"></script>
  9 |   <style type="text/css">
 10 |     body{margin:0;padding:0;}
 11 |     .outer_container{text-align:center;}
 12 |     .inner_container{margin:0 auto;text-align:left;width:960px;}
 13 |     h2{margin-top:2em;}
 14 |   </style>
 15 |   <script type="text/javascript">
 16 |     $(document).ready(function() {
 17 |       // Example 1
 18 |       $("#example1 .a").tie("width", "#example1 .b");
 19 |       $("#example1 .animate").click(function(e) {
 20 |         e.preventDefault();
 21 |         $("#example1 .b").animate({ width: 200 });
 22 |       });
 23 |       $("#example1 .reset").click(function(e) {
 24 |         e.preventDefault();
 25 |         $("#example1 .b").css("width", null);
 26 |       });
 27 |       
 28 |       // Example 2
 29 |       // using plain "height" here doesn't work in IE7+jQuery 1.3.2
 30 |       // because it returns "auto" instead of a number
 31 |       $("#example2 .a").tie("width", "#example2 .b", function() { return $(this).height(); });
 32 |       $("#example2 .animate").click(function(e) {
 33 |         e.preventDefault();
 34 |         $("#example2 .b").animate({ height: 200 });
 35 |       });
 36 |       $("#example2 .reset").click(function(e) {
 37 |         e.preventDefault();
 38 |         $("#example2 .b").css("height", null);
 39 |       });
 40 |       $("#example2 .addline").click(function(e) {
 41 |         e.preventDefault();
 42 |         $("#example2 .b").append("new line!<br/>");
 43 |       });
 44 |       $("#example2 .empty").click(function(e) {
 45 |         e.preventDefault();
 46 |         $("#example2 .b").empty();
 47 |       });
 48 |       
 49 |       // Example 3
 50 |       $("#example3 .a").tie("width", "#example3 .b", function() { return $(this).height() * 2; });
 51 |       $("#example3 .animate").click(function(e) {
 52 |         e.preventDefault();
 53 |         $("#example3 .b").animate({ height: 200 });
 54 |       });
 55 |       $("#example3 .reset").click(function(e) {
 56 |         e.preventDefault();
 57 |         $("#example3 .b").css("height", null);
 58 |       });
 59 |       $("#example3 .addline").click(function(e) {
 60 |         e.preventDefault();
 61 |         $("#example3 .b").append("new line!<br/>");
 62 |       });
 63 |       $("#example3 .empty").click(function(e) {
 64 |         e.preventDefault();
 65 |         $("#example3 .b").empty();
 66 |       });
 67 |       
 68 |       // Example 4
 69 |       $("#example4 .a").tie("width", "#example4 .b", "width", { globalListener: true });
 70 |       $("#example4 .animate").click(function(e) {
 71 |         e.preventDefault();
 72 |         $("#example4").animate({ width: 200 });
 73 |       });
 74 |       $("#example4 .reset").click(function(e) {
 75 |         e.preventDefault();
 76 |         $("#example4").css("width", null);
 77 |       });
 78 |       
 79 |       // Example 5
 80 |       $("#example5 .a").tie("width", "#example5 .b", "width", { proxyListener: "#example5" });
 81 |       $("#example5 .animate").click(function(e) {
 82 |         e.preventDefault();
 83 |         $("#example5").animate({ width: 200 });
 84 |       });
 85 |       $("#example5 .reset").click(function(e) {
 86 |         e.preventDefault();
 87 |         $("#example5").css("width", null);
 88 |       });
 89 |       
 90 |       // Example 6
 91 |       $("#example6 .a").tie("left", "#example6 .b", function() {
 92 |           return $(this).width() / 3;
 93 |         }, {
 94 |           proxyListener: "#example6 .b" 
 95 |         });
 96 |       $("#example6 .animate").click(function(e) {
 97 |         e.preventDefault();
 98 |         $("#example6 .b").animate({ width: 200 });
 99 |       });
100 |       $("#example6 .reset").click(function(e) {
101 |         e.preventDefault();
102 |         $("#example6 .b").css("width", null);
103 |       });
104 |     });
105 |   </script>
106 | </head>
107 | <body>
108 | <div class="outer_container">
109 |   <div class="inner_container">
110 |     <h1>jQuery-Tie Demo</h1>
111 |     
112 |     <h2>Match the width of element A to the width of element B</h2>
113 |     <div id="example1">
114 |       <div class="a" style="background:blue;color:white;">Element A</div>
115 |       <div class="b" style="background:red;color:white;">Element B</div>
116 |       <a href="#" class="animate">Animate B's width</a>
117 |       <a href="#" class="reset">Reset B's width</a>
118 |     </div>
119 |     
120 |     <h2>Match the width of element A to the height of element B</h2>
121 |     <div id="example2">
122 |       <div class="a" style="background:blue;color:white;">Element A</div>
123 |       <div class="b" style="background:red;color:white;">Element B<br/></div>
124 |       <a href="#" class="animate">Animate B's height</a>
125 |       <a href="#" class="reset">Reset B's height</a>
126 |       <a href="#" class="addline">Add a line of text to B</a>
127 |       <a href="#" class="empty">Empty element B</a>
128 |     </div>
129 |     
130 |     <h2>Match the width of element A to twice the height of element B</h2>
131 |     <div id="example3">
132 |       <div class="a" style="background:blue;color:white;">Element A</div>
133 |       <div class="b" style="background:red;color:white;">Element B<br/></div>
134 |       <a href="#" class="animate">Animate B's height</a>
135 |       <a href="#" class="reset">Reset B's height</a>
136 |       <a href="#" class="addline">Add a line of text to B</a>
137 |       <a href="#" class="empty">Empty element B</a>
138 |     </div>
139 |     
140 |     <h2>Passive resizing with a global listener, tie width of A to B</h2>
141 |     <div id="example4">
142 |       <div class="group">
143 |         <div class="a" style="background:blue;color:white;">Element A</div>
144 |         <div class="b" style="background:red;color:white;">Element B</div>
145 |       </div>
146 |       <a href="#" class="animate">Animate the example container's width</a>
147 |       <a href="#" class="reset">Reset B's width</a>
148 |     </div>
149 |     
150 |     <h2>Passive resizing with a proxy listener, tie width of A to B</h2>
151 |     <div id="example5">
152 |       <div class="group">
153 |         <div class="a" style="background:blue;color:white;">Element A</div>
154 |         <div class="b" style="background:red;color:white;">Element B</div>
155 |       </div>
156 |       <a href="#" class="animate">Animate the example container's width</a>
157 |       <a href="#" class="reset">Reset B's width</a>
158 |     </div>
159 |     
160 |     <h2>A is in container B, match A's "left" css attribute to 1/3 B's width</h2>
161 |     <div id="example6">
162 |       <div class="group">
163 |         <div class="b" style="background:blue;color:white;padding:20px;position:relative;">
164 |           Element B
165 |           <div class="a" style="background:red;color:white;left:0;position:absolute;top:0;">Element A</div>
166 |         </div>
167 |       </div>
168 |       <a href="#" class="animate">Animate B's width</a>
169 |       <a href="#" class="reset">Reset B's width</a>
170 |     </div>
171 |     
172 |   </div>
173 | </div>
174 | </body>
175 | </html>


--------------------------------------------------------------------------------
/lib/jquerytie/jquery.tie.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright (c) 2010 RevSystems, Inc
  3 | 
  4 | Permission is hereby granted, free of charge, to any person obtaining a copy
  5 | of this software and associated documentation files (the "Software"), to deal
  6 | in the Software without restriction, including without limitation the rights
  7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  8 | copies of the Software, and to permit persons to whom the Software is
  9 | furnished to do so, subject to the following conditions:
 10 | 
 11 | The above copyright notice and this permission notice shall be included in
 12 | all copies or substantial portions of the Software.
 13 | 
 14 | The end-user documentation included with the redistribution, if any, must 
 15 | include the following acknowledgment: "This product includes software developed 
 16 | by RevSystems, Inc (http://www.revsystems.com/) and its contributors", in the 
 17 | same place and form as other third-party acknowledgments. Alternately, this 
 18 | acknowledgment may appear in the software itself, in the same form and location 
 19 | as other such third-party acknowledgments.
 20 | 
 21 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 22 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 23 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 24 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 25 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 26 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 27 | THE SOFTWARE.
 28 | */
 29 | (function($) {
 30 | 
 31 | $.fx.prototype.oldUpdate = $.fx.prototype.update;
 32 | $.fx.prototype.update = function() {
 33 |   result = this.oldUpdate.apply(this, arguments);
 34 |   $(this.elem).trigger("cssupdate");
 35 |   return result;
 36 | }
 37 | 
 38 | function displayChangeWrap(funcName, trigger, reqArgs, reqFunc) {
 39 |   $.fn["old_" + funcName] = $.fn[funcName];
 40 |   $.fn[funcName] = function() {
 41 |     var $this = $(this);
 42 |     var $par = $this.parent();
 43 |     result = $.fn["old_" + funcName].apply(this, arguments);
 44 |     var args = arguments;
 45 |     if(arguments.length >= reqArgs && (!reqFunc || reqFunc.call(this, args))) {
 46 |       if(funcName == "remove") {
 47 |         $par.trigger(trigger);
 48 |       }
 49 |       else if($this[0].nodeName.toLowerCase() != "body") {
 50 |         $this.trigger(trigger);
 51 |       }
 52 |       return $this;
 53 |     }
 54 |     return result;
 55 |   }
 56 | }
 57 | 
 58 | displayChangeWrap("css", "cssupdate", 1, function(args) { return args.length >= 2 || typeof args[0] === "object"; });
 59 | displayChangeWrap("attr", "domupdate", 2, function(args) { return args.length == 2; });
 60 | displayChangeWrap("append", "domupdate", 1);
 61 | displayChangeWrap("prepend", "domupdate", 1);
 62 | displayChangeWrap("before", "domupdate", 1);
 63 | displayChangeWrap("after", "domupdate", 1);
 64 | displayChangeWrap("text", "domupdate", 1);
 65 | displayChangeWrap("html", "domupdate", 1);
 66 | displayChangeWrap("empty", "domupdate", 0);
 67 | displayChangeWrap("remove", "domupdate", 0);
 68 | displayChangeWrap("removeAttr", "domupdate", 1);
 69 | 
 70 | $.fn.tie = function(lhsProp, $rhs, rhsProp, options) {
 71 | 
 72 |   options = $.extend({
 73 |     globalListener: false,
 74 |     onImgLoad: false,
 75 |     onResize: false,
 76 |     onScroll: false,
 77 |     proxyListener: false
 78 |   }, options);
 79 |   
 80 |   if(!rhsProp) rhsProp = lhsProp;
 81 |   $rhs = $($rhs);
 82 |   var proxyListener = $(options.proxyListener);
 83 |   if(options.globalListener) {
 84 |     proxyListener = $("body");
 85 |   }
 86 |   else if(!proxyListener) {
 87 |     proxyListener = $rhs.parent();
 88 |   }
 89 |   
 90 |   return $(this).each(function() {
 91 |     var $lhs = $(this);
 92 |     var rhsIsAncestor = $lhs[0] == $rhs[0];
 93 |     $lhs.parents().each(function() { if(this == $rhs[0]) rhsIsAncestor = true; });
 94 |     function updateProp(e) {
 95 |       $lhs.old_css(lhsProp, $.isFunction(rhsProp) ? rhsProp.call($rhs) : $rhs.old_css(rhsProp));
 96 |       if(!rhsIsAncestor && !options.globalListener && !options.proxyListener) {
 97 |         $lhs.trigger("cssupdate");
 98 |       }
 99 |     }
100 |     function triggerProxy() { $(this).trigger("cssupdate"); }
101 |     function destroy() {
102 |       proxyListener.unbind("cssupdate", updateProp);
103 |       proxyListener.unbind("domupdate", updateProp);
104 |       $rhs.unbind("cssupdate", updateProp);
105 |       $rhs.unbind("domupdate", updateProp);
106 |       $lhs.unbind("destroy.tie", destroy);
107 |       $(window).unbind("resize", updateProp);
108 |       $(window).unbind("scroll", updateProp);
109 |       $("img").unbind("load", triggerProxy);
110 |     }
111 |     updateProp();
112 |     if(rhsIsAncestor || options.globalListener || options.proxyListener) {
113 |       proxyListener.bind("cssupdate", updateProp);
114 |       proxyListener.bind("domupdate", updateProp);
115 |     }
116 |     else {
117 |       $rhs.bind("cssupdate", updateProp);
118 |       $rhs.bind("domupdate", updateProp);
119 |     }
120 |     if(options.globalListener && options.onImgLoad) {
121 |       $("img").bind("load", triggerProxy);
122 |     }
123 |     else if(options.onImgLoad) {
124 |       $rhs.find("img").bind("load", triggerProxy);
125 |     }
126 |     $lhs.bind("destroy.tie", destroy);
127 |     if(options.onResize) $(window).bind("resize", updateProp);
128 |     if(options.onScroll) $(window).bind("scroll", updateProp);
129 |   });
130 | }
131 | 
132 | $.fn.untie = function() { return $(this).trigger("destroy"); }
133 | 
134 | $.fn.cssupdate = function(handler) {
135 |   if(!handler) $(this).trigger("cssupdate");
136 |   else $(this).bind("cssupdate", handler);
137 | }
138 | 
139 | $.fn.domupdate = function(handler) {
140 |   if(!handler) $(this).trigger("domupdate");
141 |   else $(this).bind("domupdate", handler);
142 | }
143 | 
144 | })($);


--------------------------------------------------------------------------------
/lib/jquerytie/jquery.tie.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2010 RevSystems, Inc
 3 | 
 4 | Permission is hereby granted, free of charge, to any person obtaining a copy
 5 | of this software and associated documentation files (the "Software"), to deal
 6 | in the Software without restriction, including without limitation the rights
 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the Software is
 9 | furnished to do so, subject to the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be included in
12 | all copies or substantial portions of the Software.
13 | 
14 | The end-user documentation included with the redistribution, if any, must 
15 | include the following acknowledgment: "This product includes software developed 
16 | by RevSystems, Inc (http://www.revsystems.com/) and its contributors", in the 
17 | same place and form as other third-party acknowledgments. Alternately, this 
18 | acknowledgment may appear in the software itself, in the same form and location 
19 | as other such third-party acknowledgments.
20 | 
21 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
27 | THE SOFTWARE.
28 | */
29 | (function(b){b.fx.prototype.oldUpdate=b.fx.prototype.update;b.fx.prototype.update=function(){result=this.oldUpdate.apply(this,arguments);b(this.elem).trigger("cssupdate");return result};function a(e,d,f,c){b.fn["old_"+e]=b.fn[e];b.fn[e]=function(){var i=b(this);var h=i.parent();result=b.fn["old_"+e].apply(this,arguments);var g=arguments;if(arguments.length>=f&&(!c||c.call(this,g))){if(e=="remove"){h.trigger(d)}else{if(i[0].nodeName.toLowerCase()!="body"){i.trigger(d)}}return i}return result}}a("css","cssupdate",1,function(c){return c.length>=2||typeof c[0]==="object"});a("attr","domupdate",2,function(c){return c.length==2});a("append","domupdate",1);a("prepend","domupdate",1);a("before","domupdate",1);a("after","domupdate",1);a("text","domupdate",1);a("html","domupdate",1);a("empty","domupdate",0);a("remove","domupdate",0);b.fn.tie=function(g,c,e,d){d=b.extend({globalListener:false,onImgLoad:false,onResize:false,onScroll:false,proxyListener:false},d);if(!e){e=g}c=b(c);var f=b(d.proxyListener);if(d.globalListener){f=b("body")}else{if(!f){f=c.parent()}}return b(this).each(function(){var i=b(this);var h=i[0]==c[0];i.parents().each(function(){if(this==c[0]){h=true}});function l(m){i.old_css(g,b.isFunction(e)?e.call(c):c.old_css(e));if(!h&&!d.globalListener&&!d.proxyListener){i.trigger("cssupdate")}}function k(){b(this).trigger("cssupdate")}function j(){f.unbind("cssupdate",l);f.unbind("domupdate",l);c.unbind("cssupdate",l);c.unbind("domupdate",l);i.unbind("destroy.tie",j);b(window).unbind("resize",l);b(window).unbind("scroll",l);b("img").unbind("load",k)}l();if(h||d.globalListener||d.proxyListener){f.bind("cssupdate",l);f.bind("domupdate",l)}else{c.bind("cssupdate",l);c.bind("domupdate",l)}if(d.globalListener&&d.onImgLoad){b("img").bind("load",k)}else{if(d.onImgLoad){c.find("img").bind("load",k)}}i.bind("destroy.tie",j);if(d.onResize){b(window).bind("resize",l)}if(d.onScroll){b(window).bind("scroll",l)}})};b.fn.untie=function(){return b(this).trigger("destroy")};b.fn.cssupdate=function(c){if(!c){b(this).trigger("cssupdate")}else{b(this).bind("cssupdate",c)}};b.fn.domupdate=function(c){if(!c){b(this).trigger("domupdate")}else{b(this).bind("domupdate",c)}}})($);


--------------------------------------------------------------------------------