|
| 1 | +# Jquery::Ui::Suite |
| 2 | + |
| 3 | +`Jquery::Ui::Suite` is a gem that integrates jQuery UI v1.14.1 and jQuery v3.7.1 assets seamlessly into your Rails application. This gem allows you to configure the jQuery UI theme you want to use and includes the latest versions of jQuery and jQuery UI by default. |
| 4 | + |
| 5 | +## Table of Contents |
| 6 | + |
| 7 | +- [Installation](#installation) |
| 8 | +- [Configuration](#configuration) |
| 9 | +- [Usage](#usage) |
| 10 | +- [Styles](#styles) |
| 11 | +- [Contact](#contact) |
| 12 | + |
| 13 | +## Installation |
| 14 | + |
| 15 | +Add `jquery-ui-suite` to your Gemfile and run `bundle install`: |
| 16 | + |
| 17 | +```ruby |
| 18 | +gem 'jquery-ui-suite' |
| 19 | +``` |
| 20 | + |
| 21 | +After installing, run the generator to create an initializer for configuring the gem: |
| 22 | + |
| 23 | +```bash |
| 24 | +rails generate jquery_ui_suite:install |
| 25 | +``` |
| 26 | + |
| 27 | +## Configuration |
| 28 | +The gem includes a configuration initializer located at config/initializers/jquery_ui_suite.rb, where you can customize the theme used for jQuery UI. |
| 29 | + |
| 30 | +### Example Configuration |
| 31 | +In config/initializers/jquery_ui_suite.rb, set your desired theme: |
| 32 | + |
| 33 | +```ruby |
| 34 | +Jquery::Ui::Suite.setup do |config| |
| 35 | + config.jquery_ui_theme = "base" |
| 36 | + config.include_jquery = true |
| 37 | +end |
| 38 | +``` |
| 39 | +Available themes include `base`, `black-tie`, `blitzer`, `cupertino`, `dark-hive`, `dot-luv`, `eggplant`, `excite-bike`, `flick`, `hot-sneaks`, `humanity`, |
| 40 | +`le-frog`, `mint-choc`, `overcast`, `pepper-grinder`, `redmond`, `smoothness`, `south-street`, `start`, `sunny`, `swanky-purse`, `trontastic`, `ui-darkness`, `ui-lightness` and `vader`. |
| 41 | + |
| 42 | +## Usage |
| 43 | +Import jQuery and jQuery UI |
| 44 | +In your application's importmap.rb file, pin the JavaScript files: |
| 45 | + |
| 46 | +```ruby |
| 47 | +pin "jquery", to: "jquery-3.7.1.min.js", preload: true |
| 48 | +pin "jquery-ui", to: "jquery-ui-1.14.1.min.js", preload: true |
| 49 | +``` |
| 50 | + |
| 51 | +In app/javascript/application.js, import jQuery and jQuery UI: |
| 52 | + |
| 53 | +```ruby |
| 54 | +import "jquery" |
| 55 | +import "jquery-ui" |
| 56 | + |
| 57 | +// Make jQuery globally available |
| 58 | +window.$ = window.jQuery = $ |
| 59 | +``` |
| 60 | + |
| 61 | +## Styles |
| 62 | +In app/assets/stylesheets/application.scss, import the theme you selected in the initializer: |
| 63 | + |
| 64 | +```scss |
| 65 | +@import "jquery-ui/themes/base/jquery-ui.min"; // Replace 'base' with your selected theme |
| 66 | +@import "jquery-ui/themes/base/theme"; |
| 67 | +``` |
| 68 | +Available themes include `base`, `black-tie`, `blitzer`, `cupertino`, `dark-hive`, `dot-luv`, `eggplant`, `excite-bike`, `flick`, `hot-sneaks`, `humanity`, |
| 69 | +`le-frog`, `mint-choc`, `overcast`, `pepper-grinder`, `redmond`, `smoothness`, `south-street`, `start`, `sunny`, `swanky-purse`, `trontastic`, `ui-darkness`, `ui-lightness` and `vader`. |
| 70 | + |
| 71 | + |
| 72 | +## Contributing |
| 73 | +Contributions are welcome! Feel free to report bugs or submit pull requests. |
| 74 | + |
| 75 | +## Contact |
| 76 | + |
| 77 | +For questions or further information, feel free to reach out via [LinkedIn](https://www.linkedin.com/in/grigore-george-mihai-73981b86/). |
0 commit comments