New 'libraries' folder in root instalation directory
This commit is contained in:
parent
05b6a91b0c
commit
006992b900
2267 changed files with 50 additions and 65 deletions
185
libraries/jquery.ui/demos/real-world/product-slider/index.html
Normal file
185
libraries/jquery.ui/demos/real-world/product-slider/index.html
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<title>Slider Gallery</title>
|
||||
<style type="text/css" media="screen">
|
||||
<!--
|
||||
body {
|
||||
padding: 0;
|
||||
font: 1em "Trebuchet MS", verdana, arial, sans-serif;
|
||||
font-size: 100%;
|
||||
background-color: #212121;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
#container {
|
||||
background-color: #fff;
|
||||
width: 580px;
|
||||
margin: 15px auto;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
/* slider specific CSS */
|
||||
.sliderGallery {
|
||||
background: url(images/productbrowser_background_20070622.jpg) no-repeat;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
height: 160px;
|
||||
width: 560px;
|
||||
}
|
||||
|
||||
.sliderGallery UL {
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
overflow: none;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sliderGallery UL LI {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 542px;
|
||||
height: 17px;
|
||||
margin-top: 140px;
|
||||
margin-left: 5px;
|
||||
padding: 1px;
|
||||
position: absolute;
|
||||
background: url(images/productbrowser_scrollbar_20070622.png) no-repeat;
|
||||
}
|
||||
|
||||
.handle {
|
||||
position: absolute;
|
||||
cursor: move;
|
||||
height: 17px;
|
||||
width: 181px;
|
||||
top: 0;
|
||||
background: url(images/productbrowser_scroller_20080115.png) no-repeat;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.slider span {
|
||||
color: #bbb;
|
||||
font-size: 80%;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 110;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.slider .slider-lbl1 {
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.slider .slider-lbl2 {
|
||||
left: 107px;
|
||||
}
|
||||
|
||||
.slider .slider-lbl3 {
|
||||
left: 156px;
|
||||
}
|
||||
|
||||
.slider .slider-lbl4 {
|
||||
left: 280px;
|
||||
}
|
||||
|
||||
.slider .slider-lbl5 {
|
||||
left: 455px;
|
||||
}
|
||||
-->
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
/**
|
||||
* Note that we have to use window.onload because $(document).ready() fires before images are loaded
|
||||
* and ul.innerWidth() - container.outerWidth(); doesn't give the correct width because the width
|
||||
* of the UL hasn't expanded out until the images have finished rendering.
|
||||
*/
|
||||
window.onload = function () {
|
||||
var container = $('div.sliderGallery');
|
||||
var ul = $('ul', container);
|
||||
|
||||
var itemsWidth = ul.innerWidth() - container.outerWidth();
|
||||
|
||||
$('.slider', container).slider({
|
||||
min: 0,
|
||||
max: itemsWidth,
|
||||
handle: '.handle',
|
||||
stop: function (event, ui) {
|
||||
ul.animate({'left' : ui.value * -1}, 500);
|
||||
},
|
||||
slide: function (event, ui) {
|
||||
ul.css('left', ui.value * -1);
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<h1>Slider Gallery</h1>
|
||||
<p>This shows a demonstration of a slider widget from the jQuery UI library used to create the same effect used on <a href="http://www.apple.com/mac/">Apple's web site</a>.</p>
|
||||
<p><a href="http://jqueryfordesigners.com/slider-gallery">Read the article, and see the screencast this demonstration relates to</a></p>
|
||||
|
||||
<div class="sliderGallery">
|
||||
<ul>
|
||||
<li><img class="pb-airportexpress" src="images/pb_airport_express.jpg" /></li>
|
||||
<li><img src="images/pb_airport_extreme.jpg" /></li>
|
||||
<li><img src="images/pb_timecapsule_20080115.jpg" /></li>
|
||||
<li><img src="images/pb_keyboards20070807.jpg" /></li>
|
||||
<li><img src="images/pb_mighty_mouse.jpg" /></li>
|
||||
<li><img src="images/pb_cinema_display20071026.jpg" /></li>
|
||||
<li><img src="images/pb_mac_pro_20070622.jpg" /></li>
|
||||
|
||||
<li><img class="pb-macmini" src="images/pb_mac_mini.jpg" /></li>
|
||||
<li><img src="images/pb_macbook20071026.jpg" /></li>
|
||||
<li><img class="pb-macbookair" src="images/pb_macbookair_20080115.jpg" /></li>
|
||||
<li><img class="pb-macbookpro" src="images/pb_macbook_pro20071026.jpg" /></li>
|
||||
<li><img class="pb-imac" src="images/pb_imac20071026.jpg" /></li>
|
||||
<li><img src="images/pb_macosx_20080115.jpg" /></li>
|
||||
<li><img src="images/pb_ilife_20080115.jpg" /></li>
|
||||
<li><img src="images/pb_dot_mac_20080115.jpg" /></li>
|
||||
<li><img src="images/pb_iwork_20080115.jpg" /></li>
|
||||
|
||||
<li><img src="images/pb_quicktime.jpg" /></li>
|
||||
<li><img src="images/pb_aperture20080212.jpg" /></li>
|
||||
<li><img src="images/pb_final_cut_studio2_20080115.jpg" /></li>
|
||||
<li><img src="images/pb_final_cut_express_20080115.jpg" /></li>
|
||||
<li><img src="images/pb_logic_studio_20080115.jpg" /></li>
|
||||
<li><img src="images/pb_logic_express_20080115.jpg" /></li>
|
||||
<li><img src="images/pb_shake_20080115.jpg" /></li>
|
||||
<li><img src="images/pb_apple_remote_desktop_20080115.jpg" /></li>
|
||||
<li><img src="images/pb_xserve.jpg" /></li>
|
||||
|
||||
<li><img src="images/pb_xserve_raid.jpg" /></li>
|
||||
<li><img class="pb-xsan" src="images/pb_xsan_20080115.jpg" /></li>
|
||||
<li><img class="pb-macosxserver" src="images/pb_macosx_server20071016.jpg" /></li>
|
||||
</ul>
|
||||
<div class="slider">
|
||||
<div class="handle"></div>
|
||||
<span class="slider-lbl1">Wi-Fi</span>
|
||||
<span class="slider-lbl3">Macs</span>
|
||||
<span class="slider-lbl4">Applications</span>
|
||||
<span class="slider-lbl5">Servers</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in a new issue