Skip to content

Commit

Permalink
tidying up markup
Browse files Browse the repository at this point in the history
  • Loading branch information
@addyosmani
addyosmani committed Dec 20, 2011
1 parent 7a9218e commit ba84dc4
Showing 1 changed file with 130 additions and 133 deletions.
263 changes: 130 additions & 133 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,35 +74,35 @@
function() { $(this).removeClass('ui-state-hover'); }
);

//Autocomplete
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];

$( "#tags" ).autocomplete({
source: availableTags
});
//Autocomplete
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];

$( "#tags" ).autocomplete({
source: availableTags
});


//Dialogs
Expand All @@ -115,6 +115,7 @@
}
}
});

//Remove focus from buttons
$('.ui-dialog :button').blur();

Expand All @@ -139,6 +140,7 @@
.buttonset();
});
</script>

<style type="text/css">
/*demo page css*/
html{
Expand Down Expand Up @@ -205,7 +207,7 @@
<div id="components">


<h1>Welcome to (AOL) jQuery UI Bootstrap!</h1>
<h1>Welcome to jQuery UI Bootstrap!</h1>
<p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;">This page demonstrates a rethemed jQuery UI using Twitter bootstrap. It was developed for projects at AOL and is being open-sourced in case it can help others.</p>

<!-- Highlight / Error -->
Expand Down Expand Up @@ -253,14 +255,14 @@ <h2 class="demoHeaders">Buttons</h2>
</div>


</br>
</br>
<div>
<button id="rerun">Run last action</button>
<button id="select">Select an action</button>
</div>

</br>
</br>
</br>
</br>

<h2 class="demoHeaders">Button set</h2>
<form style="margin-top: 1em;">
Expand Down Expand Up @@ -301,106 +303,103 @@ <h2 class="demoHeaders">Tabs</h2>

<!--Dynamic tabs-->

<style>
#dialog2 label, #dialog2 input { display:block; }
#dialog2 label { margin-top: 0.5em; }
#dialog2 input, #dialog2 textarea { width: 95%; }
#tabs2 { margin-top: 1em; }
#tabs2 li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
#add_tab { cursor: pointer; }

.ui-datepicker td .ui-state-default {
border:0px;
background:none;
margin-bottom:0px;
}

.ui-datepicker-calendar{
border:0px;
}
.ui-datepicker-current-day, .ui-datepicker-today a{
margin-bottom:0px;
}

.ui-datepicker td .ui-state-active{
margin-bottom:0px;
font-weight:bold;
font-size:normal;
<style>
#dialog2 label, #dialog2 input { display:block; }
#dialog2 label { margin-top: 0.5em; }
#dialog2 input, #dialog2 textarea { width: 95%; }
#tabs2 { margin-top: 1em; }
#tabs2 li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
#add_tab { cursor: pointer; }

.ui-datepicker td .ui-state-default {
border:0px;
background:none;
margin-bottom:0px;
}


}
.ui-datepicker-calendar{
border:0px;
}
.ui-datepicker-current-day, .ui-datepicker-today a{
margin-bottom:0px;
}

.ui-datepicker td .ui-state-active{
margin-bottom:0px;
font-weight:bold;
font-size:normal;
}

</style>
</style>


<script type="text/javascript">
$(function() {
<script type="text/javascript">
$(function() {


var $tab_title_input = $( "#tab_title"),
$tab_content_input = $( "#tab_content" );
var tab_counter = 2;
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>" );
}
});
// 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" );
// 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" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
open: function() {
$tab_title_input.focus();
},
close: function() {
$form[ 0 ].reset();
}
},
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;
});
// 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++;
}
// 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" );
});
// 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" ).live( "click", function() {
var index = $( "li", $tabs ).index( $( this ).parent() );
$tabs.tabs( "remove", index );
// 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" ).live( "click", function() {
var index = $( "li", $tabs ).index( $( this ).parent() );
$tabs.tabs( "remove", index );
});
});
});
</script>
</script>



Expand Down Expand Up @@ -710,25 +709,23 @@ <h2 class="demoHeaders">Datepicker</h2>
<div id="datepicker"></div>


<h2 class="demoHeaders">Other</h2>
<h2 class="demoHeaders">Other</h2>

<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Master volume
</p>
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Master volume
</p>

<!--static dialog-->


<div id="dialog-message" title="Modal Dialog">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
<div id="dialog-message" title="Modal Dialog">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>



Expand Down

0 comments on commit ba84dc4

Please sign in to comment.