Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor createLi; add two new features with tests #48

Closed
wants to merge 2 commits into from

Conversation

BaylorRae
Copy link

To start off, I really like your plugin. After looking through 2 or 3 different select dropdown plugins yours is by far my favorite.


I wanted to create a dropdown similar to YouTube's "Date Range" dropdown. It does two things that greatly improve the way the options are listed.

  1. It adds separators to group the items
  2. Options can have custom text added that isn't relevant to the option's text itself.

Analytics - YouTube

I don't know if it's something you want or not, but I added the Jasmine testing framework to hopefully prevent breaking existing functionality. If you don't like Jasmine, or using the jasmine-gem to run server, you can just grab the changes I made in bootstrap-select.js

Note: I didn't add a compressed version because I wasn't sure which compressor you liked.


How to use my changes

You can change the option's text by adding a data-option-text attribute. This option only applies to the dropdown menu itself. It doesn't modify the the text added to the button.

<select>
  <option value="week" data-option-text="This week <span>Sunday &ndash; today</span>">This week</option>
</select>

To add a separator you need to set data-separator to true. The value and text within then <option> tag is omitted.

<select>
  <option data-separator="true">---</option>
</select>

To style the separator I just added this to my code.

.dropdown-menu ul .separator {
  background: #ddd;
  height: 1px;
  display: block;
  margin: 5px 0;
}

Baylor Rae added 2 commits February 6, 2013 11:33
uses:
- jasmine-gem <https://github.com/pivotal/jasmine-gem>
- jasmine-jquery <https://github.com/velesin/jasmine-jquery>

Signed-off-by: Baylor Rae <baylorrae@gmail.com>
- adds support for adding custom option text only in the dropdown
- allows creating a separator between options
- refactored the creation of items
- added tests

Signed-off-by: Baylor Rae <baylorrae@gmail.com>
@t3chn0r
Copy link

t3chn0r commented Feb 6, 2013

Nice job!

@GonzaGonza
Copy link
Contributor

Nice! thanks!

@silviomoreto
Copy link
Collaborator

thanks @BaylorRae . I will check later the code just to understando what you did and I will accept de pull request

@BaylorRae
Copy link
Author

That sounds good. If you want, I can try to add more tests for the rest of
the code when I get a chance.

On Feb 7, 2013, at 9:52 AM, Silvio Moreto notifications@github.com wrote:

thanks @BaylorRae https://github.com/BaylorRae . I will check later the
code just to understando what you did and I will accept de pull request

@caseyjhol
Copy link
Member

Working on implementing these...

caseyjhol added a commit that referenced this pull request Feb 26, 2013
Fix #65. Update divider styles and include data-divider from #48
caseyjhol added a commit that referenced this pull request Feb 27, 2013
Fix #72. Add data-subtext (#48) & support for disabled optgroups
@BaylorRae
Copy link
Author

@caseyjhol I didn't see your comment, but it looks like you've got it implemented. I really like the api you used, it's much more descriptive. Thanks for adding my changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants