Permalink
Browse files

First commit

  • Loading branch information...
0 parents commit 1cd6bec6ebf85ce553295518765d8cd2c7b71956 @lorenzos committed Feb 29, 2012
206 Demo.html
@@ -0,0 +1,206 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+ <title>FancySelect demo page</title>
+
+ <!-- Include Mootools and FancySelect -->
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
+ <script type="text/javascript" src="Source/FancySelect.js"></script>
+ <link type="text/css" href="Source/FancySelect.css" rel="stylesheet">
+
+ <script type="text/javascript">
+
+ window.addEvent('domready', function() {
+
+ // Images + Text
+ $('fruits').fancySelect();
+
+ // Images only
+ $('yummy').fancySelect({
+ showText: false,
+ showImages: true,
+ className: 'fancy-select fancy-select-big'
+ });
+
+ // Text only
+ $('textonly').fancySelect({
+ showText: true,
+ showImages: false
+ });
+
+ // Attach / Detach buttons (you don't need this)
+ $$('button.attach').addEvent('click', function() {
+ var select = this.getPrevious('select');
+ if (select.getStyle('display') == 'none') {
+ select.get('fancySelect').detach();
+ this.set('text', 'Attach');
+ this.getNext('button.toggle').set('disabled', true);
+ } else {
+ select.get('fancySelect').attach();
+ this.set('text', 'Detach');
+ this.getNext('button.toggle').set('disabled', false);
+ }
+ });
+
+ // Toggle buttons (you don't need this)
+ $$('button.toggle').addEvent('click', function() {
+ var select = this.getPrevious('select');
+ if (select.getStyle('display') == 'none') select.fancySelectToggle();
+ });
+
+ });
+
+ </script>
+
+ <style type="text/css">
+
+ /* These rules does not style the FancySelect.
+ * See Source/FancySelect.css for the dropdown styling. */
+
+ body {
+ font-family: sans-serif;
+ font-size: 13px;
+ }
+
+ div {
+ margin: 20px 10px;
+ }
+
+ p {
+ color: #666666;
+ margin: 20px 10px;
+ clear: both;
+ }
+
+ p b {
+ color: #333333;
+ }
+
+ a {
+ font-weight: bold;
+ color: #3344FF;
+ }
+
+ a:hover {
+ font-weight: bold;
+ color: #6677FF;
+ }
+
+ pre {
+ font-size: 12px;
+ padding: 10px 15px;
+ background-color: #eeffef;
+ border: 1px solid #cceedf;
+ margin: 10px 40px;
+ }
+
+ pre.javascript {
+ background-color: #eeefff;
+ border: 1px solid #ccdfee;
+ }
+
+ </style>
+
+</head>
+<body>
+
+ <div><h1>FancySelect demo page</h1></div>
+
+ <p>
+ A non-obtrusive <b>image dropdown menu</b> that extends and replaces
+ a standard HTML Select control.<br>
+ Requires Mootools Core 1.4.1 or later.<br>
+ Download and HowTo on <a href="http://www.mootools.net/forge/p/fancyselect">Mootools Forge</a>, sources and issues on
+ <a href="https://github.com/lorenzos/FancySelect">GitHub</a>, full documentation
+ <a href="https://github.com/lorenzos/FancySelect/wiki/Docs">here</a>.
+ </p>
+
+ <p>
+
+ <b>Simplest example</b>, pick a fruit: &nbsp;
+
+ <select name="fruits" id="fruits">
+ <option value="1" data-image="Graphics/Fruits/Apple.png">Apple</option>
+ <option value="2" data-image="Graphics/Fruits/Banana.png">Banana</option>
+ <option value="3" data-image="Graphics/Fruits/Cherries.png">Cherries</option>
+ <option value="4" data-image="Graphics/Fruits/Lemon.png">Lemon</option>
+ <option value="5" data-image="Graphics/Fruits/Strawberry.png">Strawberry</option>
+ <option value="6" data-image="Graphics/Fruits/Watermelon.png">Watermelon</option>
+ </select>
+
+ &nbsp; <button class="attach" type="button">Detach</button>
+ <button class="toggle" type="button">Toggle</button>
+
+ </p>
+
+ <pre class="html">&lt;select name=&quot;fruits&quot; id=&quot;fruits&quot;&gt;
+ &lt;option value=&quot;1&quot; data-image=&quot;Graphics/Fruits/Apple.png&quot;&gt;Apple&lt;/option&gt;
+ &lt;option value=&quot;2&quot; data-image=&quot;Graphics/Fruits/Banana.png&quot;&gt;Banana&lt;/option&gt;
+ ...
+&lt;/select&gt;</pre>
+ <pre class="javascript">$('fruits').fancySelect();</pre>
+
+ <p>
+
+ <b>Only pictures</b>, yummy! &nbsp;
+
+ <select name="yummy" id="yummy">
+ <option value="a" data-image="Graphics/Yummy/Cake.png" data-alt="This is a cake">Cake</option>
+ <option value="b" data-image="Graphics/Yummy/Cheesecake.png" data-alt="Cheesecake!">Cheesecake</option>
+ <option value="c" data-image="Graphics/Yummy/Croissant.png" data-alt="Croissant">Croissant</option>
+ <option value="d" data-image="Graphics/Yummy/Donut.png" data-alt="Donut">Donut</option>
+ </select>
+
+ &nbsp; <button class="attach" type="button">Detach</button>
+ <button class="toggle" type="button">Toggle</button>
+
+ </p>
+
+ <pre class="html">&lt;select name=&quot;yummy&quot; id=&quot;yummy&quot;&gt;
+ &lt;option value=&quot;a&quot; data-image=&quot;Graphics/Fruit/Cake.png&quot; data-alt=&quot;This is a cake&quot;&gt;Cake&lt;/option&gt;
+ &lt;option value=&quot;b&quot; data-image=&quot;Graphics/Fruit/Cheesecake.png&quot; data-alt=&quot;Cheesecake!&quot;&gt;Cheesecake&lt;/option&gt;
+ ...
+&lt;/select&gt;</pre>
+ <pre class="javascript">$('yummy').fancySelect({
+ showText: false,
+ showImages: true,
+ className: 'fancy-select fancy-select-big'
+});</pre>
+
+ <p>
+
+ This is a <b>text-only</b> version: &nbsp;
+
+ <select name="textonly" id="textonly">
+ <option value="1">Lorem ipsum</option>
+ <option value="2">Dolor sit amet</option>
+ <option value="3">Consectetuer</option>
+ <option value="4">Adipiscing </option>
+ </select>
+
+ &nbsp; <button class="attach" type="button">Detach</button>
+ <button class="toggle" type="button">Toggle</button>
+
+ </p>
+
+ <pre class="html">&lt;select name=&quot;textonly&quot; id=&quot;textonly&quot;&gt;
+ &lt;option value=&quot;1&quot;&gt;Lorem ipsum&lt;/option&gt;
+ &lt;option value=&quot;2&quot;&gt;Dolor sit amet&lt;/option&gt;
+ ...
+&lt;/select&gt;</pre>
+ <pre class="javascript">$('textonly').fancySelect({
+ showText: true,
+ showImages: false
+});</pre>
+
+ <div>
+ <p>
+ Icons from
+ <a href="http://kevinandersson.deviantart.com/art/Fruits-Illustrated-64938333" target="_blank">Fruits Illustrated set</a>
+ and <a href="http://www.iconeden.com/icon/yummy-free-icons.html" target="_blank">Yummy free set</a>.
+ </p>
+ </div>
+
+</body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,9 @@
+
+"Fruit Illustrated" icons
+=========================
+
+http://kevinandersson.deviantart.com/
+http://kevinandersson.deviantart.com/art/Fruits-Illustrated-64938333
+
+Some rights reserved.
+This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,9 @@
+
+"Yummy" icons
+=============
+
+http://www.iconeden.com/
+http://www.iconeden.com/icon/yummy-free-icons.html
+
+The set is free for personal and commercial uses.
+Licence details: http://www.iconeden.com/icon/free/get/yummy-free-icons
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,91 @@
+FancySelect
+===========
+
+A non-obtrusive image dropdown menu that extends and replaces a standard
+HTML Select control. Requires Mootools Core 1.4.1 or later.
+
+![Screenshot](https://github.com/lorenzos/FancySelect/raw/master/Graphics/logo.png)
+
+
+How to use
+----------
+
+Just create a *<select>* element in HTML, and add a data-image
+attribute to *<option>*, specifing image paths:
+
+ #HTML
+
+ <select name="fruits" id="fruits">
+ <option value="1" data-image="apple.png">Apple</option>
+ <option value="2" data-image="banana.png">Banana</option>
+ <option value="3" data-image="cherries.png">Cherries</option>
+ ...
+ </select>
+
+Then, in your Javascript:
+
+ #JS
+
+ $('fruits').fancySelect();
+
+About **CSS styling**. The script comes with a sample CSS file.
+You can easily change styles such as colors, backgrounds, borders, font
+and dimensions to customize FancySelect look, but be careful about the
+layout properties - some of them are essential to make FancySelect works
+as expected.
+
+
+Docs
+----
+
+**Implements:** Options, Events
+
+**Syntax:**
+
+ #JS
+
+ var myFancySelect = new FancySelect(element, options);
+
+- **element**: A *<select>* DOM element or ID.
+- **options**: (*object*) Options for the class. They are all listed below.
+
+**Options:**
+
+- **showText**: If `TRUE` (default) keeps text in the dropdown menu.
+- **showImages**: If `TRUE` (default) show images in the dropdown menu.
+- **className**: A class name for CSS styling, default `'fancy-select'`.
+- **animateFade**: If `TRUE` (default) animate the dropdown menu appearance.
+- **fx**: An object for additional `Fx` options (default `{'duration': 'short'}`).
+
+**Events:**
+
+- **show**: The dropdown menu appears.
+- **hide**: The dropdown menu disappears.
+- **attach**: FancySelect just replaced the *<select>* DOM element.
+- **detach**: The *<select>* DOM element is back.
+
+**Methods:**
+
+- **attach()**: Replace the *<select>* DOM element with FancySelect.
+- **detach()**: Bring the *<select>* DOM element back.
+- **select(value)**: Select a value.
+- **show()**: Show the dropdown menu.
+- **hide()**: Hide the dropdown menu.
+- **toggle()**: Show/hide the dropdown menu.
+
+**Element and Elements methods:**
+
+You can use some shortcut methods on **Element** and **Elements** for creating and showing the FancySelect dropdown.
+
+ #JS
+
+ $$('select').fancySelect(options); // Attach FancySelect to all elements
+ $('mySelect').fancySelectShow(); // Show the dropdown menu.
+ var myFancySelect = $('mySelect').get('fancySelect'); // Get instance
+
+- **Elements.fancySelect(options)**: Creates a new instance of FancySelect on elements.
+- **Element.fancySelect(options)**: Creates a new instance of FancySelect on the element.
+- **Element.fancySelectShow()**: Show the FancySelect dropdown on the element.
+- **Element.fancySelectHide()**: Hide the FancySelect dropdown on the element.
+- **Element.fancySelectToggle()**: Toggles the FancySelect dropdown on the element.
+- **Element.get('fancySelect')**: Retrieves the FancySelect instance of the element.
Oops, something went wrong.

0 comments on commit 1cd6bec

Please sign in to comment.