ஜெகொரி UI அம்சங்கள்:
- இண்டர் ஆக்டிவ் வெப் பயன்பாடுகளை உருவாக்க பயன்படுகின்றது.
- இது ஓபென் சோர்ஸ் சாஃப்ட்வேர் மற்றும் இலவசமாகும்.
- நிலையானது
- நிர்வாகிக்க எளிது.
- எல்லா பிரவுசராலும் ஆதரிக்கப்படுகின்றது.
- டாக்குமென்டேசன் நன்றாக உள்ளது
jQuery UI வகைகள்.
இது நான்கு
வகைப்படும்.
1.
இன்டெர்
ஆக்சன்ஸ்
2.
விட்ஜெட்ஸ்
3.
எஃபெக்ட்ஸ்
4.
உடிலிடிஸ்
இதில்
இந்த கட்டுரையில் இன்டெர் ஆக்சன்ஸ் பற்றி காண இருக்கின்றோம். இது DOM எலெமென்ட்ஸ் உடன்
இன்டெராக்ட் செய்ய பயன்படுகின்றது.
அதன் வகைகள்
1.
.டிராக்கபிள்
2.
டிராப்பபிள்
3.
ரிசைஸபிள்.
4.
செலெக்டபிள்.
5.
சார்ட்டபிள்.
டிராக்கபிள்.
ஜெகொரி
டிராக்கபிள் மெத்தட் ஆனது. ஒரு எலெமெண்ட் ஜெகொரி மூலம் டிராக்கபிள் ஆன பிறகு அதை அந்த பக்கதிற்குள்
எங்கு வேண்டுமானாலும் டிராக் செய்யலாம்.
சான்று
நிரல்
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; background:#7fffd4;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>I am draggable!</p>
</div>
</body>
</html>
jQuery UI Droppable
இந்த வசதியானது நீங்கள் DOM எலெமென்டை எங்கு வேண்டுமானாலும் டிராக் செய்து டிராப் செய்ய உதவுகின்றது.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable-1 {
width: 100px; height: 100px; padding: 0.5em; float: left;
margin: 22px 5px 10px 0;
}
#droppable-1 {
width: 150px; height: 120px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#draggable-1" ).draggable();
$( "#droppable-1" ).droppable();
});
</script>
</head>
<body>
<div id="draggable-1" class="ui-widget-content">
<p>I am SSSIT.org<br/> Drag me to JavaTpoint</p>
</div>
<div id="droppable-1" class="ui-widget-header">
<p>Welcome to JavaTpoint</p>
</div>
</body>
</html>
jQuery UI resizable
ஜெகொரி ரிசைசபிள் மெத்தட் ஆனது உங்கள் DOM எலெமெண்டை நமக்கு வேண்டிய அளவில் மாற்றிக் கொள்ள உதவி செய்கின்றது.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background:lightyellow;
border: 1px solid #b9cd6d;
color: Red;
font-weight: bold;
}
.ui-widget-content {
background: lightgreen;
border: 1px solid #DDDDDD;
color: Red;
}
#resizable { width: 150px; height: 150px; padding: 0.5em;
text-align: center; margin: 0; }
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<!-- HTML -->
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Pull my edges to resize me!!</h3>
</div>
</body>
</html>
jQuery UI Selectable
ஜெகொரி செலெக்டபிள் மெத்தட் ஆனது ஒரு DOM எலெமெண்டை மவுஸ் உதவி கொண்டு செலெக்ட் செய்ய உதவுகின்றது. Ctrl பட்டன் உதவி கொண்டு ஒன்றுக்கும் மேற்பட்ட எலெமெண்டுகளை செலெக்ட் செய்யலாம்
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI selectable-1</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#selectable-1 .ui-selecting { background: #cdc8b1 ; }
#selectable-1 .ui-selected { background: #006400; color: #000000; }
#selectable-1 { list-style-type: none; margin: 0;
padding: 0; width: 20%; }
#selectable-1 li { margin: 3px; padding: 0.4em;
font-size: 16px; height: 18px; }
.ui-widget-content {
background: #00ced1;
border: 1px solid #DDDDDD;
color: #8b0a50;
}
</style>
<script>
$(function() {
$( "#selectable-1" ).selectable();
});
</script>
</head>
<body>
<ol id="selectable-1">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
</body>
</html>
jQueryUI Sortable
ஜெகொரி சார்ட்டபிள் மெத்தட் உதவி கொண்டு ஒரு லிஸ்டை சார்ட் செய்யலாம் . அதாவது மவுஸ் உதவி கொண்டு ஒரு லிஸ்டை நமக்கு வேண்டிய வரிசையில் மாற்றியைத்துக் கொள்ள வேண்டும்.
<!DOCTYPE html>
<head>
<title>jQuery UI Sortable - Example</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable-1 { list-style-type: none; margin: 0;
padding: 0; width: 25%; }
#sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
background: lightgreen;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#sortable-1" ).sortable();
});
</script>
</head>
<body>
<h1> Courses Available at JavaTpoint</h1>
<ul id="sortable-1">
<li class="default">Java/J2EE</li>
<li class="default">.NET</li>
<li class="default">SQL</li>
<li class="default">PHP</li>
<li class="default">Android</li>
<li class="default">C/C++</li>
<li class="default">jQuery</li>
</ul>
</body>
</html>
நன்றி.
முத்து கார்த்திகேயன்,மதுரை
contact: 91 9629329142
No comments:
Post a Comment