Skip to content

All topics  /  jQuery

Jquery UI Styles Tag Example Tutorial

jQuery ·

Hi Guys

Now, let's see post of create styles tag jquery ui. you will learn how to create simple tag using jquery ui. if you want to see example of jquery ui using make styles tag. you will learn jquery ui tag example. Follow bellow tutorial step of example of jquery ui tag.

Here the example of simple tag using jquery ui.

Example


Now this simple tag using jquery ui and design code: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Easy-Stylable-jQuery-Tags-Input-Plugin-Tag-Input/src/jquery.taginput.css">
  <style type="text/css">
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        color: #1c94c4;
    }
    .container{
      margin-top:150px;
    }
    body{
      background-color: #3ed68e;
    }
  </style>
</head>
  <body>
  <div class="container">
    <div class="col-md-5 col-md-offset-3">
    <h4 class="text-center">Jquery UI Styles Tag Example</h4>
    <div class="panel panel-default">
        <div class="panel-body">
          <input id="taginput-jqueryui" type="text" value="jQuery,tag,ui" />
      </div>
    </div>
    </div>    
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Easy-Stylable-jQuery-Tags-Input-Plugin-Tag-Input/src/jquery.taginput.src.js"></script>
<script type="text/javascript">
  jQuery(function($) {
      'use strict';
      $('.panel-default').hover(
        function(){
        $(this).addClass('panel-primary').removeClass('panel-default');
        },
        function(){
        $(this).removeClass('panel-primary').addClass('panel-default');
        }
      );
      prettyPrint();
      $('#taginput-jqueryui').taginput();
      $('#taginput-bootstrap').taginput({
          style: 'bootstrap'
      });
      $('#taginput-custom').taginput({
          style: {
            tagTpl: $('#wrapperTpl').html(),
              wrapperTpl: '<div class="custom-style">',
              deleteHandler: '.ui-icon-close'
          }
      });
  });
</script>
</html>

I will help you...

More on this topic