Permalink
Browse files

* fix bug Tabs with close icon and clean demo js

* fix bug Tabs with close icon
* Clean demo.js
* Add open dialog in combination examples (tabs)
  • Loading branch information...
1 parent c2c0465 commit 77d9931a79dbae46fce84a13849b2d4b2b8cb929 @gtraxx gtraxx committed Dec 12, 2012
Showing with 79 additions and 132 deletions.
  1. +5 −8 css/custom-theme/jquery-ui-1.9.2.custom.css
  2. +20 −23 index.html
  3. +54 −101 js/demo.js
@@ -849,17 +849,15 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
.ui-slider-vertical .ui-slider-range-max { top: 0; }
/*
- * jQuery UI Tabs 1.9.0
+ * jQuery UI Tabs 1.9.2
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://jqueryui.com/tabs/
*/
- .ui-tabs .ui-tabs-nav{ background:none; border-color: #ddd;
- border-style: solid;
- border-width: 0 0 1px;}
+ .ui-tabs .ui-tabs-nav{ background:none; border-color: #ddd;border-style: solid;border-width: 0 0 1px;}
.ui-tabs { position: relative; padding: .2em; zoom: 1; border:0px;} /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
@@ -879,7 +877,6 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
box-shadow: 0px 0px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
.ui-tabs .ui-tabs-nav li a {
-
float: left;
text-decoration: none;
cursor: text;
@@ -895,19 +892,19 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: 0; padding-bottom: 0px; outline:none;}
-.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
-
+.ui-tabs .ui-tabs-nav li.ui-tabs-active , .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: #ffffff;
cursor: default;
color:gray;
outline:none;
}
-
+.ui-tabs .ui-tabs-nav li.ui-tabs-active a{background-color: #ffffff;outline:none;border:none;}
.ui-tabs .ui-tabs-nav li.ui-tabs-active:hover{
background:#ffffff;
outline:none;
+ margin-bottom:0px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; color:#0069D6; background:none; font-weight:normal; margin-bottom:-1px;}
View
@@ -88,21 +88,6 @@ <h2 class="demoHeaders">Accordion</h2>
</div>
<!--end accordion-->
- <!-- Tabs -->
- <h2 class="demoHeaders">Tabs</h2>
- <div id="tabs">
- <ul>
- <li><a href="#tabs-1">First</a></li>
- <li><a href="#tabs-2">Second</a></li>
- <li><a href="#tabs-3">Third</a></li>
- </ul>
- <div id="tabs-1">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.</div>
- <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
- <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
- </div>
- <!--end tabs-->
-
-
<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
<h2 class="demoHeaders">Dialog</h2>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
@@ -330,7 +315,19 @@ <h2 class="demoHeaders">Framework Icons (content color preview)</h2>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
</ul>
-
+ <!-- Tabs -->
+ <h2 class="demoHeaders">Tabs</h2>
+ <div id="tabs">
+ <ul>
+ <li><a href="#tabs-1">First</a></li>
+ <li><a href="#tabs-2">Second</a></li>
+ <li><a href="#tabs-3">Third</a></li>
+ </ul>
+ <div id="tabs-1">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.</div>
+ <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
+ <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
+ </div>
+ <!--end tabs-->
<!--Dynamic tabs-->
<style>
@@ -379,18 +376,18 @@ <h2 class="demoHeaders">Dynamic Tabs</h2>
<!--start combinations-->
<h2 class="demoHeaders">Combination examples</h2>
<div class="columnbox" style="height: 200px;">
- <div id="tabs2">
+ <div id="tabs3">
<ul>
- <li><a href="#tabs2-1">First</a></li>
- <li><a href="#tabs2-2">Second</a></li>
- <li><a href="#tabs2-3">Third</a></li>
+ <li><a href="#tabs3-1">First</a></li>
+ <li><a href="#tabs3-2">Second</a></li>
+ <li><a href="#tabs3-3">Third</a></li>
</ul>
- <div id="tabs2-1">
+ <div id="tabs3-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget diam nec urna hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquam ligula non nulla cursus volutpat. Aliquam malesuada felis nec turpis auctor interdum. Cras et lobortis dolor. Nam sodales, dolor eu cursus faucibus, justo leo vestibulum turpis, id malesuada erat ipsum et leo. Integer id aliquam augue. Proin quis risus magna.</p>
<a href="#" id="sampleButton">Change</a>
</div>
- <div id="tabs2-2">Tab 2</div>
- <div id="tabs2-3">Tab 3</div>
+ <div id="tabs3-2">Tab 2</div>
+ <div id="tabs3-3">Tab 3</div>
</div>
</div>
<!--end combinations-->
View
@@ -6,7 +6,7 @@ $(function () {
});
// Tabs
- $('#tabs2, #tabs').tabs();
+ $('#tabs2, #tabs, #tabs3').tabs();
// Buttons
$('button').button();
@@ -154,136 +154,89 @@ $(function () {
}).parent().buttonset();
- var $tab_title_input = $("#tab_title"),
- $tab_content_input = $("#tab_content");
- var tab_counter = 2;
-
- // tabs init with a custom tab template and an "add" callback filling in the content
- var $tabs = $("#tabs2").tabs({
- tabTemplate: "<li><a href='#{href}'>#{label}</a></li>",
- add: function (event, ui) {
- var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
- $(ui.panel).append("<p>" + tab_content + "</p>");
- }
- });
-
- // modal dialog init: custom buttons and a "close" callback reseting the form inside
- var $dialog = $("#dialog2").dialog({
- autoOpen: false,
- modal: true,
- buttons: {
- Add: function () {
- addTab();
- $(this).dialog("close");
- },
- Cancel: function () {
- $(this).dialog("close");
- }
- },
- open: function () {
- $tab_title_input.focus();
- },
- close: function () {
- $form[0].reset();
- }
- });
-
- // addTab form: calls addTab function on submit and closes the dialog
- var $form = $("form", $dialog).submit(function () {
- addTab();
- $dialog.dialog("close");
- return false;
- });
-
- // actual addTab function: adds new tab using the title input from the form above
-
-
- function addTab() {
- var tab_title = $tab_title_input.val() || "Tab " + tab_counter;
- $tabs.tabs("add", "#tabs-" + tab_counter, tab_title);
- tab_counter++;
- }
-
- // addTab button: just opens the dialog
- $("#add_tab").button().click(function () {
- $dialog.dialog("open");
- });
-
- // close icon: removing the tab on click
- // note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
- $("#tabs span.ui-icon-close").on("click", function () {
- var index = $("li", $tabs).index($(this).parent());
- $tabs.tabs("remove", index);
- });
-
// Filament datepicker
$('#rangeA').daterangepicker();
$('#rangeBa, #rangeBb').daterangepicker();
// Dynamic tabs
- var $tab_title_input = $("#tab_title"),
- $tab_content_input = $("#tab_content");
- var tab_counter = 2;
-
- // tabs init with a custom tab template and an "add" callback filling in the content
- var $tabs = $("#tabs2").tabs({
- tabTemplate: "<li><a href='#{href}'>#{label}</a></li>",
- add: function (event, ui) {
- var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
- $(ui.panel).append("<p>" + tab_content + "</p>");
- }
- });
+ var tabTitle = $( "#tab_title" ),
+ tabContent = $( "#tab_content" ),
+ tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
+ tabCounter = 2;
+
+ var tabs = $( "#tabs2" ).tabs();
// modal dialog init: custom buttons and a "close" callback reseting the form inside
- var $dialog = $("#dialog2").dialog({
+ var dialog = $( "#dialog2" ).dialog({
autoOpen: false,
modal: true,
buttons: {
- Add: function () {
+ Add: function() {
addTab();
- $(this).dialog("close");
+ $( this ).dialog( "close" );
},
- Cancel: function () {
- $(this).dialog("close");
+ Cancel: function() {
+ $( this ).dialog( "close" );
}
},
- open: function () {
- $tab_title_input.focus();
- },
- close: function () {
- $form[0].reset();
+ close: function() {
+ form[ 0 ].reset();
}
});
// addTab form: calls addTab function on submit and closes the dialog
- var $form = $("form", $dialog).submit(function () {
+ var form = dialog.find( "form" ).submit(function( event ) {
addTab();
- $dialog.dialog("close");
- return false;
+ dialog.dialog( "close" );
+ event.preventDefault();
});
- // actual addTab function: adds new tab using the title input from the form above
-
+ // actual addTab function: adds new tab using the input from the form above
function addTab() {
- var tab_title = $tab_title_input.val() || "Tab " + tab_counter;
- $tabs.tabs("add", "#tabs-" + tab_counter, tab_title);
- tab_counter++;
+ 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().click(function () {
- $dialog.dialog("open");
- });
+ $( "#add_tab" )
+ .button()
+ .click(function() {
+ dialog.dialog( "open" );
+ });
// close icon: removing the tab on click
- // note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
- $("#tabs span.ui-icon-close").on("click", function () {
- var index = $("li", $tabs).index($(this).parent());
- $tabs.tabs("remove", index);
+ $( "#tabs2" ).on( "click",'span.ui-icon-close', function() {
+
+ var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
+ $( "#" + panelId ).remove();
+ tabs.tabs( "refresh" );
});
-
+ //Combination examples (tabs) and open dialog
+ $('#sampleButton').on('click', function(event){
+ event.preventDefault();
+ $('#dialog').dialog({
+ autoOpen: true,
+ modal: true,
+ width: 600,
+ buttons: {
+ "Save": function () {
+ $(this).dialog("close");
+ },
+ "Cancel": function () {
+ $(this).dialog("close");
+ }
+ }
+ });
+ });
// File input (using http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/)
$('#file').customFileInput({
button_position : 'right'

0 comments on commit 77d9931

Please sign in to comment.