মঙ্গলবার, ১৪ মে, ২০১৩
jquery backend form design by tab
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<style type="text/css">
#ulid {
background-color:red;
}
#ulid li{
background-color:green;
color:white;
}
</style>
<script>
$(document).ready(function() {
$(function() {
$( "#CreatingQuotation" ).tabs();
$( "#CreatingQuotation" ).tabs( "option", "disabled", [ 1, 2, 3 ] );
});
$("#clickid").click(function() {
if($("#inputfield").val() === ''){
$("#inputfield").css("border", "1px solid red");
}else{
$("#CreatingQuotation").tabs( "enable", 1 );
$("#CreatingQuotation").tabs( "option", "active", 1 );
document.getElementById("number").innerHTML=3;
$( "#formid" )[0].reset();
}
});
$("#preview").click(function() {
$("#CreatingQuotation").tabs( "option", "active", 0 );
});
});
</script>
</head>
<body>
<p id="number">1</p>
<div id="CreatingQuotation">
<ul id="ulid">
<li id="p1"><a href="#tabs1">Contact Info</a></li>
<li id="p2"><a href="#tabs2">Education</a></li>
<li id="p3"><a href="#tabs3">Professional Experience</a></li>
<li id="p4"><a href="#tabs4">Additional Skills</a></li>
</ul>
<div id="tabs1">
<form id="formid">
<input type="text" id="inputfield"/>
<input type="button" id="clickid" value="Test" />
</form>
</div>
<div id="tabs2">
Tabs 2
<p id="preview">Preview</p>
</div>
<div id="tabs3">
Tabs 3
</div>
<div id="tabs4">
Tabs 4
</div>
</div><!--end of tabs-->
</body>
</html>
এতে সদস্যতা:
মন্তব্যগুলি পোস্ট করুন (Atom)
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন