jquery ui Archives - Codeplaners https://codeplaners.com/tag/jquery-ui/ Code Solution Sat, 25 Sep 2021 00:22:06 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.7 https://codeplaners.com/wp-content/uploads/2020/09/cropped-favicon-social-32x32.png jquery ui Archives - Codeplaners https://codeplaners.com/tag/jquery-ui/ 32 32 Select Option jQuery UI Example https://codeplaners.com/select-option-jquery-ui-example/ https://codeplaners.com/select-option-jquery-ui-example/#respond Sat, 25 Sep 2021 00:22:06 +0000 https://codeplaners.com/?p=1310 Hi Dev, Today, i we will show you select option jQuery ui example. This article will give you simple example of select option jQuery ui example. you will select option jQuery ui example. So let’s follow few step to create example of select option jQuery ui example. Example: I hope it will assist you…

The post Select Option jQuery UI Example appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you select option jQuery ui example. This article will give you simple example of select option jQuery ui example. you will select option jQuery ui example. So let’s follow few step to create example of select option jQuery ui example.

Example:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Select Option jQuery UI Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <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>
    <style>
        label{
            display:block;
            margin:30px 0 0 0;
        }
        .overflow{
            height:200px;
        }
        .demo{
            margin: 0 auto;
            width:50%;
        }
        h2{
            text-align: center;
        }
        .demo fieldset{
            margin-top:120px;
            padding:0px 0px 50px 200px;
        }
    </style>
</head>
<body>
<h2>Select Option jQuery UI Example</h2>
<div class="demo">
    <form action="#">
        <fieldset>
            <label for="speed">Select a speed</label>
            <select name="speed" id="speed">
                <option>Slower</option>
                <option>Slow</option>
                <option selected="selected">Medium</option>
                <option>Fast</option>
                <option>Faster</option>
            </select>
            <label for="files">Select a file</label>
            <select name="files" id="files">
                <optgroup label="Scripts">
                    <option value="jquery">jQuery.js</option>
                    <option value="jqueryui">ui.jQuery.js</option>
                </optgroup>
                <optgroup label="Other files">
                    <option value="somefile">PHP</option>
                    <option value="someotherfile">Laravel</option>
                </optgroup>
            </select>
                <label for="number">Select a number</label>
                <select name="number" id="number">
                <option selected="selected">1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
     
            <label for="salutation">Select a title</label>
            <select name="salutation" id="salutation">
                <option disabled selected>Please pick one</option>
                <option>Mr.</option>
                <option>Mrs.</option>
                <option>Dr.</option>
                <option>Prof.</option>
                <option>Other</option>
            </select>
        </fieldset>
    </form>
</div>

    <script>
        $(function(){
            $( "#speed" ).selectmenu();
            $( "#files" ).selectmenu();
            $( "#number" )
                .selectmenu()
                .selectmenu( "menuWidget" )
                .addClass( "overflow" );
            $("#salutation").selectmenu();
        });
  </script>
</body>
</html>

I hope it will assist you…

The post Select Option jQuery UI Example appeared first on Codeplaners.

]]> https://codeplaners.com/select-option-jquery-ui-example/feed/ 0 Animation Effects In JQuery UI https://codeplaners.com/animation-effects-in-jquery-ui/ https://codeplaners.com/animation-effects-in-jquery-ui/#respond Sat, 25 Sep 2021 00:08:46 +0000 https://codeplaners.com/?p=1305 Hi Dev, Today, i we will show you animation effects in jQuery ui. This article will give you simple example of animation effects in jQuery ui. you will animation effects in jQuery ui. So let’s follow few step to create example of animation effects in jQuery ui. Example: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> … Continue reading "Animation Effects In JQuery UI"

The post Animation Effects In JQuery UI appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you animation effects in jQuery ui. This article will give you simple example of animation effects in jQuery ui. you will animation effects in jQuery ui. So let’s follow few step to create example of animation effects in jQuery ui.

Example:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Animation Effects In JQuery UI</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        canvas{
            width:150px !important;
        }
        .graph{
            width:150px !important;
            float: left;
            margin-left: 10px;
        }
        .main-class{
            margin:-107px auto;
            transform: translate(80%,50%);
            border-radius: 5px;
            padding:30px 20px;
            border:2px solid green;
            position: absolute;
        }
    </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>
