/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
-# https://help.github.com/articles/ignoring-files
-# Example .gitignore files: https://github.com/github/gitignore
+/bower_components/
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>
<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>
+ <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>
+
+ <br><br><br>
+
+ <select id="multi" multiple>
+ <option value="1">1</option>
+ <option value="2">2</option>
+ <option value="3">3</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"});
+ });
+
+ $().dropdown({autoinit: "select"});
+
+ $("button").click(function() {
+ $("body").append("<select class=select><option>hey</option><option>hey</option></select>");
+ });
+
+ </script>
+
+
+ <style>
+ body {
+ width: 200px;
+ margin: 100px;
+ }
+ </style>
+
+ </body>
</html>
View
58 jquery.dropdown.css
@@ -1,59 +1,59 @@
.dropdownjs {
- position: relative;
+ position: relative;
}
.dropdownjs * {
- box-sizing: border-box;
+ box-sizing: border-box;
}
.dropdownjs > input {
- width: 100%;
- cursor: pointer !important;
+ width: 100%;
+ cursor: pointer !important;
}
.dropdownjs > input.focus ~ ul {
- transform: scale(1);
+ transform: scale(1);
}
.dropdownjs > ul {
- position: absolute;
- padding: 0;
- margin: 0;
- min-width: 200px;
- transform: scale(0);
- z-index: 10000;
+ 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;
+ transform-origin: bottom left;
+ bottom: 0;
+ left: 0;
}
.dropdownjs > ul[placement=bottom-left] {
- transform-origin: top left;
- top: 0;
- left: 0;
+ transform-origin: top left;
+ top: 0;
+ left: 0;
}
.dropdownjs > ul > li {
- list-style: none;
- padding: 10px 20px;
+ list-style: none;
+ padding: 10px 20px;
}
/* Theme */
.dropdownjs > input {
- cursor: pointer;
+ 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;
+ 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;
+ cursor: pointer;
}
.dropdownjs > ul > li.selected,
.dropdownjs > ul > li:active {
- background-color: #eaeaea;
+ background-color: #eaeaea;
}
.dropdownjs > ul > li:focus {
- outline: 0;
- background-color: #d4d4d4;
+ outline: 0;
+ background-color: #d4d4d4;
}
Oops, something went wrong.

0 comments on commit caa8336

Please sign in to comment.