/dropdown.js

Permalink
Browse files

made the package nicer

1 parent 007d142 commit caa8336ea747402edb487bab65f08e9c7517345e FezVrasta committed Dec 29, 2014
Unified Split
Showing with 391 additions and 360 deletions.
  1. +1 −3 .gitignore
  2. +29 −0 bower.json
  3. +94 −84 index.html
  4. +29 −29 jquery.dropdown.css
  5. +238 −244 jquery.dropdown.js
View
4 .gitignore
@@ -1,3 +1 @@
-# https://git-scm.com/docs/gitignore +/bower_components/
-# https://help.github.com/articles/ignoring-files
-# Example .gitignore files: https://github.com/github/gitignore
View
29 bower.json
@@ -0,0 +1,29 @@
+{
+ "name": "dropdown.js",
+ "version": "0.0.1",
+ "homepage": "https://github.com/FezVrasta/dropdown.js",
+ "authors": [
+ "Federico Zivolo <info@mywebexpression.com>"
+ ],
+ "description": "Finally a dropdown plugin that transforms select inputs in nice dropdowns and does not drive you crazy.",
+ "main": ["jquery.dropdown.js", "jquery.dropdown.css"],
+ "keywords": [
+ "dropdown",
+ "dropdown.js",
+ "choosen",
+ "selectize",
+ "select",
+ "multiselect"
+ ],
+ "license": "MIT",
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components",
+ "test",
+ "tests"
+ ],
+ "dependencies": {
+ "jquery": "~2.1.3"
+ }
+}
View
178 index.html
@@ -1,88 +1,98 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
- <head> + <head>
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> + <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/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="https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/css/ripples.min.css" rel="stylesheet">
- +
- <link href="jquery.dropdown.css" rel="stylesheet"> + <link href="jquery.dropdown.css" rel="stylesheet">
- </head> + </head>
- <body> + <body>
- +
- <button>Click</button> + <button>Click</button>
- +
- <select multiple class="select form-control floating-label" placeholder="This is a placeholder"> + <select multiple class="select form-control floating-label" placeholder="This is a placeholder">
- <option></option> + <option></option>
- <option selected>Foobar</option> + <option selected>Foobar</option>
- <option selected>Is great</option> + <option selected>Is great</option>
- <option>Foobar</option> + <option>Foobar</option>
- <option>Is great</option> + <option>Is great</option>
- <option>Foobar</option> + <option>Foobar</option>
- <option>Is great</option> + <option>Is great</option>
- <option selected>Foobar</option> + <option selected>Foobar</option>
- <option selected>Is great</option> + <option selected>Is great</option>
- <option>Foobar</option> + <option>Foobar</option>
- <option>Is great</option> + <option>Is great</option>
- <option>Foobar</option> + <option>Foobar</option>
- <option>Is great</option> + <option>Is great</option>
- <option selected>Foobar</option> + <option selected>Foobar</option>
- <option selected>Is great</option> + <option selected>Is great</option>
- <option>Foobar</option> + <option>Foobar</option>
- <option>Is great</option> + <option>Is great</option>
- <option>Foobar</option> + <option>Foobar</option>
- <option>Is great</option> + <option>Is great</option>
- <option selected>Foobar</option> + <option selected>Foobar</option>
- <option selected>Is great</option> + <option selected>Is great</option>
- <option>Foobar</option> + <option>Foobar</option>
- <option>Is great</option> + <option>Is great</option>
- <option>Foobar</option> + <option>Foobar</option>
- <option>Is great</option> + <option>Is great</option>
- <option selected>Foobar</option> + <option selected>Foobar</option>
- <option selected>Is great</option> + <option selected>Is great</option>
- <option>Foobar</option> + <option>Foobar</option>
- <option>Is great</option> + <option>Is great</option>
- <option>Foobar</option> + <option>Foobar</option>
- <option>Is great</option> + <option>Is great</option>
- </select> + </select>
- +
- <br><br><br> + <br><br><br>
- <br><br><br> + <br><br><br>
- <br><br><br> + <br><br><br>
- <select class="select" placeholder="This is a placeholder"> + <select class="select" placeholder="This is a placeholder">
- <option></option> + <option></option>
- <option>Foobar</option> + <option>Foobar</option>
- <option value="hi..." selected>Is great</option> + <option value="hi..." selected>Is great</option>
- </select> + </select>
- +
- + <br><br><br>
- +
- + <select id="multi" multiple>
- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> + <option value="1">1</option>
- <script src="https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/js/material.min.js"></script> + <option value="2">2</option>
- <script src="https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/js/ripples.min.js"></script> + <option value="3">3</option>
- + </select>
- <script src="jquery.dropdown.js"></script> +
- <script> +
- $.material.init(); +
- +
- $(document).ready(function() { + <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
- $(".select").dropdown({"optionClass": "withripple"}); + <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>
- +
- $("button").click(function() { + <script src="jquery.dropdown.js"></script>
- $("body").append("<select class=select><option>hey</option></select>"); + <script>
- }); + $.material.init();
- +
- </script> + $(document).ready(function() {
- + $(".select").dropdown({"optionClass": "withripple"});
- + });
- <style> +
- body { + $().dropdown({autoinit: "select"});
- width: 200px; +
- margin: 100px; + $("button").click(function() {
- } + $("body").append("<select class=select><option>hey</option><option>hey</option></select>");
- </style> + });
- +
- </body> + </script>
+
+
+ <style>
+ body {
+ width: 200px;
+ margin: 100px;
+ }
+ </style>
+
+ </body>
</html> </html>
View
58 jquery.dropdown.css
@@ -1,59 +1,59 @@
.dropdownjs { .dropdownjs {
- position: relative; + position: relative;
} }
.dropdownjs * { .dropdownjs * {
- box-sizing: border-box; + box-sizing: border-box;
} }
.dropdownjs > input { .dropdownjs > input {
- width: 100%; + width: 100%;
- cursor: pointer !important; + cursor: pointer !important;
} }
.dropdownjs > input.focus ~ ul { .dropdownjs > input.focus ~ ul {
- transform: scale(1); + transform: scale(1);
} }
.dropdownjs > ul { .dropdownjs > ul {
- position: absolute; + position: absolute;
- padding: 0; + padding: 0;
- margin: 0; + margin: 0;
- min-width: 200px; + min-width: 200px;
- transform: scale(0); + transform: scale(0);
- z-index: 10000; + z-index: 10000;
} }
.dropdownjs > ul[placement=top-left] { .dropdownjs > ul[placement=top-left] {
- transform-origin: bottom left; + transform-origin: bottom left;
- bottom: 0; + bottom: 0;
- left: 0; + left: 0;
} }
.dropdownjs > ul[placement=bottom-left] { .dropdownjs > ul[placement=bottom-left] {
- transform-origin: top left; + transform-origin: top left;
- top: 0; + top: 0;
- left: 0; + left: 0;
} }
.dropdownjs > ul > li { .dropdownjs > ul > li {
- list-style: none; + list-style: none;
- padding: 10px 20px; + padding: 10px 20px;
} }
/* Theme */ /* Theme */
.dropdownjs > input { .dropdownjs > input {
- cursor: pointer; + cursor: pointer;
} }
.dropdownjs > ul { .dropdownjs > ul {
- background: #FFF; + background: #FFF;
- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12); + 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; + transition: transform 0.2s ease-out;
- padding: 10px; + padding: 10px;
- overflow: auto; + overflow: auto;
} }
.dropdownjs > ul > li { .dropdownjs > ul > li {
- cursor: pointer; + cursor: pointer;
} }
.dropdownjs > ul > li.selected, .dropdownjs > ul > li.selected,
.dropdownjs > ul > li:active { .dropdownjs > ul > li:active {
- background-color: #eaeaea; + background-color: #eaeaea;
} }
.dropdownjs > ul > li:focus { .dropdownjs > ul > li:focus {
- outline: 0; + outline: 0;
- background-color: #d4d4d4; + background-color: #d4d4d4;
} }
Oops, something went wrong.

0 comments on commit caa8336

Please sign in to comment.