Skip to content
This repository has been archived by the owner on Jan 4, 2022. It is now read-only.

Commit

Permalink
0.0.2dev
Browse files Browse the repository at this point in the history
  • Loading branch information
FezVrasta committed Jan 5, 2015
1 parent 4e70774 commit 3fe5a65
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 85 deletions.
29 changes: 18 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,33 @@

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?
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
### 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
// 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.

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?
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:
Don't worry friend, this is the markup used by Dropdown.js:

<div class="dropdownjs">
<input type="text" readonly placeholder="This is a placeholder">
Expand All @@ -37,18 +37,25 @@ Don't worry friend, this is the markup used by Dropdown.js:
<li value="great" selected class="selected" tabindex="0">...is great!</li>
</ul>
</div>

### Callbacks

Psstt, ya need some callback?
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.

### Dynamically added options

You may add a new option to the select tag and it will be automatically added to the dropdown.js

### Let users add options

Add `data-dynamic-opts=true` to the select tag to let users add or remove options.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "dropdown.js",
"version": "0.0.1",
"version": "0.0.2dev",
"homepage": "https://github.com/FezVrasta/dropdown.js",
"authors": [
"Federico Zivolo <[email protected]>"
Expand Down
37 changes: 5 additions & 32 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,39 +10,12 @@
<body>

<button>Click</button>

<select multiple class="select form-control floating-label" placeholder="This is a placeholder">
<br>
<br>
<br>
<br>
<select multiple class="select form-control floating-label" placeholder="This is a placeholder" data-dynamic-opts=true>
<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>
Expand Down
35 changes: 31 additions & 4 deletions jquery.dropdown.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
box-sizing: border-box;
}
.dropdownjs > input {
width: 100%;
width: 100%;
padding-right: 30px;
text-overflow: ellipsis;
}
.dropdownjs > input.focus ~ ul {
transform: scale(1);
Expand All @@ -32,11 +34,18 @@
list-style: none;
padding: 10px 20px;
}

.dropdownjs > ul > li.dropdownjs-add {
padding: 0;
}
.dropdownjs > ul > li.dropdownjs-add > input {
border: 0;
padding: 10px 20px;
width: 100%;
}

/* Theme */
.dropdownjs > input[readonly] {
cursor: pointer;
cursor: pointer;
}
select[data-dropdownjs][disabled] + .dropdownjs > input[readonly] {
cursor: default;
Expand All @@ -47,15 +56,33 @@ select[data-dropdownjs][disabled] + .dropdownjs > input[readonly] {
transition: transform 0.2s ease-out;
padding: 10px;
overflow: auto;
max-width: 500px;
}
.dropdownjs > ul > li {
cursor: pointer;
word-wrap: break-word;
}
.dropdownjs > ul > li.selected,
.dropdownjs > ul > li:active {
background-color: #eaeaea;
}
.dropdownjs > ul > li:focus {
outline: 0;
background-color: #d4d4d4;
outline: 1px solid #d4d4d4;
}
.dropdownjs > ul > li > .close:before {
content: "\00d7";
display: block;
position: absolute;
right: 15px;
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .6;
}
.dropdownjs > ul > li:h > .close:hover:before {
opacity: .9;
}
Loading

0 comments on commit 3fe5a65

Please sign in to comment.