</head> 
<body>
	<h2 style="text-align: center;">Animation Effects In JQuery UI</h2>
    <div class="main-class">
        <div id="graphs"></div>
    </div>
    <script>
        $( function() {
            if ( !$( "<canvas>" )[0].getContext ) {
            $( "<div>" ).text(
                "Your browser doesn't support canvas, which is required for this demo."
            ).appendTo( "#graphs" );
            return;
        }
     
        var i = 0,
            width = 100,
            height = 100;
     
        $.each( $.easing, function( name, impl ) {
            var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ),
            text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ),
            wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ),
            canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ];
     
            canvas.width = width;
            canvas.height = height;
            var drawHeight = height * 0.8,
            cradius = 10;
            ctx = canvas.getContext( "2d" );
            ctx.fillStyle = "black";
     
            // Draw background
            ctx.beginPath();
            ctx.moveTo( cradius, 0 );
            ctx.quadraticCurveTo( 0, 0, 0, cradius );
            ctx.lineTo( 0, height - cradius );
            ctx.quadraticCurveTo( 0, height, cradius, height );
            ctx.lineTo( width - cradius, height );
            ctx.quadraticCurveTo( width, height, width, height - cradius );
            ctx.lineTo( width, 0 );
            ctx.lineTo( cradius, 0 );
            ctx.fill();
     
            // Draw bottom line
            ctx.strokeStyle = "#555";
            ctx.beginPath();
            ctx.moveTo( width * 0.1, drawHeight + .5 );
            ctx.lineTo( width * 0.9, drawHeight + .5 );
            ctx.stroke();
     
            // Draw top line
            ctx.strokeStyle = "#555";
            ctx.beginPath();
            ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );
            ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );
            ctx.stroke();
     
            // Plot easing
            ctx.strokeStyle = "white";
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.moveTo( width * 0.1, drawHeight );
            $.each( new Array( width ), function( position ) {
                var state = position / width,
                 val = impl( state, position, 0, 1, width );
                ctx.lineTo( position * 0.8 + width * 0.1,
                drawHeight - drawHeight * val * 0.7 );
            });
            ctx.stroke();
     
            // Animate on click
            graph.on( "click", function() {
            wrap
              .animate( { height: "hide" }, 2000, name )
              .delay( 800 )
              .animate( { height: "show" }, 2000, name );
          });
     
            graph.width( width ).height( height + text.height() + 10 );
            });
        });
    </script>
</body>
</html>

I hope it will assist you…

The post Animation Effects In JQuery UI appeared first on Codeplaners.

]]> https://codeplaners.com/animation-effects-in-jquery-ui/feed/ 0 Input Allow Only Number In Jquery https://codeplaners.com/input-allow-only-number-in-jquery/ https://codeplaners.com/input-allow-only-number-in-jquery/#respond Sat, 25 Sep 2021 00:00:22 +0000 https://codeplaners.com/?p=1301 Hi Dev, Today, i we will show you input allow only number in jquery. This article will give you simple example of input allow only number in jquery. you will input allow only number in jquery. So let’s follow few step to create example of input allow only number in jquery. Example: <!DOCTYPE html> <html> … Continue reading "Input Allow Only Number In Jquery"

The post Input Allow Only Number In Jquery appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you input allow only number in jquery. This article will give you simple example of input allow only number in jquery. you will input allow only number in jquery. So let’s follow few step to create example of input allow only number in jquery.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Input Allow Only Number In Jquery</title>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
  
<div class="container">
    <h1>Input Allow Only Number In Jquery</h1>
    <input type="text" name="number" class="number" autocomplete="off">
</div>
</body>
<script type="text/javascript">
    $('.number').keypress(function(event) {
      if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
      }
    });
</script>
</html>

I hope it will assist you…

The post Input Allow Only Number In Jquery appeared first on Codeplaners.

]]> https://codeplaners.com/input-allow-only-number-in-jquery/feed/ 0 Modal Form JQuery UI Dialog Example https://codeplaners.com/modal-form-jquery-ui-dialog-example/ https://codeplaners.com/modal-form-jquery-ui-dialog-example/#respond Wed, 18 Aug 2021 10:22:54 +0000 https://codeplaners.com/?p=1252 Hi, Today, i we will show you modal form jQuery ui dialog example. This article will give you simple example of modal form jQuery ui dialog example. you will learn modal form jQuery ui dialog example. So let’s follow few step to create example of modal form jQuery ui dialog example. Example : <!doctype html> … Continue reading "Modal Form JQuery UI Dialog Example"

