Scribd
Upload
3 views

22-Nov JQuery and Plugins

jQuery UI is a JavaScript component library that simplifies UI development with features like interactions, widgets, and plugins, but does not provide as many components as Bootstrap. The document includes instructions for downloading and installing jQuery UI, as well as examples of using its features such as draggable images, accordions, and grids. Additionally, it covers the installation of plugins for barcode generation and mentions MongoDB for back-end integration.

Uploaded by

rakeshmishra.hde
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

22-Nov JQuery and Plugins

jQuery UI is a JavaScript component library that simplifies UI development with features like interactions, widgets, and plugins, but does not provide as many components as Bootstrap. The document includes instructions for downloading and installing jQuery UI, as well as examples of using its features such as draggable images, accordions, and grids. Additionally, it covers the installation of plugins for barcode generation and mentions MongoDB for back-end integration.

Uploaded by

rakeshmishra.hde
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

jQuery UI

- It is a component library for JavaScript applications.


- It is same like bootstrap.
- jQuery UI is more simplified than bootstrap but will not provide all component
like bootstrap.
- jQuery UI provides
a) Interactions
b) Widgets
c) Plugins

Download and Install jQuery UI library

1. Visit
https://jqueryui.com/

2. Download UI library [stable version]

3. Copy all file from ZIP folder

4. Paste into your project "node_modules"

jquery-ui [folder]

Interactions
- resizable
- draggable
- sortable

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/jquery-ui/jquery-ui.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/jquery-ui/jquery-ui.js"></script>
<script>
$(function(){
$("img").draggable();
$("ol").sortable();
})
</script>
</head>
<body>
<img width="100" height="100" src="../public/images/a1.jpg">
<ol>
<li>Bootstrap</li>
<li>CSS</li>
<li>HTML</li>
<li>JavaScript</li>
</ol>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/jquery-ui/jquery-ui.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/jquery-ui/jquery-ui.js"></script>
<script>
$(function(){
$("#topics").accordion();
$("#departure").datepicker();
$("#chat").dialog();
})
</script>
</head>
<body>
<div id="chat" title="Your Comments">
<textarea rows="4" cols="30"></textarea>
<div>
<button>Post Comment</button>
</div>
</div>
<div>
<input type="text" id="departure">
</div>
<div id="topics">
<h1>HTML</h1>
<div>
<p> It is a markup language</p>
</div>
<h1>CSS</h1>
<div>
<p>It defines styles for HTML</p>
</div>
<h1>JavaScript</h1>
<div>
<p>It is a language</p>
</div>
</div>
</body>
</html>

Grid
- Plugin is a pre-defined software, you can inject into your project and customize
according your requirements.
- You can use for various interactions.

Ex: Grid => It is a table that allows pagination, sorting, filtering..

> npm install jsgrid --save

gird.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/jsgrid/dist/jsgrid.min.css">
<link rel="stylesheet" href="../node_modules/jsgrid/dist/jsgrid-theme.min.css">

<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/jsgrid/dist/jsgrid.js"></script>
<script>
$(function(){
$("#grid").jsGrid({
width: "100%",
height: "400px",

filtering:true,
sorting:true,
editing:true,
paging: true,

data: [
{Name:"Samsung TV", Price:45000.54, Stock:true},
{Name: "Nike Causals", Price:5200.45, Stock:false}
],

fields: [
{name: "Name", type: "text", width: 150},
{name: "Price", type: "number", width:100},
{name: "Stock", type: "checkbox", title: "In Stock"},
{type: "control"}
]
})
})
</script>
</head>
<body>
<h2>Grid Demo</h2>
<div id="grid">

</div>
</body>
</html>

Barcode

>npm install jquery-ean13 --save

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/jquery-ean13/dist/jquery-ean13.js"></script>
<script src="../node_modules/jquery-ean13/dist/ean13.js"></script>
<script>
$(function(){
$("#code").EAN13("987654321023");
})
</script>
<style>
canvas {
width: 100px;
}
</style>
</head>
<body>
<figure>
<img src="../public/images/e1.jpg" width="100" height="100">
<br><br>
<canvas id="code">
Your browser not supporting canvas.
</canvas>
</figure>
</body>
</html>

Back End
MongoDB

You might also like