JQuery UI Tabs Simple Manipulation Example

Jqury UI

Nicesnippets

370

02-07-2020


JQuery UI Tabs Simple Manipulation Example

Hi Guys,

In this example,I will learn you how to use tabs simple manipulation in jquery ui.you can easy and simply use tabs simple manipulation 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>jQuery UI Tabs - Simple manipulation</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>

.content{

margin:40px auto;

width:600px;

}

#dialog label, #dialog input {

display:block;

}

#dialog label {

margin-top: 0.5em;

}

#dialog input, #dialog textarea {

width: 95%;

}

#tabs {

margin-top: 1em;

}

#tabs li .ui-icon-close {

float: left;

margin: 0.4em 0.2em 0 0;

cursor: pointer;

}

#add_tab {

cursor: pointer;

background:green;

color:#fff;

border:1px solid green;

}

h2{

text-align: center;

}

body{

background-color: #f7f267;

}

</style>

</head>

<body>

<h2>JQuery UI Tabs Simple manipulation Example- Nicesnippets.com</h2>

<div class="content">

<div id="dialog" title="Tab data">

<form>

<fieldset class="ui-helper-reset">

<label for="tab_title">Title</label>

<input type="text" name="tab_title" id="tab_title" value="Tab Title" class="ui-widget-content ui-corner-all">

<label for="tab_content">Content</label>

<textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all">Tab content</textarea>

</fieldset>

</form>

</div>

<button id="add_tab">Add Tab</button>

<div id="tabs">

<ul>

<li><a href="#tabs-1">Tab 1</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>

</ul>

<div id="tabs-1">

<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>

</div>

</div>

</body>

<script>

$( function() {

var tabTitle = $( "#tab_title" ),

tabContent = $( "#tab_content" ),

tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",

tabCounter = 2;

var tabs = $( "#tabs" ).tabs();

// Modal dialog init: custom buttons and a "close" callback resetting the form inside

var dialog = $( "#dialog" ).dialog({

autoOpen: false,

modal: true,

buttons: {

Add: function() {

addTab();

$(this ).dialog( "close" );

},

Cancel: function() {

$( this ).dialog( "close" );

}

},

close: function() {

form[ 0 ].reset();

}

});

// AddTab form: calls addTab function on submit and closes the dialog

var form = dialog.find( "form" ).on( "submit", function( event ) {

addTab();

dialog.dialog( "close" );

event.preventDefault();

});

// Actual addTab function: adds new tab using the input from the form above

function addTab() {

var label = tabTitle.val() || "Tab " + tabCounter,

id = "tabs-" + tabCounter,

li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),

tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

tabs.find( ".ui-tabs-nav" ).append( li );

tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );

tabs.tabs( "refresh" );

tabCounter++;

}

// AddTab button: just opens the dialog

$( "#add_tab" )

.button()

.on( "click", function() {

dialog.dialog( "open" );

});

// Close icon: removing the tab on click

tabs.on( "click", "span.ui-icon-close", function() {

var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );

$( "#" + panelId ).remove();

tabs.tabs( "refresh" );

});

tabs.on( "keyup", function( event ) {

if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {

var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );

$( "#" + panelId ).remove();

tabs.tabs( "refresh" );

}

});

});

</script>

</html>

It will help you...


Recommended Posts