The post Modal Form JQuery UI Dialog Example appeared first on Codeplaners.

]]> Hi,

Today, i we will show you modal form jQuery ui dialog example. This article will give you simple example of modal form jQuery ui dialog example. you will learn modal form jQuery ui dialog example. So let’s follow few step to create example of modal form jQuery ui dialog example.

Modal Form JQuery UI Dialog Example

Example :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Modal Form JQuery UI Dialog Example</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <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>
    <style>
        .container{
            margin:0 auto;
            text-align:center;
            border:1px solid #000;
            width:500px;
            padding:40px 20px;
         }
        label, input{
            display:block;
        }
        input.text {
            margin-bottom:12px;
            width:95%;
            padding: .4em;
        }
        fieldset {
            padding:0; 
            border:0; 
            margin-top:25px;
        }
        h1 {font-size: 1.2em; 
            margin: .6em 0;
        }
        div#users-contain {
            width: 400px; 
            margin: 20px auto;
        }
        div#users-contain table { 
            margin: 1em 0; 
            border-collapse: collapse; 
            width: 100%;
        }
        div#users-contain table td, div#users-contain table th { 
            border: 1px solid #eee; 
            padding: .6em 10px; 
            text-align: left; }
        .ui-dialog .ui-state-error { 
            padding: .3em; 
        }
        .validateTips { 
            border: 1px solid transparent; 
            padding: 0.3em; 
        }
        h2{
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>Modal Form JQuery UI Dialog Example</h2>
    <div class="container">
        <div id="users-contain" class="ui-widget">
            <h1>Existing Users:</h1>
            <table id="users" class="ui-widget ui-widget-content">
                <thead>
                    <tr class="ui-widget-header ">
                        <th>Name</th>
                        <th>Email</th>
                        <th>Password</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John Doe</td>
                        <td>john.doe@example.com</td>
                        <td>johndoe1</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="dialog-form" title="Create new user">
            <p class="validateTips">All form fields are required.</p>
            <form>
                <fieldset>
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
                    <label for="email">Email</label>
                    <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
                    <label for="password">Password</label>
                    <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
                </fieldset>
            </form>
        </div>
        <button id="create-user">Create new user</button>
    </div>

    <script type="text/javascript">
    $( function(){
            var dialog, form,
                // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
                emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
                name = $( "#name" ),
                email = $( "#email" ),
                password = $( "#password" ),
                allFields = $( [] ).add( name ).add( email ).add( password ),
                tips = $( ".validateTips" );
                function updateTips( t ) {
                    tips
                    .text( t )
                    .addClass( "ui-state-highlight" );
                        setTimeout(function() {
                        tips.removeClass( "ui-state-highlight", 1500 );
                    }, 500 );
                }
         
                function checkLength( o, n, min, max ) {
                    if ( o.val().length > max || o.val().length < min ) {
                        o.addClass( "ui-state-error" );
                        updateTips( "Length of " + n + " must be between " +
                          min + " and " + max + "." );
                        return false;
                    }else{
                        return true;
                    }
                }
         
                function checkRegexp( o, regexp, n ) {
                    if(!( regexp.test( o.val() ) ) ) {
                        o.addClass( "ui-state-error" );
                        updateTips( n );
                    return false;
                    }else{
                        return true;
                    }
                }
         
                function addUser() {
                    var valid = true;
                    allFields.removeClass( "ui-state-error" );
             
                    valid = valid && checkLength( name, "username", 3, 16 );
                    valid = valid && checkLength( email, "email", 6, 80 );
                    valid = valid && checkLength( password, "password", 5, 16 );
             
                    valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
                    valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );
                    valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
             
                    if(valid){
                            $( "#users tbody" ).append( "<tr>" +
                            "<td>" + name.val() + "</td>" +
                            "<td>" + email.val() + "</td>" +
                            "<td>" + password.val() + "</td>" +
                            "</tr>" );
                        dialog.dialog( "close" );
                    }
                    return valid;
                }
         
                dialog = $( "#dialog-form" ).dialog({
                    autoOpen: false,
                    height: 400,
                    width: 350,
                    modal: true,
                    buttons: {
                    "Create an account": addUser,
                    Cancel: function() {
                        dialog.dialog( "close" );
                    }
              },
                close: function() {
                    form[ 0 ].reset();
                    allFields.removeClass( "ui-state-error" );
                }
            });
         
            form = dialog.find( "form" ).on( "submit", function( event ) {
                event.preventDefault();
                addUser();
            });
         
            $( "#create-user" ).button().on( "click", function() {
                dialog.dialog( "open" );
            });
        });
    </script>
