Converting jQuery Mobile to Bootstrap 4: Difference between revisions
Jump to navigation
Jump to search
| (3 intermediate revisions by the same user not shown) | |||
| Line 11: | Line 11: | ||
* Appearance of controls will be a bit different. This is modern Bootstrap styling, not 2014. Controls have been simplified, extra styling removed and generally made cleaner. See [https://en.wikipedia.org/wiki/Material_Design Material Design]. | * Appearance of controls will be a bit different. This is modern Bootstrap styling, not 2014. Controls have been simplified, extra styling removed and generally made cleaner. See [https://en.wikipedia.org/wiki/Material_Design Material Design]. | ||
=== Button === | === [[Button]] converts to [[Button (Bootstrap)|BS4 Button]] === | ||
* Icon names are different between jQM and Bootstrap. In most cases, you will need to [https://www.nsbasic.com/app/OpenIconic.html look up the new icon name] and fill it in. | * Icon names are different between jQM and Bootstrap. In most cases, you will need to [https://www.nsbasic.com/app/OpenIconic.html look up the new icon name] and fill it in. | ||
=== Checkbox === | === [[Checkbox]] converts to [[Checkbox (Bootstrap)|BS4 Checkbox]] === | ||
* setValue and getValue: jQM starts with an index of 1, while BS starts with 0. You will need to modify your getValue and setValue statements. | * setValue and getValue: jQM starts with an index of 1, while BS starts with 0. You will need to modify your getValue and setValue statements. | ||
| Line 20: | Line 20: | ||
* No equivalent in BS. The conversion will put up a [[Container]] with the same dimensions. The rest is up to you. | * No equivalent in BS. The conversion will put up a [[Container]] with the same dimensions. The rest is up to you. | ||
=== Fliptoggle === | === [[Fliptoggle]] converts to [[Switch (Bootstrap)|BS4 Switch]] === | ||
* In jQuery Mobile, use FlipToggle1.value() to get the value. In BS, it is simply FlipToggle1.value. | * In jQuery Mobile, use FlipToggle1.value() to get the value. In BS, it is simply FlipToggle1.value. | ||
* In jQuery Mobile, you set the value to the text of the FlipToggle. In BS, it is true or false. | * In jQuery Mobile, you set the value to the text of the FlipToggle. In BS, it is true or false. | ||
=== FooterBar === | === [[Footerbar|FooterBar]] converts to [[Navs (Bootstrap)|BS4 Navs]] === | ||
* You'll need to update the names of the icons. | * You'll need to update the names of the icons. | ||
* Setting and getting the value is much easier: FlipToggle1.value = 0 sets the first item. | * Setting and getting the value is much easier: FlipToggle1.value = 0 sets the first item. | ||
=== HeaderBar === | === [[HeaderBar]] converts to [[Header]] === | ||
* converts without issues | * converts without issues | ||
=== List === | === [[List]] converts to [[Listgroup (Bootstrap)|BS4 Listgroup]] === | ||
* Methods and events are different - fixups needed to your code | * Methods and events are different - fixups needed to your code | ||
=== NavBar === | === [[NavBar]] converts to [[Navs (Bootstrap)|BS4 Navs]] === | ||
* You'll need to update the names of any icons. | * You'll need to update the names of any icons. | ||
* Setting and getting the value is much easier: NavBar1.value = 0 sets the first item. | * Setting and getting the value is much easier: NavBar1.value = 0 sets the first item. | ||
| Line 48: | Line 44: | ||
* No equivalent in BS. The conversion will put up a [[Container]] with the same dimensions. The rest is up to you. | * No equivalent in BS. The conversion will put up a [[Container]] with the same dimensions. The rest is up to you. | ||
=== RadioButton === | === [[RadioButton]] converts to [[Radiobutton (Bootstrap)|BS4 Radiobutton]] === | ||
* .getValue() and .setValue are gone. .value() is replaced by BS | * .getValue() and .setValue are gone. .value() is replaced by BS RadioButton.value. | ||
=== Select === | === [[Select]] converts to [[Select (Bootstrap)|BS4 Select]] === | ||
* Icon names are different between jQM and Bootstrap. In most cases, you will need to [https://www.nsbasic.com/app/OpenIconic.html look up the new icon name] and fill it in. | * Icon names are different between jQM and Bootstrap. In most cases, you will need to [https://www.nsbasic.com/app/OpenIconic.html look up the new icon name] and fill it in. | ||
* Names of functions have changed. For example, .selectedItem() becomes simply .item. | * Names of functions have changed. For example, .selectedItem() becomes simply .item. | ||
* No groups of Select controls. | * No groups of Select controls. | ||
=== Slider === | === [[Slider]] converts to [[Slider (Bootstrap)|BS4 Slider]] === | ||
* Only the slider displays - the value does not | * Only the slider displays - the value does not | ||
* Check the Slider_input.onslide event instead of Slider.onchange | |||
* Use .getValue() instead of .value | |||
=== TextArea === | === [[TextArea]] converts to [[Textarea (Bootstrap)|BS4 Textarea]] === | ||
* converts without issues | * converts without issues | ||
=== TextBox === | === [[TextBox]] converts to [[Input (Bootstrap)|BS4 Input]] === | ||
* converts without issues | * converts without issues | ||
=== ToolTip === | === [[ToolTip]] converts to [[Button (Bootstrap)|BS4 Button]] === | ||
* Icon names are different between jQM and Bootstrap. In most cases, you will need to [https://www.nsbasic.com/app/OpenIconic.html look up the new icon name] and fill it in. | * Icon names are different between jQM and Bootstrap. In most cases, you will need to [https://www.nsbasic.com/app/OpenIconic.html look up the new icon name] and fill it in. | ||
Latest revision as of 15:43, 20 July 2019
jQuery Mobile hasn’t been updated in years - since 2014. From a technical and design viewpoint, it's obsolete. From a security view, it's also a problem. It relies on jQuery 2.2, which is considered a security risk.
The Framework Converter can be used to convert the jQuery Mobile controls in your project to their equivalents in Bootstrap 4.
In most cases, the converter will update your controls properly, especially the most commonly used ones. However, there are some fix ups you will need to do to your controls and code.
Here are hints for each of the controls. Feel free to edit this document and add tips for others!
General
- Sizing of controls will have to be checked. You may need to adjust bounds.
- Appearance of controls will be a bit different. This is modern Bootstrap styling, not 2014. Controls have been simplified, extra styling removed and generally made cleaner. See Material Design.
Button converts to BS4 Button
- Icon names are different between jQM and Bootstrap. In most cases, you will need to look up the new icon name and fill it in.
Checkbox converts to BS4 Checkbox
- setValue and getValue: jQM starts with an index of 1, while BS starts with 0. You will need to modify your getValue and setValue statements.
Collapsible
- No equivalent in BS. The conversion will put up a Container with the same dimensions. The rest is up to you.
Fliptoggle converts to BS4 Switch
- In jQuery Mobile, use FlipToggle1.value() to get the value. In BS, it is simply FlipToggle1.value.
- In jQuery Mobile, you set the value to the text of the FlipToggle. In BS, it is true or false.
- You'll need to update the names of the icons.
- Setting and getting the value is much easier: FlipToggle1.value = 0 sets the first item.
HeaderBar converts to Header
- converts without issues
List converts to BS4 Listgroup
- Methods and events are different - fixups needed to your code
- You'll need to update the names of any icons.
- Setting and getting the value is much easier: NavBar1.value = 0 sets the first item.
Panel
- No equivalent in BS. The conversion will put up a Container with the same dimensions. The rest is up to you.
PopUp
- No equivalent in BS. The conversion will put up a Container with the same dimensions. The rest is up to you.
RadioButton converts to BS4 Radiobutton
- .getValue() and .setValue are gone. .value() is replaced by BS RadioButton.value.
Select converts to BS4 Select
- Icon names are different between jQM and Bootstrap. In most cases, you will need to look up the new icon name and fill it in.
- Names of functions have changed. For example, .selectedItem() becomes simply .item.
- No groups of Select controls.
Slider converts to BS4 Slider
- Only the slider displays - the value does not
- Check the Slider_input.onslide event instead of Slider.onchange
- Use .getValue() instead of .value
TextArea converts to BS4 Textarea
- converts without issues
TextBox converts to BS4 Input
- converts without issues
ToolTip converts to BS4 Button
- Icon names are different between jQM and Bootstrap. In most cases, you will need to look up the new icon name and fill it in.