You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

66 lines
2.7 KiB

2 years ago
  1. # vanillaSelectBox
  2. ### A nice select/multiselect ui with no dependency
  3. ![screen shot](https://raw.githubusercontent.com/PhilippeMarcMeyer/vanillaSelectBox/master/vanillaSelectBox.png)
  4. Demo : https://philippemarcmeyer.github.io/vanillaSelectBox/
  5. ### Transform an HTML select into a selectBox dropdown
  6. #### the select is hidden and the chosen value(s) is/are available in the source select
  7. ```
  8. let selectBox = new vanillaSelectBox("#brands",{"maxHeight":200,search:true});
  9. ```
  10. * param 1 : css selector of a normal select element
  11. * param 2 : options
  12. ### Available options :
  13. * maxWidth : for the UI if you don't want the title to expand to much to the right
  14. * maxHeight : the maxHeight set a scroll when there are too many items
  15. * translations : { "all": "every cars", "items": "cars" }
  16. * search : true/false, to provide a search input text to reduce the list
  17. * placeHolder : well that's a placeholder !
  18. * stayOpen : true/false. defaut is false : that's a drop-down. Set it to true and that"s a list (>= v 0.25)
  19. ### Automatic options :
  20. * single or multiple choices : depends on the "multiple" attribute that you put in the select code
  21. * size : if you set a multiple attribute and a size attribute in the select (for instance 3) :
  22. * the title zone will enumerate the chosen values as a comma separated string until it reaches "size"
  23. * Above it will show "x items" or "x" + whatever you put in the translations.items key
  24. * If all the items are selected, it will show "all" or whatever you put in the translations.items all
  25. ```
  26. <select id="brands" multiple size="3">
  27. ```
  28. ### Available commands :
  29. * empty()
  30. * setValue([] || '' || 'all') => the multiple uses an array of values or a comma separated string or the string 'all'
  31. * disable()
  32. * enable()
  33. * destroy()
  34. ```
  35. setValues('brandsMulti',['Lamborghini','Land Rover'])
  36. ```
  37. #### History :
  38. v 0.30 : The menu stops moving around on window resize and scroll + z-index in order of creation for multiple instances
  39. v 0.26 : Corrected bug in stayOpen mode with disable() function
  40. v 0.25 : New option stayOpen, and the dropbox is no longer a dropbox but a nice multi-select
  41. ![screen shot](https://raw.githubusercontent.com/PhilippeMarcMeyer/vanillaSelectBox/master/stayOpen.jpg)
  42. v 0.22 : Migrating the function to vanillaSelectBox prototype => several instances of vanillaSelectBox() but 1 set of functions in memory
  43. v 0.21 : IE 11 compatibility
  44. v 0.20 : working selectBox both single and multiple choices, with search-box !
  45. v 0.10 : functional plugin for both single and multiple selects, without search box for the moment
  46. v 0.02 : added dispatch change event to select + nicer check mark
  47. v 0.01 : first commit => basics for a single select box + the Dom is cleaned if you init twice