</body>
</html>

I hope it will assist you…

The post Modal Form JQuery UI Dialog Example appeared first on Codeplaners.

]]> https://codeplaners.com/modal-form-jquery-ui-dialog-example/feed/ 0 How To Create Select Option Menu In Jquery Ui https://codeplaners.com/how-to-create-select-option-menu-in-jquery-ui/ https://codeplaners.com/how-to-create-select-option-menu-in-jquery-ui/#respond Sat, 14 Aug 2021 23:49:11 +0000 https://codeplaners.com/?p=1222 Hi, Today, i we will show you how to create select option menu in jquery ui. This article will give you simple example of how to create select option menu in jquery ui. you will learn how to create select option menu in jquery ui. So let’s follow few step to create example of how … Continue reading "How To Create Select Option Menu In Jquery Ui"

The post How To Create Select Option Menu In Jquery Ui appeared first on Codeplaners.

]]> Hi,

Today, i we will show you how to create select option menu in jquery ui. This article will give you simple example of how to create select option menu in jquery ui. you will learn how to create select option menu in jquery ui. So let’s follow few step to create example of how to create select option menu in jquery ui.

How To Create Select Option Menu In Jquery Ui

Example:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How To Create Select Option Menu In Jquery Ui</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <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>
    <style>
        label{
            display:block;
            margin:30px 0 0 0;
        }
        .overflow{
            height:200px;
        }
        .demo{
            margin: 0 auto;
            width:50%;
        }
        h2{
            text-align: center;
        }
        .demo fieldset{
            margin-top:0;
            padding:0px 0px 50px 200px;
        }
    </style>
</head>
<body>
<h2>How To Create Select Option Menu In Jquery Ui</h2>
<div class="demo">
    <form action="#">
        <fieldset>
            <label for="speed">Select a speed</label>
            <select name="speed" id="speed">
                <option>Slower</option>
                <option>Slow</option>
                <option selected="selected">Medium</option>
                <option>Fast</option>
                <option>Faster</option>
            </select>
            <label for="files">Select a file</label>
            <select name="files" id="files">
                <optgroup label="Scripts">
                    <option value="jquery">jQuery.js</option>
                    <option value="jqueryui">ui.jQuery.js</option>
                </optgroup>
                <optgroup label="Other files">
                    <option value="somefile">PHP</option>
                    <option value="someotherfile">Laravel</option>
                </optgroup>
            </select>
                <label for="number">Select a number</label>
                <select name="number" id="number">
                <option selected="selected">1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
     
            <label for="salutation">Select a title</label>
            <select name="salutation" id="salutation">
                <option disabled selected>Please pick one</option>
                <option>Mr.</option>
                <option>Mrs.</option>
                <option>Dr.</option>
                <option>Prof.</option>
                <option>Other</option>
            </select>
        </fieldset>
    </form>
</div>

    <script>
        $(function(){
            $( "#speed" ).selectmenu();
            $( "#files" ).selectmenu();
            $( "#number" )
                .selectmenu()
                .selectmenu( "menuWidget" )
                .addClass( "overflow" );
            $("#salutation").selectmenu();
        });
  </script>
</body>
</html>

I hope it will assist you…

The post How To Create Select Option Menu In Jquery Ui appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-create-select-option-menu-in-jquery-ui/feed/ 0 Jquery Ui Tabs Event Example https://codeplaners.com/jquery-ui-tabs-event-example/ https://codeplaners.com/jquery-ui-tabs-event-example/#respond Sat, 14 Aug 2021 23:34:12 +0000 https://codeplaners.com/?p=1219 Hi, Today, i we will show you jquery ui tabs event example. This article will give you simple example of jquery ui tabs event example. you will learn jquery ui tabs event example. So let’s follow few step to create example of jquery ui tabs event example. Example: <!DOCTYPE html> <html> <head> <title>jquery ui tabs … Continue reading "Jquery Ui Tabs Event Example"

