initial

FezVrasta · 21b2bb08b1b4fd476202090ab9d4bcba97269d83 · Federico Zivolo committed Nov 14, 2014 · Nov 14, 2014 · 21b2bb0
1 parent 8bb9e3d
commit 21b2bb08b1b4fd476202090ab9d4bcba97269d83
Unified Split

Showing with 451 additions and 0 deletions.

+54 −0 README.md

+88 −0 index.html

+59 −0 jquery.dropdown.css

+250 −0 jquery.dropdown.js
diff --git a/README.md b/README.md
@@ -0,0 +1,54 @@
+# Dropdown.js
+
+Finally a dropdown plugin that transforms select inputs in nice dropdowns and does not drive you crazy.
+
+I've always wondered why the most famous plugins (Chosen and Selectize) are so huge and full of useless/pointless features?  
+What do you need from a dropdown plugin?
+
+### Initialize it 
+
+Nice! I've found `<your_fav_plugin_here>` and I want to use it to style all my select inputs! But wha happens if I dinamically add a new element? I must init it manually.. Doh!
+
+Dropdown.js get rid of this problem, in fact you just need to run the plugin **one time** and it will take care of every new input which matches your rules.
+
+    // Init any existing .select element and then watch for new .select elements 
+    // added dinamically by some black magic casted by a evil wizard
+    $(".select").dropdown({ "autoinit" : ".select" });
+    
+Now what happens? We want our dropdowns to act like a boss.. emh like a standard select input. If it's a single select you want first element, or the selected one, already selected.  
+We want even keyboard support, so if we press tab, it get opened and with tab you can select the options etc etc...
+
+### Style it
+
+What else? Maybe we want to be able to style our dropdown with our own classes so that we don't have to hack the plugin to make it looks good? 
+
+    $(".select").dropdown({ "dropdownClass": "my-dropdown", "optionClass": "my-option awesome" });
+    
+With this command we init every `.select` element (yes they are initialized always in the same way) and the `my-dropdown` class will be applied to the dropdown wrapper (ex: `<select>`) and `my-option awesome` will be applied to the options (ex: `<option>`).
+
+### Please don't fill my DOM with thousand of DIVs!!!
+
+Don't worry friend, this is the markup used by Dropdown.js:  
+
+    <div class="dropdownjs">
+      <input type="text" readonly placeholder="This is a placeholder">
+      <ul>
+        <li value="foobar" tabindex="0">My foobar...</li>
+        <li value="great" selected class="selected" tabindex="0">...is great!</li>
+      </ul>
+    </div>
+    
+### Callbacks
+
+Psstt, ya need some callback?  
+**Dropdown.js** supports callbacks, they are called on each element initialized, here an example:
+
+    $(".select").dropdown({ "callback": function($dropdown) {
+      // $dropdown is the shiny new generated dropdown element!
+      $dropdown.fadeIn("slow");
+    });
+    
+### Dropdown position
+
+Dropdowns are placed in the best position, if a select input is placed on bottom of the page, the dropdown will open above it.
+
diff --git a/index.html b/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
+        <link href="https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/css/material-wfont.min.css" rel="stylesheet">
+        <link href="https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/css/ripples.min.css" rel="stylesheet">
+
+        <link href="jquery.dropdown.css" rel="stylesheet">
+    </head>
+    <body>
+
+        <button>Click</button>
+
+        <select multiple class="select form-control floating-label" placeholder="This is a placeholder">
+            <option></option>
+            <option selected>Foobar</option>
+            <option selected>Is great</option>
+            <option>Foobar</option>
+            <option>Is great</option>
+            <option>Foobar</option>
+            <option>Is great</option>
+            <option selected>Foobar</option>
+            <option selected>Is great</option>
+            <option>Foobar</option>
+            <option>Is great</option>
+            <option>Foobar</option>
+            <option>Is great</option>
+            <option selected>Foobar</option>
+            <option selected>Is great</option>
+            <option>Foobar</option>
+            <option>Is great</option>
+            <option>Foobar</option>
+            <option>Is great</option>
+            <option selected>Foobar</option>
+            <option selected>Is great</option>
+            <option>Foobar</option>
+            <option>Is great</option>
+            <option>Foobar</option>
+            <option>Is great</option>
+            <option selected>Foobar</option>
+            <option selected>Is great</option>
+            <option>Foobar</option>
+            <option>Is great</option>
+            <option>Foobar</option>
+            <option>Is great</option>
+        </select>
+
+        <br><br><br>
+        <br><br><br>
+        <br><br><br>
+        <select class="select" placeholder="This is a placeholder">
+            <option></option>
+            <option>Foobar</option>
+            <option value="hi..." selected>Is great</option>
+        </select>
+
+
+
+
+        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+        <script src="https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/js/material.min.js"></script>
+        <script src="https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/js/ripples.min.js"></script>
+
+        <script src="jquery.dropdown.js"></script>
+        <script>
+            $.material.init();
+
+            $(document).ready(function() {
+                $(".select").dropdown({"optionClass": "withripple"});
+            });
+
+            $("button").click(function() {
+                $("body").append("<select class=select><option>hey</option></select>");
+            });
+
+        </script>
+
+
+        <style>
+            body {
+                width: 200px;
+                margin: 100px;
+            }
+        </style>
+
+    </body>
+</html>
+
diff --git a/jquery.dropdown.css b/jquery.dropdown.css
@@ -0,0 +1,59 @@
+.dropdownjs {
+    position: relative;
+}
+.dropdownjs  * {
+    box-sizing: border-box;
+}
+.dropdownjs > input {
+    width: 100%;
+    cursor: pointer !important;
+}
+.dropdownjs > input.focus ~ ul {
+    transform: scale(1);
+}
+.dropdownjs > ul {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    min-width: 200px;
+    transform: scale(0);
+    z-index: 10000;
+}
+.dropdownjs > ul[placement=top-left] {
+    transform-origin: bottom left;
+    bottom: 0;
+    left: 0;
+}
+.dropdownjs > ul[placement=bottom-left] {
+    transform-origin: top left;
+    top: 0;
+    left: 0;
+}
+.dropdownjs > ul  > li {
+    list-style: none;
+    padding: 10px 20px;
+}
+
+
+/* Theme */
+.dropdownjs > input {
+    cursor: pointer;
+}
+.dropdownjs > ul {
+    background: #FFF;
+    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
+    transition: transform 0.2s ease-out;
+    padding: 10px;
+    overflow: auto;
+}
+.dropdownjs > ul > li {
+    cursor: pointer;
+}
+.dropdownjs > ul > li.selected,
+.dropdownjs > ul > li:active {
+    background-color: #eaeaea;
+}
+.dropdownjs > ul > li:focus {
+    outline: 0;
+    background-color: #d4d4d4;
+}