<script type="text/javascript"> var toggled = false; $(document).ready(function() { $("#tabs").tabs(); $("#progressbar").progressbar({value: 20}); $("button").button(); $("button").click(function(){ toggled=!toggled; if(toggled == true){ $("#progressbar").progressbar({value:80}); }else{ $("#progressbar").progressbar({value:20}); } }); $("#animate").button(); $("#animate").click(function(){ toggled=!toggled; if(toggled == true){ $("#progressbar .ui-progressbar-value").animate({width:"80%"},{queue:false}); }else{ $("#progressbar .ui-progressbar-value").animate({width:"20%"},{queue:false}); } } ); }); </script>
<body> <h2>Tabs</h2> <!-- A grouping DIV element that contains all the tabs and their contents --> <div id="tabs"> <!-- Create a <ul> element to host all the tabs --> <ul> <!-- For each tab, create a <li> element and insert an anchor <a> element --> <!-- the anchor element points to the div that contains the contents of the tab --> <li><a href="#class1">First</a></li> <li><a href="#class2">Second</a></li> <li><a href="#class3">Third</a></li> </ul> <!-- after the <ul> element, list the DIV elements that contain the tabs contents--> <div id="class1">welcome to Hijjawi website</div> <div id="class2">welcome to Computer Engineering website</div> <div id="class3">welcome to Yarmouk Univeristy website</div> </div> <br /> <div> <button>Change Progress bar</button> </div> <br /> <div> <div id="progressbar"></div> </div> <br /> <input type="button" id="animate" value="Animate Progress Bar" />
______________________________________________________ <head> <title>Calculate Numbers</title> <script type="text/javascript" language="javascript"> function CalculateSumOfNumbers(NumberValue, TextBoxToSet) { var i = 1; var sum = 1; for (i = 1; i <= NumberValue; i++) { sum += i; } TextBoxToSet.value = sum; } function Clear(object) { object.value = ""; } </script> </head> <body> <form action="" method="get" name="frmCalc" id="frmCalc"> <div align="center"> Calculate the sum of numbers between 1 and <input type="text" id="Number" name="NumberTextBox" /> <br /> Result: <input type="text" name="Result" id="Result" disabled="disabled" /><br /> <input type="button" value="Calculate" onclick="CalculateSumOfNumbers(document.frmCalc.Number.value, document.frmCalc.Result)"/> <br /> <input type="button" value="Clear" onclick="Clear(document.frmCalc.Number); Clear(document.frmCalc.Result);" /> </div> </form> </body> </html>