The post Jquery Ui Tabs Event Example appeared first on Codeplaners.

]]> Hi,

Today, i we will show you jquery ui tabs event example. This article will give you simple example of jquery ui tabs event example. you will learn jquery ui tabs event example. So let’s follow few step to create example of jquery ui tabs event example.

Example:

<!DOCTYPE html>
	<html>
    <head>
        <title>jquery ui tabs event example</title>
    </head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<body>
<div class="container">
	<h1>jquery ui tabs event example</h1><br>
  	<ul class="nav nav-tabs">
	    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
	    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
	    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
	    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  	</ul>
  	<div class="tab-content">
	    <div id="home" class="tab-pane fade in active">
		      <h3>HOME</h3>
		      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	    </div>
    	<div id="menu1" class="tab-pane fade">
      		<h3>Menu 1</h3>
      		<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    	</div>
    	<div id="menu2" class="tab-pane fade">
      		<h3>Menu 2</h3>
      		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    	</div>
    	<div id="menu3" class="tab-pane fade">
      		<h3>Menu 3</h3>
      		<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    	</div>
  	</div>
</div>
<script type="text/javascript">
	$('.nav li a').click(function(){
		var data = $(this).attr("href");
		console.log(data);
	});
</script>
</body>
</html>

I hope it will assist you…

The post Jquery Ui Tabs Event Example appeared first on Codeplaners.

]]> https://codeplaners.com/jquery-ui-tabs-event-example/feed/ 0 Jquery Modal Popup Example https://codeplaners.com/jquery-modal-popup-example/ https://codeplaners.com/jquery-modal-popup-example/#respond Fri, 21 May 2021 00:13:01 +0000 https://codeplaners.com/?p=801 Hello Dev, Today, i we will show you jquery ui modal popup example. This article will give you simple example of jquery ui modal popup example. you will learn jquery ui modal popup example. So let’s follow few step to create example of jquery ui modal popup example. Example:- <html lang="en"> <head> <title>jquery modal popup … Continue reading "Jquery Modal Popup Example"

The post Jquery Modal Popup Example appeared first on Codeplaners.

]]> Hello Dev,

Today, i we will show you jquery ui modal popup example. This article will give you simple example of jquery ui modal popup example. you will learn jquery ui modal popup example. So let’s follow few step to create example of jquery ui modal popup example.

Example:-

<html lang="en">
<head>
    <title>jquery modal popup Example</title>  
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <style type="text/css">
    #dialog{
        display: none;
    }
    </style>
</head>
<body>

<button>Click To Open Popup</button>

<div id="dialog" title="Codeplaners.com">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<script type="text/javascript">
    $("button").click(function(){
        $( "#dialog" ).dialog();
    });
</script>

</body>
</html>

The post Jquery Modal Popup Example appeared first on Codeplaners.

]]> https://codeplaners.com/jquery-modal-popup-example/feed/ 0 Drag And Drop Sortable Table Rows Example https://codeplaners.com/drag-and-drop-sortable-table-rows-example/ https://codeplaners.com/drag-and-drop-sortable-table-rows-example/#respond Thu, 20 May 2021 23:59:37 +0000 https://codeplaners.com/?p=798 Hello Dev, Today, i we will show you drag and drop dortable table rows example. This article will give you simple example of drag and drop dortable table rows example. you will learn drag and drop dortable table rows example. So let’s follow few step to create example of drag and drop dortable table rows … Continue reading "Drag And Drop Sortable Table Rows Example"

The post Drag And Drop Sortable Table Rows Example appeared first on Codeplaners.

]]> Hello Dev,

Today, i we will show you drag and drop dortable table rows example. This article will give you simple example of drag and drop dortable table rows example. you will learn drag and drop dortable table rows example. So let’s follow few step to create example of drag and drop dortable table rows example.

Example:-

<html lang="en">
<head>
    <title>Jquery - Drag And Drop Sortable Table Rows Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">   
