Jquery-ui-library.pdf

215296 jQuery UI Library #jquery-ui

Table of Contents

About1

Chapter 1: Getting started with jQuery UI Library2

Remarks2

Versions2

Examples3

Adding the jQuery UI script & basic usage4

Setting up jQuery UI for the First Time Example4

Chapter 2: Accordion6

Syntax6

Parameters6

Remarks6

Examples6

Accordion Basic Usage6

Accordion destroy usage7

Accordion disable Usage7

Accordion enable Usage7

Accordion option Usage7

Accordion refresh Usage8

Accordiong widget usage8

Chapter 3: Autocomplete9

Examples9

Simple example9

Chapter 4: Button10

Syntax10

Parameters10

Examples10

Basic usage10

Chapter 5: Datepicker11

Examples11

Initialization11

Setting Minimum and Maximum dates for a datepicker11

Show week of the year11

Set a custom date format11

Show month and year dropdown13

Chapter 6: Dialog14

Syntax14

Parameters14

Remarks16

Examples17

Simple Example17

Open dialog when event occurs17

Complex Example - jQuery UI Dynamicly Create Dialog17

Creating a Dialog with Tabbed Titlebar21

Dialog with no close button22

Chapter 7: Draggable24

Examples24

Simple Example24

Draggable with handle24

Chapter 8: Icons25

Syntax25

Remarks25

Examples25

Basic usage25

Chapter 9: jQuery UI Rotatable Plug-in26

Parameters26

Examples26

Initial Usage Example26

Chapter 10: jquery ui sortable28

Examples28

jQuery UI Sortable - Drop Placeholder28

Chapter 11: Slider30

Examples30

Simple Example30

Range Slider30

Initializing Values and Value Limits30

Using the Slide Event31

Setting Values and the Change Event31

Chapter 12: Sortable33

Syntax33

Parameters33

Remarks36

Examples36

Simple Example36

Sortable Grid with flex layout36

Stationary Items when dragging37

Sortable - Animate revert of unaccepted item38

Chapter 13: Spinner40

Syntax40

Parameters40

Remarks40

Examples40

Basic Example40

Credits41

About You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: jquery-ui-library It is an unofficial and free jQuery UI Library ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official jQuery UI

Library.

The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners. Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to info@zzzprojects.com https://riptutorial.com/1

Chapter 1: Getting started with jQuery UI

Library

Remarks

jQuery UI is a JavaScript UI library, built on top of jQuery, offering a set of user interface interactions, effects and widgets.

Versions

VersionRelease Date

1.7.02009-03-06

1.7.12009-03-19

1.7.22009-06-12

1.7.42010-05-04

1.8.02010-03-23

1.8.12010-05-04

1.8.22010-06-07

1.8.42010-08-10

1.8.52010-09-17

1.8.62010-10-02

1.8.72010-12-10

1.8.82011-01-14

1.8.92011-01-21

1.8.102011-02-24

1.8.112011-03-18

1.8.122011-04-23

1.8.132011-05-17

1.8.142011-06-28

https://riptutorial.com/2

VersionRelease Date

1.8.152011-08-08

1.8.162011-08-18

1.8.172012-01-10

1.8.182012-02-23

1.8.192012-04-17

1.8.202012-04-30

1.8.212012-06-05

1.8.222012-07-24

1.8.232012-08-15

1.8.242012-09-28

1.9.02012-10-08

1.9.12012-10-25

1.9.22012-11-23

1.10.02013-01-17

1.10.12013-02-15

1.10.22013-03-14

1.10.32013-05-03

1.10.42014-01-17

1.11.02014-06-26

1.11.12014-08-13

1.11.22014-10-16

1.11.32015-02-12

1.11.42015-03-11

Examples

https://riptutorial.com/3

Adding the jQuery UI script & basic usage

To get started with the jQuery UI library, you'll need to add the jQuery script, the jQuery UI script,

and the jQuery UI stylesheet to your HTML. First, download jQuery UI; choose the features you need on the download page. Unzip your download, and put and (and ) in a folder where you can use them from your HTML (e.g. with your other scripts and stylesheets.) jQuery UI depends on jQuery, so remember to include before . That's it! You can now use jQuery UI. For example, use the datepicker with the following HTML:

Then use the following JavaScript:

Which will get you a nice datepicker popup:

For more, see the official "Getting started" gude.

Setting up jQuery UI for the First Time Example

The jQuery UI framework helps to extend and increase the User Interface controls for jQuery

JavaScript library.

When you wish to use jQuery UI, you will need to add these libraries to your HTML. A quick way to start is using the Content Delivery Network available code sources: jQuery Libraries https://riptutorial.com/4 You can choose many different themes for jQuery UI and even Roll your Own Theme. For this example, we will use 'Smoothness'. You add the theme via CSS. jQuery UI CSS jQuery UI Library #jquery-ui

Table of Contents

About1

Chapter 1: Getting started with jQuery UI Library2

Remarks2

Versions2

Examples3

Adding the jQuery UI script & basic usage4

Setting up jQuery UI for the First Time Example4

Chapter 2: Accordion6

Syntax6

Parameters6

Remarks6

Examples6

Accordion Basic Usage6

Accordion destroy usage7

Accordion disable Usage7

Accordion enable Usage7

Accordion option Usage7

Accordion refresh Usage8

Accordiong widget usage8

Chapter 3: Autocomplete9

Examples9

Simple example9

Chapter 4: Button10

Syntax10

Parameters10

Examples10

Basic usage10

Chapter 5: Datepicker11

Examples11

Initialization11

Setting Minimum and Maximum dates for a datepicker11

Show week of the year11

Set a custom date format11

Show month and year dropdown13

Chapter 6: Dialog14

Syntax14

Parameters14

Remarks16

Examples17

Simple Example17

Open dialog when event occurs17

Complex Example - jQuery UI Dynamicly Create Dialog17

Creating a Dialog with Tabbed Titlebar21

Dialog with no close button22

Chapter 7: Draggable24

Examples24

Simple Example24

Draggable with handle24

Chapter 8: Icons25

Syntax25

Remarks25

Examples25

Basic usage25

Chapter 9: jQuery UI Rotatable Plug-in26

Parameters26

Examples26

Initial Usage Example26

Chapter 10: jquery ui sortable28

Examples28

jQuery UI Sortable - Drop Placeholder28

Chapter 11: Slider30

Examples30

Simple Example30

Range Slider30

Initializing Values and Value Limits30

Using the Slide Event31

Setting Values and the Change Event31

Chapter 12: Sortable33

Syntax33

Parameters33

Remarks36

Examples36

Simple Example36

Sortable Grid with flex layout36

Stationary Items when dragging37

Sortable - Animate revert of unaccepted item38

Chapter 13: Spinner40

Syntax40

Parameters40

Remarks40

Examples40

Basic Example40

Credits41

About You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: jquery-ui-library It is an unofficial and free jQuery UI Library ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official jQuery UI

Library.

The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners. Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to info@zzzprojects.com https://riptutorial.com/1

Chapter 1: Getting started with jQuery UI

Library

Remarks

jQuery UI is a JavaScript UI library, built on top of jQuery, offering a set of user interface interactions, effects and widgets.

Versions

VersionRelease Date

1.7.02009-03-06

1.7.12009-03-19

1.7.22009-06-12

1.7.42010-05-04

1.8.02010-03-23

1.8.12010-05-04

1.8.22010-06-07

1.8.42010-08-10

1.8.52010-09-17

1.8.62010-10-02

1.8.72010-12-10

1.8.82011-01-14

1.8.92011-01-21

1.8.102011-02-24

1.8.112011-03-18

1.8.122011-04-23

1.8.132011-05-17

1.8.142011-06-28

https://riptutorial.com/2

VersionRelease Date

1.8.152011-08-08

1.8.162011-08-18

1.8.172012-01-10

1.8.182012-02-23

1.8.192012-04-17

1.8.202012-04-30

1.8.212012-06-05

1.8.222012-07-24

1.8.232012-08-15

1.8.242012-09-28

1.9.02012-10-08

1.9.12012-10-25

1.9.22012-11-23

1.10.02013-01-17

1.10.12013-02-15

1.10.22013-03-14

1.10.32013-05-03

1.10.42014-01-17

1.11.02014-06-26

1.11.12014-08-13

1.11.22014-10-16

1.11.32015-02-12

1.11.42015-03-11

Examples

https://riptutorial.com/3

Adding the jQuery UI script & basic usage

To get started with the jQuery UI library, you'll need to add the jQuery script, the jQuery UI script,

and the jQuery UI stylesheet to your HTML. First, download jQuery UI; choose the features you need on the download page. Unzip your download, and put and (and ) in a folder where you can use them from your HTML (e.g. with your other scripts and stylesheets.) jQuery UI depends on jQuery, so remember to include before . That's it! You can now use jQuery UI. For example, use the datepicker with the following HTML:

Then use the following JavaScript:

Which will get you a nice datepicker popup:

For more, see the official "Getting started" gude.

Setting up jQuery UI for the First Time Example

The jQuery UI framework helps to extend and increase the User Interface controls for jQuery

JavaScript library.

When you wish to use jQuery UI, you will need to add these libraries to your HTML. A quick way to start is using the Content Delivery Network available code sources: jQuery Libraries https://riptutorial.com/4 You can choose many different themes for jQuery UI and even Roll your Own Theme. For this example, we will use 'Smoothness'. You add the theme via CSS. jQuery UI CSS