jquery.ui library now is in its module directory
This commit is contained in:
parent
fd335a57b5
commit
6481cf646a
491 changed files with 0 additions and 0 deletions
|
|
@ -0,0 +1,68 @@
|
|||
|
||||
/*************************************/
|
||||
/* Real-World CSS */
|
||||
|
||||
@import "real-world.css";
|
||||
|
||||
/*************************************/
|
||||
/* Demo CSS */
|
||||
|
||||
#sidebar div {
|
||||
text-align:center;
|
||||
}
|
||||
.thumb ul {
|
||||
padding:10px 0 0 0;
|
||||
}
|
||||
.thumbs li {
|
||||
margin:4px 20px;
|
||||
}
|
||||
.thumbs li a,
|
||||
.thumbs li a img{
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
display: block;
|
||||
}
|
||||
.thumbs li a:hover,
|
||||
.thumbs li a:hover img{
|
||||
height: 130px;
|
||||
width: 130px;
|
||||
}
|
||||
.thumbs li a:hover {
|
||||
border: 4px solid #E8EEF7;
|
||||
}
|
||||
|
||||
#break strong {
|
||||
margin:0 0 4px 0;
|
||||
}
|
||||
#break ul {
|
||||
padding:6px;
|
||||
}
|
||||
#break ul li {
|
||||
padding:3px 0px;
|
||||
font-style: italic;
|
||||
}
|
||||
#break ul li span {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ui-resizable-knob {
|
||||
border: 1px #fff dashed;
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
/* Cropper CSS */
|
||||
|
||||
#_Container_Image, #\\_Container\\_Image {
|
||||
position: relative;
|
||||
}
|
||||
#_Container, #\\_Container {
|
||||
position: absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width: 150px;
|
||||
height:150px;
|
||||
}
|
||||
|
||||
#_Wrapper, #\\_Wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
var getSizeImg = function(src) {
|
||||
var timg = $('<img>').attr('src', src).css({ position: 'absolute', top: '-1000px', left: '-1000px' }).appendTo('body');
|
||||
var size = {width: timg.get(0).offsetWidth, height: timg.get(0).offsetHeight };
|
||||
|
||||
try { document.body.removeChild(timg[0]); }
|
||||
catch(e) {};
|
||||
|
||||
return size;
|
||||
};
|
||||
|
||||
$().ready(function(){
|
||||
|
||||
$('#_Container').resizable({
|
||||
containment: $('#_Wrapper'),
|
||||
handles: 'all',
|
||||
knobHandles: true,
|
||||
autoHide: true,
|
||||
minWidth: 100,
|
||||
minHeight: 100,
|
||||
resize: function(event, ui){
|
||||
var self = $(this).data("resizable"),
|
||||
imageSize = $('#_Container').data("image-size"),
|
||||
top = self.position.top,
|
||||
height = ((self.position.top + self.size.height) <= imageSize.height ? self.size.height : imageSize.height),
|
||||
left = self.position.left,
|
||||
width = ((self.position.left + self.size.width) <= imageSize.width ? self.size.width : imageSize.width);
|
||||
|
||||
left = left > 0 ? left : 0;
|
||||
top = top > 0 ? top : 0;
|
||||
|
||||
var bgPos = '-' + (left + 1) + 'px -' + (top + 1) + 'px';
|
||||
|
||||
//the borders of the resize rect are offsetting the bg pos incorrectly. subtract (add, since its a negative) 1 to fix.
|
||||
$(this).css({backgroundPosition: bgPos});
|
||||
|
||||
$("#log-top").html(top + "px");
|
||||
$("#log-height").html(height + "px");
|
||||
$("#log-left").html(left + "px");
|
||||
$("#log-width").html(width + "px");
|
||||
},
|
||||
stop: function(event, ui){
|
||||
var self = $(this).data("resizable"),
|
||||
top = self.position.top,
|
||||
left = self.position.left;
|
||||
|
||||
left = left > 0 ? left : 0;
|
||||
top = top > 0 ? top : 0;
|
||||
|
||||
$(this).css({backgroundPosition: ((left + 1) * -1) + 'px ' + ((top + 1) * -1) + 'px'});
|
||||
}
|
||||
})
|
||||
.draggable({
|
||||
cursor: 'move',
|
||||
containment: $('#_Wrapper'),
|
||||
drag: function(event, ui){
|
||||
var self = $(this).data("draggable");
|
||||
$(this).css({backgroundPosition: ((self.position.left + 1) * -1) + 'px ' + ((self.position.top + 1) * -1) + 'px'});
|
||||
|
||||
$("#log-top").html(self.position.top+"px");
|
||||
$("#log-left").html(self.position.left+"px");
|
||||
}
|
||||
});
|
||||
|
||||
$('.thumbs')
|
||||
.find("li a")
|
||||
.click(function(event){
|
||||
$('#_Container').css({top: '0', left: '0'});
|
||||
|
||||
var size = getSizeImg($(this).find("img").attr("src"));
|
||||
|
||||
$('#_Container_Image').css({
|
||||
width: size.width,
|
||||
height: size.height,
|
||||
background: 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0%'
|
||||
});
|
||||
|
||||
$('#_Wrapper').css({ width: size.width, height: size.height });
|
||||
$('#_Container')
|
||||
.css('background', 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0px 0px')
|
||||
.data("image-size", size);
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#_Container_Image').css({ opacity: 0.5 });
|
||||
$("#log-height").html($('#_Container').height()+"px");
|
||||
$("#log-width").html($('#_Container').width()+"px");
|
||||
|
||||
$(".thumbs li a:first").click();
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
|
|
@ -0,0 +1,52 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Language" content="en" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Image Cropper: jQuery Real-world Demo</title>
|
||||
|
||||
<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.resizable.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.draggable.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../ui/effects.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.bounce.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.scale.js"></script>
|
||||
|
||||
<link href="image-cropper.css" type="text/css" rel="stylesheet" />
|
||||
|
||||
<script type="text/javascript" src="image-cropper.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sidebar">
|
||||
<ul class="thumbs">
|
||||
<li><a href="#" title="Open This Image"><img src="img/img01.jpg"/></a></li>
|
||||
<li><a href="#" title="Open This Image"><img src="img/img02.jpg"/></a></li>
|
||||
<li><a href="#" title="Open This Image"><img src="img/img03.jpg"/></a></li>
|
||||
<li><a href="#" title="Open This Image"><img src="img/img04.jpg"/></a></li>
|
||||
<li><a href="#" title="Open This Image"><img src="img/img05.jpg"/></a></li>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div id="header">
|
||||
<h2>jQuery Real-world Demo: Image Cropper</h2>
|
||||
</div>
|
||||
<div id="content">
|
||||
<div id="_Wrapper">
|
||||
<div id="_Container_Image"></div>
|
||||
<div id="_Container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="break">
|
||||
<strong>Properties:</strong>
|
||||
<ul>
|
||||
<li>width: <span id="log-width">0px</span></li>
|
||||
<li>height: <span id="log-height">0px</span></li>
|
||||
<li>top: <span id="log-top">0px</span></li>
|
||||
<li>left: <span id="log-left">0px</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
/*************************************/
|
||||
/* Blueprint: reset.css */
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Remember to define focus styles! */
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
color: black;
|
||||
background: white;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Tables still need 'cellspacing="0"' in the markup. */
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Remove possible quote marks (") from <q>, <blockquote>. */
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: "";
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: "" "";
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear:both;
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
/* Layout */
|
||||
body, html {
|
||||
height: 100%;
|
||||
font-family:sans-serif;
|
||||
font-size:13px;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
body, html {
|
||||
height: 100%;
|
||||
font-family:sans-serif;
|
||||
font-size:13px;
|
||||
|
||||
}
|
||||
#main {
|
||||
height:auto;
|
||||
background: #E8EEF7;
|
||||
border-left:1px solid #ccc;
|
||||
border-bottom:1px solid #ccc;
|
||||
margin:0 0 0 200px;
|
||||
}
|
||||
#header {
|
||||
height:30px;
|
||||
padding:10px;
|
||||
font-size:2em;
|
||||
font-weight:bold;
|
||||
text-align: center;
|
||||
border-bottom:1px solid #ccc;
|
||||
background: #E8EEF7;
|
||||
}
|
||||
#main #content {
|
||||
padding:10px;
|
||||
background: #FFF;
|
||||
}
|
||||
#main #break {
|
||||
padding:10px;
|
||||
border-top:1px solid #ccc;
|
||||
}
|
||||
#sidebar {
|
||||
float:left;
|
||||
width:200px;
|
||||
height:100%;
|
||||
border-right:1px solid #ccc;
|
||||
}
|
||||
#sidebar div {
|
||||
padding:10px;
|
||||
}
|
||||
Reference in a new issue