</head>
<body>
<div class="container text-center">
     <h2>Drag And Drop Sortable Table Rows Example</h2>
     <table class="table table-bordered pagin-table">
        <thead>
            <tr>
                <th width="50px">No</th>
                <th>Name</th>
                <th width="220px">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>1</td>
              <td>Code Planers</td>
              <td><a href="" class="btn btn-danger">Delete</a></td>
            </tr>
            <tr>
              <td>2</td>
              <td>Code Planers</td>
              <td><a href="" class="btn btn-danger">Delete</a></td>
            </tr>
            <tr>
              <td>3</td>
              <td>Code Planers</td>
              <td><a href="" class="btn btn-danger">Delete</a></td>
            </tr>
            <tr>
              <td>4</td>
              <td>Code Planers</td>
              <td><a href="" class="btn btn-danger">Delete</a></td>
            </tr>
            <tr>
              <td>5</td>
              <td>Code Planers</td>
              <td><a href="" class="btn btn-danger">Delete</a></td>
            </tr>
        </tbody>
    </table>
</div>	
<script type="text/javascript">
  $('tbody').sortable();
</script>
</body>
</html>

The post Drag And Drop Sortable Table Rows Example appeared first on Codeplaners.

]]> https://codeplaners.com/drag-and-drop-sortable-table-rows-example/feed/ 0 Datepicker Example in jquery ui https://codeplaners.com/datepicker-example-in-jquery-ui/ https://codeplaners.com/datepicker-example-in-jquery-ui/#respond Thu, 20 May 2021 23:49:36 +0000 https://codeplaners.com/?p=795 Hello Dev, Today, i we will show you Datepicker Example in jquery ui. This article will give you simple example of Datepicker Example in jquery ui. you will learn Datepicker Example in jquery ui. So let’s follow few step to create example of Datepicker Example in jquery ui. <html lang="en"> <head> <title>Datepicker Example in jquery … Continue reading "Datepicker Example in jquery ui"

The post Datepicker Example in jquery ui appeared first on Codeplaners.

]]> Hello Dev,

Today, i we will show you Datepicker Example in jquery ui. This article will give you simple example of Datepicker Example in jquery ui. you will learn Datepicker Example in jquery ui. So let’s follow few step to create example of Datepicker Example in jquery ui.

<html lang="en">
<head>
    <title>Datepicker Example in jquery ui</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">   
</head>
<body>

<div class="container text-center">
     <h2>Datepicker Example in jquery ui</h2>
     <strong>Select Date:</strong> <input type="text" id="datepicker" class="from-control">
</div>	

<script type="text/javascript">
    $( "#datepicker" ).datepicker();
</script>


</body>
</html>

The post Datepicker Example in jquery ui appeared first on Codeplaners.

]]> https://codeplaners.com/datepicker-example-in-jquery-ui/feed/ 0 Jquery ui tooltip example with Demo https://codeplaners.com/jquery-ui-tooltip-example-with-demo/ https://codeplaners.com/jquery-ui-tooltip-example-with-demo/#respond Thu, 20 May 2021 23:35:02 +0000 https://codeplaners.com/?p=788 Hello Dev, Today, i we will show you Jquery ui tooltip example with Demo. This article will give you simple example of Jquery ui tooltip example with Demo. you will learn Jquery ui tooltip example with Demo. So let’s follow few step to create example of Jquery ui tooltip example with Demo. <html lang="en"> <head> … Continue reading "Jquery ui tooltip example with Demo"

The post Jquery ui tooltip example with Demo appeared first on Codeplaners.

]]> Hello Dev,

Today, i we will show you Jquery ui tooltip example with Demo. This article will give you simple example of Jquery ui tooltip example with Demo. you will learn Jquery ui tooltip example with Demo. So let’s follow few step to create example of Jquery ui tooltip example with Demo.

<html lang="en">
<head>
    <title>Jquery ui tooltip example with Demo - codeplaners</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>
<body>


<div class="container">
  <button title="Jquery UI Tooltip Example">See Toltip</button>
  <script type="text/javascript">
      $( function() {
        $( document ).tooltip();
      } );
  </script>
</div>

</body>
</html>

The post Jquery ui tooltip example with Demo appeared first on Codeplaners.

]]> https://codeplaners.com/jquery-ui-tooltip-example-with-demo/feed/ 0