/plugins/forms-controls/tabselect/index.html
HTML | 424 lines | 253 code | 65 blank | 106 comment | 0 complexity | 8045b4c80ba7679683ae759dd58e8a52 MD5 | raw file
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
- <meta http-equiv="imagetoolbar" content="no" />
- <title>TabSelect jQuery Plugin</title>
- <link href='http://fonts.googleapis.com/css?family=Quattrocento' rel='stylesheet' type='text/css'>
- <link href="prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="prettify.js"></script>
- <link rel="stylesheet" type="text/css" href="global.css" />
- <!--
- http://iwantaneff.in/repo/
-
-
-
-
- .g`
- j#
- f ]0#
- ,& M0#
- ]0 00#
- 00 00#
- , #00 000f
- y# ]000 0000
- _0^ 0000 M0000
- p00 0000 0000&_
- j00f _0000 400000g
- _000f 00000_ M00000&_
- .0000f 000008 ]000000gq p
- ]0000f M00000f `M000000NN,, ,j0!
- 00000f 00000M *M00000000MMMMMMMMM0M`
- 00000f 000000# ]@00000000000000M
- 000000f ]000000I !@FM00@M@F
- 000000f ~0000000g
- 0000000 #00000008
- 0000000 00000000&
- 0000000# #00000000, +
- 00000000r ^000000000pg _pf
- 000000001 ~0000000000&g_ _j0^
- ~00000000_ `R0000000000&g_ _j00~
- 000000000, ~000000000000Ngg_, __jg000!
- 400000000& `M000000000000000MM&,,,,,,,jNN00000M`
- *000000000M `#00000000000000000000000000000M`
- 0000000000#, "M000000000000000000000000M!
- 00000000000 !@Q0000000000000000@@!
- ]00000000000, `MMFMMFMMFMMF'
- #00000000000L
- 000000000000#,
- 0000000000000p y
- `00000000000000N_ _p
- 000000000000000g__ _j0f
- #000000000000000&p_ _j0M^
- ~00000000000000000gg_ _jg000f
- M0000000000000000000M1_, __jN0000M`
- ]M000000000000000000000MMMM,,,,,,,,,,#MMM0000000T
- "0000000000000000000000000000000000000000000M
- M00000000000000000000000000000000000000M
- MM0000000000000000000000000000000009
- ~#00000000000000000000000000P~!
- ~~M000000000000000000M~~
- ~~~~~~~~~~'
-
-
-
-
- -->
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>window.jQuery || document.write('<script src="../../../jquery.1.7.2.min.js"><\/script>')</script>
- <script type="text/javascript" src="jquery.tabselect-0.2.js"></script>
- <style type="text/css">
- <!--
- div.demo span span {
- font-weight: normal;
- letter-spacing: 1px;
- text-decoration: none;
- padding: 2px;
- padding-left: 4px;
- padding-right: 4px;
- padding-bottom: 1px;
- margin-right: 6px;
-
- cursor: hand;
- cursor: pointer;
-
- text-shadow: 0 1px 1px rgba(0,0,0,.3);
- -webkit-border-radius: .2em;
- -moz-border-radius: .2em;
- border-radius: .2em;
- -webkit-box-shadow: 0 1px 2px rgba(160,160,160,1);
- -moz-box-shadow: 0 1px 2px rgba(160,160,160,1);
- box-shadow: 0 1px 2px rgba(160,160,160,1);
- }
- div.demo span.active {
- background: #99cc33;
- color: #fff;
- border: 1px #66aa00 solid;
- }
- div.demo span.active:hover {
- background: #66aa00;
- color: #fff;
- border: 1px #338800 solid;
- }
- div.demo span.inactive {
- background: #ddd;
- color: #888;
- border: 1px #bbb solid;
- }
- div.demo span.inactive:hover {
- background: #bbb;
- color: #fff;
- border: 1px #888 solid;
- }
- -->
- </style>
- <script type="text/javascript">
-
- var languages = ["de","fr","en","es","it"];
- var cars = ["Audi","Fiat","Ford","Peugeot","Ferrari"];
- $(document).ready(function(){
-
- prettyPrint(); // Google Code Prettify
- $('#langtabs').tabSelect({
- tabElements: languages,
- selectedTabs: [ 'de', 'en' ]
- });
- $('#cartabs1').tabSelect({
- tabElements: cars,
- selectedTabs: [ ]
- });
- $('#cartabs2').tabSelect({
- tabElements: cars,
- selectedTabs: 'all'
- });
- $('#cartabs3').tabSelect({
- tabElements: cars,
- formElement: '#myinput'
- });
- $('#cartabs4').tabSelect({
- tabElements: cars,
- formElement: '#myselect'
- });
- $('#cartabs5').tabSelect({
- tabElements: cars,
- formElement: '#myhiddeninput',
- onChange: function(selection){
- console.log($('#myhiddeninput').val());
- }
- });
- $('#cartabs6').tabSelect({
- tabElements: cars,
- selectedTabs: [ 'Fiat', 'Ford' ]
- });
- });
-
- </script>
- </head>
- <body>
- <div id="pluginnav">
- <div>
- <a href="index.php" class="overview">jQuery Plugins by Fredi Bach:</a>
- <a href="inputnotes.php">InputNotes</a>,
- <a href="autoanchors.php">AutoAnchors</a>,
- <a href="randomclass.php">RandomClass</a>,
- <a href="removeoverflow.php">RemoveOverflow</a>,
- <a href="aparthide.php">aPartHide</a>,
- <a href="tabselect.php">TabSelect</a>,
- <a href="defaultstagger.php">DefaultsTagger</a>,
- <a href="selectswitcher.php">SelectSwitcher</a>,
- <a href="livingfade.php">LivingFade</a>,
- <a href="slideinreplace.php">SlideInReplace</a>,
- <a href="waveanimate.php">WaveAnimate</a>
- </div>
- </div> <div id="container">
- <h1>TabSelect jQuery Plugin</h1>
-
- <p>
- A plugin to select one or more array or form entries visually, for example to filter a list or replace a multiselect form element.
- </p>
- <p class="contentnav">
- <a href="#demo">Demo</a>
- <a href="#usage">Usage</a>
- <a href="#styling">Styling</a>
- <a href="#download">Download</a>
- <a href="#compatibility">Compatibility</a>
- <a href="#changelog">Changelog</a>
- </p>
-
- <h2 id="demo">Demo</h2>
- <p>
- In this first demo you can see the basic usage of the plugin. You have an array of possible values and you define the initial selection.
- If you click on one of the options, the state toggles:
- </p>
- <div class="demo">
- <span id="langtabs"></span>
- </div>
- <p>
- In the next demo we use a different array with car manufacturers. You can use the plugin as often as you want and everytime with different settings.
- In this case we initialize the plugin without anything selected:
- </p>
- <div class="demo">
- <span id="cartabs1"></span>
- </div>
-
- <p>
- You can of course start with everything selected, it's up to you:
- </p>
-
- <div class="demo">
- <span id="cartabs2"></span>
- </div>
-
- <p>
- In all above examples, we've defined the selection in the initialization of the plugin. Another way to do it is by using
- a text input as the source for the selection:
- </p>
-
- <div class="demo">
- <input type="text" id="myinput" name="myinput" value="Audi,Ford" size=30>
- <span id="cartabs3"></span>
- </div>
-
- <p>
- If you toggle an option, the text changes automatically, in other words, you can use that text field in a form to submit the selection. In such a case
- you would of course hide the text field first. Multi selects are fine as well, if you don't want comma separated returns:
- </p>
-
- <div class="demo">
- <select id="myselect" name="myselect" MULTIPLE SIZE=5>
- <option value="Audi" selected>Audi</option>
- <option value="Fiat">Fiat</option>
- <option value="Ford">Ford</option>
- <option value="Peugeot">Peugeot</option>
- <option value="Ferrari" selected>Ferrari</option>
- </select>
- <span id="cartabs4"></span>
- </div>
-
- <p>
- Here's one where the textfield is hidden and this example has an additional onChange callback that outputs the selection in your
- firebug console:
- </p>
-
- <div class="demo">
- <input type="hidden" id="myhiddeninput" name="myhiddeninput" value="Audi,Ford">
- <span id="cartabs5"></span>
- </div>
-
- <p>
- Additionally the plugin supports slecting all or selecting no options as demonstrated in this demo:
- </p>
-
- <div class="demo">
- <span id="cartabs6"></span>
-
- <a href="javascript:void(null);" onclick="$('#cartabs6').data('tabSelect').selectAll();">select all</a>
-
- <a href="javascript:void(null);" onclick="$('#cartabs6').data('tabSelect').deselectAll();">select none</a>
- </div>
-
- <h2 id="usage">Usage</h2>
-
- <p>This is how we called the plugin for the first demo (the one with the languages):</p>
- <pre class="prettyprint lang-js">
- var languages = ["de","fr","en","es","it"];
- $('#langtabs').tabSelect({
- tabElements: languages,
- selectedTabs: [ 'de', 'en' ]
- });
- </pre>
-
- <p>This is how we made the first car example, note the empty selection:</p>
-
- <pre class="prettyprint lang-js">
- var cars = ["Audi","Fiat","Ford","Peugeot","Ferrari"];
- $('#cartabs1').tabSelect({
- tabElements: cars,
- selectedTabs: [ ]
- });
- </pre>
-
- <p>This is how you select all:</p>
- <pre class="prettyprint lang-js">
- $('#cartabs2').tabSelect({
- tabElements: cars,
- selectedTabs: 'all'
- });
- </pre>
- <p>Check the source of this page for the rest of the demos. They are pretty straight forward.</p>
-
- <h2 id="styling">Styling</h2>
-
- <p>
- You're completely free to style your elements. Default setting for the tabs is a span element, but you can change that in the settings
- (check the plugin source, the default settings are right at the top). Here's the styling I used for the demos:
- </p>
- <pre class="prettyprint lang-js">
- div.demo span span {
- font-weight: normal;
- letter-spacing: 1px;
- text-decoration: none;
- padding: 2px;
- padding-left: 4px;
- padding-right: 4px;
- padding-bottom: 1px;
- margin-right: 6px;
-
- cursor: hand;
- cursor: pointer;
-
- text-shadow: 0 1px 1px rgba(0,0,0,.3);
- -webkit-border-radius: .2em;
- -moz-border-radius: .2em;
- border-radius: .2em;
- -webkit-box-shadow: 0 1px 2px rgba(160,160,160,1);
- -moz-box-shadow: 0 1px 2px rgba(160,160,160,1);
- box-shadow: 0 1px 2px rgba(160,160,160,1);
- }
- div.demo span.active {
- background: #99cc33;
- color: #fff;
- border: 1px #66aa00 solid;
- }
- div.demo span.active:hover {
- background: #66aa00;
- color: #fff;
- border: 1px #338800 solid;
- }
- div.demo span.inactive {
- background: #ddd;
- color: #888;
- border: 1px #bbb solid;
- }
- div.demo span.inactive:hover {
- background: #bbb;
- color: #fff;
- border: 1px #888 solid;
- }
- </pre>
- <h2 id="download">Download</h2>
-
- <p>Current version: <a href="js/jquery.tabselect-0.2.js">jquery.tabselect-0.2.js</a> (3.9k not minified)</p>
-
- <h2 id="compatibility">Compatibility</h2>
-
- <p>
- Tested in:
- <ul>
- <li>Internet Explorer 6 and 7</li>
- <li>Firefox 3.5+</li>
- <li>Safari 4+</li>
- <li>Google Chrome</li>
- <li>Opera 9.6</li>
- </ul>
- With:
- <ul>
- <li>jQuery 1.5</li>
- <li>jQuery 1.4</li>
- <li>jQuery 1.3.2</li>
- </ul>
- <p>There really is nothing complicated in there, so expect the plugin to work in older browsers as well.</p>
- </p>
-
- <h2 id="changelog">Changelog</h2>
-
- <p>
- <ul>
- <li>0.2: First official release</li>
- </ul>
- </p>
-
- <div id="footer">Copyright (c) 2011 Fredi Bach - <a href="http://fredibach.ch" target="_blank">fredibach.ch</a></div>
-
- </div>
- <script type="text/javascript">
- var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
- document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
- </script>
- <script type="text/javascript">
- try {
- var pageTracker = _gat._getTracker("UA-15334778-1");
- pageTracker._trackPageview();
- } catch(err) {}</script>
- </body>
- </html>