library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added mockup of the link to view demo in a new window and the view source spindown that need to be added above and below the description under the iframe. Demo css updated with styles needed and made Trebuchet MS the font on all rules.

Browse Source
This commit is contained in:
Todd Parker 2009-01-05 20:23:14 +00:00
parent 5bfbbf79f3
commit de31d5b16c
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
demos/demos.css
View File

@ -10,7 +10,7 @@ table {
-------------------------------- */ -------------------------------- */
body { body {
font-family: "Arial", "Helvetica", "Verdana", "sans-serif"; font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
} }
/* Layout /* Layout
@ -31,7 +31,7 @@ body {
.layout-grid td.normal { .layout-grid td.normal {
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
padding: 20px 24px; padding: 20px 24px;
font-family: "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
} }
.layout-grid td.demos { .layout-grid td.demos {
@ -83,7 +83,7 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
letter-spacing: 0.75pt; letter-spacing: 0.75pt;
font: bold 1.2em 'Arial', 'Helvetica', sans-serif; font: bold 1.2em "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
color: #e87b10; color: #e87b10;
} }
@ -98,7 +98,7 @@ body {
.demos-nav li a { .demos-nav li a {
border-bottom: 1px solid #F4F4F4; border-bottom: 1px solid #F4F4F4;
display:block; display:block;
padding: 3px 3px 3px 12px; padding: 3px 3px 3px 3px;
font-size: 95%; font-size: 95%;
text-decoration: none; text-decoration: none;
color: #000; color: #000;
@ -134,10 +134,10 @@ eventually we should convert the font sizes to ems -- using px for now to minimi
#demo-config-menu ul { list-style: none; padding: 0; margin: 0; } #demo-config-menu ul { list-style: none; padding: 0; margin: 0; }
#demo-config-menu li { font-size:11px; padding:0 0 0 10px; margin:3px 0; zoom: 1; } #demo-config-menu li { font-size:12px; padding:0 0 0 10px; margin:3px 0; zoom: 1; }
#demo-config-menu li a:link, #demo-config-menu li a:link,
#demo-config-menu li a:visited { display:block; padding:2px 8px 3px; border-bottom:1px dotted #b3b3b3; } #demo-config-menu li a:visited { display:block; padding:3px 8px 2px; border-bottom:1px dotted #b3b3b3; }
#demo-config-menu li a:hover, #demo-config-menu li a:hover,
#demo-config-menu li a:active { background-color:#f6f6f6; } #demo-config-menu li a:active { background-color:#f6f6f6; }
@ -191,3 +191,6 @@ div.demo-description {
.left-nav .demos-nav { .left-nav .demos-nav {
padding-right: 10px; padding-right: 10px;
} }
#demo-link { font-size:11px; margin:6px 0 20px 0; }
#demo-link a span.ui-icon { float:left; margin-right:3px; }

17
demos/index.html
View File

@ -160,7 +160,7 @@
function updateDemoNotes() { function updateDemoNotes() {
var notes = $('#demo-frame .demo-description'); var notes = $('#demo-frame .demo-description');
if ($('#demo-notes').length == 0) { if ($('#demo-notes').length == 0) {
$('<div id="demo-notes"></div>').insertAfter('#demo-config'); $('<div id="demo-notes"></div>sdfdffd').insertAfter('#demo-config');
} }
$('#demo-notes').hide().empty().html(notes.html()); $('#demo-notes').hide().empty().html(notes.html());
$('#demo-notes').fadeIn(); $('#demo-notes').fadeIn();
@ -209,6 +209,21 @@
<p> <p>
These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started. Have fun playing with them. These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started. Have fun playing with them.
</p> </p>
<iframe></iframe>
<div id="demo-link">
<a href="foo" class="demoWindowLink"><span class="ui-icon ui-icon-newwin"></span>Open demo in a new window</a>
</div>
<p>The description for the demo goes here, below the link to open the demo in a new window. The description for the demo goes here, below the link to open the demo in a new window. The description for the demo goes here, below the link to open the demo in a new window.</p>
<div id="demo-source">
<a href="#" class="source-closed">View source</a><!-- change the class to "source-open" when code is visible -->
</div>
<?php } ?> <?php } ?>
</div> </div>