Jquery Programming Examples

jQuery - Alertify

jquery

<!doctype html>
<!--
https://www.tutorialspoint.com/jquery/jquery-alertify.htm
-->
<html lang = "en">
   
   <head>
      <meta charset = "utf-8">
      <title>alertify.js - example page</title>
      <link rel = "stylesheet" href = "https://www.tutorialspoint.com/jquery/src/alertify/alertify.core.css" />
      <link rel = "stylesheet" href = "https://www.tutorialspoint.com/jquery/src/alertify/alertify.default.css" id = "toggleCSS" />
      <meta name = "viewport" content = "width = device-width">
		
      <style>
         .alertify-log-custom {
            background: blue;
         }
      </style>
   </head>
	
   <body>
      <h2>Dialogs</h2>
		
      <a href = "#" id = "alert">Alert Dialog</a><br>
      <a href = "#" id = "confirm">Confirm Dialog</a><br>
      <a href = "#" id = "prompt">Prompt Dialog</a><br>
      <a href = "#" id = "labels">Custom Labels</a><br>
      <a href = "#" id = "focus">Button Focus</a><br>
      <a href = "#" id = "order">Button Order</a>

      <h2>Ajax</h2>
      <a href = "#" id = "ajax">Ajax - Multiple Dialog</a>

      <h2>Logs</h2>
		
      <a href = "#" id = "notification">Standard Log</a><br>
      <a href = "#" id = "success">Success Log</a><br>
      <a href = "#" id = "error">Error Log</a><br>
      <a href = "#" id = "custom">Custom Log</a><br>
      <a href = "#" id = "delay">Hide in 10 seconds</a><br>
      <a href = "#" id = "forever">Persistent Log</a>

      <h2>Themes</h2>
      <a href = "#" id = "bootstrap">Bootstrap Theme</a>

      <script src = "https://code.jquery.com/jquery-1.9.1.js">
      </script>
      <script src = "https://www.tutorialspoint.com/jquery/src/alertify/alertify.min.js"></script>
		
      <script>
         function reset () {
            $("#toggleCSS").attr("href", "https://www.tutorialspoint.com/jquery/src/alertify/alertify.default.css");
				
            alertify.set({
               labels : {
                  ok     : "OK",
                  cancel : "Cancel"
               },
					delay : 5000,
               buttonReverse : false,
               buttonFocus   : "ok"
            });
         }
         $("#alert").on( 'click', function () {
            reset();
            alertify.alert("This is an alert dialog");
            return false;
         });
         $("#confirm").on( 'click', function () {
            reset();
				
            alertify.confirm("This is a confirm dialog", function (e) {
               if (e) {
                  alertify.success("You've clicked OK");
               } else {
                  alertify.error("You've clicked Cancel");
               }
            });
				
            return false;
         });
         $("#prompt").on( 'click', function () {
            reset();
				
            alertify.prompt("This is a prompt dialog", function (e, str) {
               if (e) {
                  alertify.success("You've clicked OK and typed: " + str);
               } else {
                  alertify.error("You've clicked Cancel");
               }
            }, "Default Value");
				
            return false;
         });
         $("#ajax").on("click", function () {
            reset();
				
            alertify.confirm("Confirm?", function (e) {
               if (e) {
                  alertify.alert("Successful AJAX after OK");
               } else {
                  alertify.alert("Successful AJAX after Cancel");
               }
            });
         });
         $("#notification").on( 'click', function () {
            reset();
            alertify.log("Standard log message");
            return false;
         });
         $("#success").on( 'click', function () {
            reset();
            alertify.success("Success log message");
            return false;
         });
         $("#error").on( 'click', function () {
            reset();
            alertify.error("Error log message");
            return false;
         });
         $("#delay").on( 'click', function () {
            reset();
            alertify.set({ delay: 10000 });
            alertify.log("Hiding in 10 seconds");
            return false;
         });
         $("#forever").on( 'click', function () {
            reset();
            alertify.log("Will stay until clicked", "", 0);
            return false;
         });
         $("#labels").on( 'click', function () {
            reset();
            alertify.set({ labels: { ok: "Accept", cancel: "Deny" } });
				
            alertify.confirm("Confirm dialog with custom button labels", function (e) {
               if (e) {
                  alertify.success("You've clicked OK");
               } else {
                  alertify.error("You've clicked Cancel");
               }
            });
				
            return false;
         });
         $("#focus").on( 'click', function () {
            reset();
            alertify.set({ buttonFocus: "cancel" });
				
            alertify.confirm("Confirm dialog with cancel button focused", function (e) {
               if (e) {
                  alertify.success("You've clicked OK");
               } else {
                  alertify.error("You've clicked Cancel");
               }
            });
				
            return false;
         });
         $("#order").on( 'click', function () {
            reset();
            alertify.set({ buttonReverse: true });
				
            alertify.confirm("Confirm dialog with reversed button order", function (e) {
               if (e) {
                  alertify.success("You've clicked OK");
               } else {
                  alertify.error("You've clicked Cancel");
               }
            });
				
            return false;
         });
         $("#custom").on( 'click', function () {
            reset();
            alertify.custom = alertify.extend("custom");
            alertify.custom("I'm a custom log message");
            return false;
         });
         $("#bootstrap").on( 'click', function () {
            reset();
            $("#toggleCSS").attr("href", "https://www.tutorialspoint.com/jquery/src/alertify/alertify.bootstrap.css");
				
            alertify.prompt("Prompt dialog with bootstrap theme", function (e) {
               if (e) {
                  alertify.success("You've clicked OK");
               } else {
                  alertify.error("You've clicked Cancel");
               }
            }, "Default Value");
				
            return false;
         });
			
      </script>
   </body>
</html>

jQuer - Datepicker

jquery

<!doctype html>
<!--
https://www.tutorialspoint.com/jqueryui/jqueryui_datepicker.htm
-->
<html lang = "kr">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(document).ready(function() {
             $("body").click(function(event) {
   console.log("clicked: " + event.target);
});

            //1. Default functionality
            $( "#datepicker-11" ).datepicker();
            $( "#datepicker-12" ).datepicker();
            $( "#datepicker-13" ).datepicker();
            $( "#button-11" ).tooltip();
            $( "#datepicker-11" ).tooltip({disabled: false});
            $( "#datepicker-12" ).tooltip({content: "<strong>Hi!</strong>",
               track:true});            
            $( "#datepicker-13" ).tooltip({disabled: true});
            //동적으로 생성된 DOM개체의 이벤트에 연결
            $( "#datepicker-12" ).on('change', function(){
                alert($( this ).val());
            }
            );
            $("#datepicker-13").focusin(function() {
                $("#datepicker-13").css("background-color", "green");  
            });
            $("#datepicker-13").blur(function() {
                $("#datepicker-13").css("background-color", "white");  
            });    
            $( "#datepicker-13" ).change(function(){
                //$("#datepicker-13").attr("disabled", true);
                $("#datepicker-13").css("background-color", "blue");       
            }
            );
            
            $( "#button-11" ).click(function(){
                alert($("#datepicker-11").val());
            }
            );  
            
            //2. Inline Datepicker
            $( "#datepicker-2" ).datepicker();
            $( "#button-2" ).click(function(){
                alert($("#datepicker-2").val());
            }
            );      
            $( "#datepicker-2" ).change(function(){
                $( "#label-2" ).text($( "#datepicker-2" ).val());
            }
            );  
            
            //3. Use of appendText, dateFormat, altField and altFormat
            $( "#datepicker-31" ).datepicker({
               appendText:"(yy/mm/dd)",
               dateFormat:"yy/mm/dd",
               altField: "#datepicker-32",
               altFormat: "DD, d MM, yy"               
            });
            //4. Use of beforeShowDay
            $( "#datepicker-4" ).datepicker({
                dateFormat:"yy/mm/dd",
               beforeShowDay : function (date) {
                  var dayOfWeek = date.getDay ();
                  // 0 : Sunday, 1 : Monday, ...
                  if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
                  else return [true];
               }
            });
            //5. Use of defaultDate, dayNamesMin, and duration
            $( "#datepicker-5" ).datepicker({
               defaultDate:+9,
               dayNamesMin: [ "일", "월", "화", "수", "목", "금", "토" ],
               duration: "slow"
            });  
            
            //7. Use of changeMonth, changeYear, and numberOfMonths
            $( "#datepicker-7" ).datepicker({
               changeMonth:true,
               changeYear:true,
               numberOfMonths:[1,1]
            });            
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div>1. Default functionality
      <p>Enter Date1: <input type = "text" id = "datepicker-11" title="date1"><input type = "button" id = "button-11" value="button-11" title="Date1 값 확인"></p>
      <p>Enter Date2: <input type = "text" id = "datepicker-12" title="date2"></p>
      <p>Enter Date3: <input type = "text" id = "datepicker-13" title="date3"></p>
      </div>
      
      <div>2. Inline Datepicker
      <p>
      Enter Date: <div id = "datepicker-2"></div>
      <input type = "button" id = "button-2" value="button-2">
      <label id="label-2"></label>
      </div> 
      <p></p>
      <div> 3. 
      Use of appendText, dateFormat, altField and altFormat
      <p>Enter Date: <input type = "text" id = "datepicker-31"></p>
      <p>Alternate Date: <input type = "text" id = "datepicker-32"></p>      
      </div> 
      
      <p>
          4. Use of beforeShowDay
<p>Enter Date: <input type = "text" id = "datepicker-4"></p>          
      </p>
      
      <p>
      5. Use of defaultDate, dayNamesMin, and duration
<p>Enter Date: <input type = "text" id = "datepicker-5"></p>         
      </p>    
      
    <p>
      7. Use of changeMonth, changeYear, and numberOfMonths
<p>Enter Date: <input type = "text" id = "datepicker-7"></p>        
      </p>       
   </body>
</html>

jquery recursive drag and drop

jquery

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .list {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  .child {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }
  .nested {
      background: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( ".connectedSortable" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  } );
  </script>
</head>
<body>
 
<div class="list connectedSortable">
    <div class="ui-state-default child">Item 1</div>
    <div class="ui-state-default child">Item 2</div>
    <div class="connectedSortable nested">
        <div class="ui-state-default child">Item 3</div>
        <div class="ui-state-default child">Item 4</div>
    </div>
    <div class="ui-state-default child">Item 5</div>
</div>
 
<ul class="list connectedSortable">
  <li class="ui-state-highlight child">Item 1</li>
  <li class="ui-state-highlight child">Item 2</li>
  <li class="ui-state-highlight child">Item 3</li>
  <li class="ui-state-highlight child">Item 4</li>
  <li class="ui-state-highlight child">Item 5</li>
</ul>
 
 
</body>
</html>

Online jQuery Editor

jquery

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery Add Table Rows</title>
      <style>
         table{
           width: 100%;
           margin: 25px 0;
           border-collapse: collapse;
         }
         table, th, td{
           border: 1px solid #6C220B;
         }
         table th, table td{
           padding: 8px;
           text-align: left;
         }
      </style>
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script>
         $(document).ready(function(){
         
             $(".row").click(function(){
         
                 var name = $("#name").val();
         
                 var dvt = $("#dvt").val();
                 
                 var sl = $("#sl").val();
                 
                 var dg = $("#dg").val();
                 
                 var t2 = $("#t2").val();
         
                 var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + dvt + "</td><td>" + sl + "</td><td>" + dg + "</td><td>" + t2 + "</td></tr>";
         
                 $("table tbody").append(markup);
         
             });         
         });    
      </script>
   </head>
   <body>
       <h2>TỜ TRÌNH</h2>
      <form>
          Căn cứ lệnh công tác:<input type="text"></br>
          1. Họ tên: </br>
          2. Loại phương tiện:               3. Biển số:</br>
          4. Định đường loại I (a):</br>
          5. ĐM đường loại II (b):</br>
          6. Chỉ số công tơ mét đi (1):                         Chỉ số công tơ mét về (2):</br>
          7. Số km đã thực hiện (2-1): </br>
          
          
         <input type="text" id="name" placeholder="Tên nhiên liệu">
         <input type="text" id="dvt" placeholder="ĐVT">
         <input type="text" id="sl" placeholder="Số lượng">
         <input type="text" id="dg" placeholder="Đơn giá bao gồm cả VAT">
         <input type="text" id="t2" placeholder="Thành tiền">
         <input type="button" class="row" value="Click to Add Row">
      </form>
      <table>
         <thead>
            <tr>
               <th>Choose</th>
               <th>Tên NL</th>
               <th>ĐVT</th>
               <th>Số lượng</th>
               <th>ĐG gồm VAT</th>
               <th>Thành tiền</th>

            </tr>
         </thead>
         <tbody>
            <tr>
               <td><input type="checkbox" name="result"></td>
               <td>#</td>
               <td>#</td>
               <td>#</td>
               <td>#</td>
               <td>#</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Animation World

jquery

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function(){
            $("button").click(function(){
               $("div").animate({left:"200px",top:"200px"},1500);
            }); 
         });
      </script>
		
      <style>
        
      </style>
   </head>
	
   <body>
      <button>Click me!</button>
      <br>
      <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
          
   </body>
</html>

Understanding document ready method in jQuery

jquery

<html>

   <head>
      <title>jQuery Function</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

      <script>
     $(window).load(function(){
        alert("ok Mukesh Kumar Chauhan"); 
     });
     
     $(document).ready(function(){
         alert('ok');
     });
      </script>
   </head>
	
   
</html>

Online jQuery Editor

jquery

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>

1234

jquery

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
       $('[data-slide="0"]').addClass('demo');
    });
</script>
<style>
.demo {
    font-size: 150%;
    color: red;
}
</style>
</head>
<body>

<p data-slide="0">Rocky</p>
<p data-slide="1">Amit</p>
<p data-slide="2">John</p>

</body>
</html>

How to place two divs next to each other in HTML

jquery

<!DOCTYPE html>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div style="width: 100px; float:left; height:200px; background:gray; margin:10px; valign: middle">
First DIV
</div>
<div style="width: 100px; float:left; height:200px; background:yellow; margin:10px; valign: middle">
Second DIV
</div>
</body>
</html>

Online jQuery Editor

jquery

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  
  $("#myid").click(function(){alert("my name is pawan")})

});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>

Follow

Newsletter