mirror of
https://github.com/owncloudarchive/contacts.git
synced 2025-02-11 05:54:27 +01:00
8c3d7ccdba
Remove old combobox user bower for onfontresize Add jcrop + md5 Add files to scrutinizer ignore list Remove misplaced text Selected the right MultiSelect library via bower Move bower dependencies to correct location
228 lines
6.0 KiB
HTML
228 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Animations + Transitions | Jcrop Demo</title>
|
|
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
|
|
|
|
<script src="../js/jquery.min.js"></script>
|
|
<script src="../js/jquery.Jcrop.js"></script>
|
|
<script src="../js/jquery.color.js"></script>
|
|
<script type="text/javascript">
|
|
jQuery(function($){
|
|
|
|
var jcrop_api;
|
|
|
|
$('#target').Jcrop({
|
|
bgFade: true,
|
|
bgOpacity: .2,
|
|
setSelect: [ 60, 70, 540, 330 ]
|
|
},function(){
|
|
jcrop_api = this;
|
|
});
|
|
|
|
$('#fadetog').change(function(){
|
|
jcrop_api.setOptions({
|
|
bgFade: this.checked
|
|
});
|
|
}).attr('checked','checked');
|
|
|
|
$('#shadetog').change(function(){
|
|
if (this.checked) $('#shadetxt').slideDown();
|
|
else $('#shadetxt').slideUp();
|
|
jcrop_api.setOptions({
|
|
shade: this.checked
|
|
});
|
|
}).attr('checked',false);
|
|
|
|
// Define page sections
|
|
var sections = {
|
|
bgc_buttons: 'Change bgColor',
|
|
bgo_buttons: 'Change bgOpacity',
|
|
anim_buttons: 'Animate Selection'
|
|
};
|
|
// Define animation buttons
|
|
var ac = {
|
|
anim1: [217,122,382,284],
|
|
anim2: [20,20,580,380],
|
|
anim3: [24,24,176,376],
|
|
anim4: [347,165,550,355],
|
|
anim5: [136,55,472,183]
|
|
};
|
|
// Define bgOpacity buttons
|
|
var bgo = {
|
|
Low: .2,
|
|
Mid: .5,
|
|
High: .8,
|
|
Full: 1
|
|
};
|
|
// Define bgColor buttons
|
|
var bgc = {
|
|
R: '#900',
|
|
B: '#4BB6F0',
|
|
Y: '#F0B207',
|
|
G: '#46B81C',
|
|
W: 'white',
|
|
K: 'black'
|
|
};
|
|
// Create fieldset targets for buttons
|
|
for(i in sections)
|
|
insertSection(i,sections[i]);
|
|
|
|
function create_btn(c) {
|
|
var $o = $('<button />').addClass('btn btn-small');
|
|
if (c) $o.append(c);
|
|
return $o;
|
|
}
|
|
|
|
var a_count = 1;
|
|
// Create animation buttons
|
|
for(i in ac) {
|
|
$('#anim_buttons .btn-group')
|
|
.append(
|
|
create_btn(a_count++).click(animHandler(ac[i])),
|
|
' '
|
|
);
|
|
}
|
|
|
|
$('#anim_buttons .btn-group').append(
|
|
create_btn('Bye!').click(function(e){
|
|
$(e.target).addClass('active');
|
|
jcrop_api.animateTo(
|
|
[300,200,300,200],
|
|
function(){
|
|
this.release();
|
|
$(e.target).closest('.btn-group').find('.active').removeClass('active');
|
|
}
|
|
);
|
|
return false;
|
|
})
|
|
);
|
|
|
|
// Create bgOpacity buttons
|
|
for(i in bgo) {
|
|
$('#bgo_buttons .btn-group').append(
|
|
create_btn(i).click(setoptHandler('bgOpacity',bgo[i])),
|
|
' '
|
|
);
|
|
}
|
|
// Create bgColor buttons
|
|
for(i in bgc) {
|
|
$('#bgc_buttons .btn-group').append(
|
|
create_btn(i).css({
|
|
background: bgc[i],
|
|
color: ((i == 'K') || (i == 'R'))?'white':'black'
|
|
}).click(setoptHandler('bgColor',bgc[i])), ' '
|
|
);
|
|
}
|
|
// Function to insert named sections into interface
|
|
function insertSection(k,v) {
|
|
$('#interface').prepend(
|
|
$('<fieldset></fieldset>').attr('id',k).append(
|
|
$('<legend></legend>').append(v),
|
|
'<div class="btn-toolbar"><div class="btn-group"></div></div>'
|
|
)
|
|
);
|
|
};
|
|
// Handler for option-setting buttons
|
|
function setoptHandler(k,v) {
|
|
return function(e) {
|
|
$(e.target).closest('.btn-group').find('.active').removeClass('active');
|
|
$(e.target).addClass('active');
|
|
var opt = { };
|
|
opt[k] = v;
|
|
jcrop_api.setOptions(opt);
|
|
return false;
|
|
};
|
|
};
|
|
// Handler for animation buttons
|
|
function animHandler(v) {
|
|
return function(e) {
|
|
$(e.target).addClass('active');
|
|
jcrop_api.animateTo(v,function(){
|
|
$(e.target).closest('.btn-group').find('.active').removeClass('active');
|
|
});
|
|
return false;
|
|
};
|
|
};
|
|
|
|
$('#bgo_buttons .btn:first,#bgc_buttons .btn:last').addClass('active');
|
|
$('#interface').show();
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
|
|
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
|
|
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
|
|
<link rel="stylesheet" href="../css/jquery.Jcrop.extras.css" type="text/css" />
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="span12">
|
|
<div class="jc-demo-box">
|
|
|
|
<div class="page-header">
|
|
<ul class="breadcrumb first">
|
|
<li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
|
|
<li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
|
|
<li class="active">Animations + Transitions</li>
|
|
</ul>
|
|
<h1>Animations + Transitions</h1>
|
|
</div>
|
|
|
|
|
|
<div class="row-fluid">
|
|
<div class="span9">
|
|
<img src="demo_files/sago.jpg" id="target" alt="Jcrop Image" />
|
|
|
|
<div class="description">
|
|
<p id="shadetxt" style="display:none; color:#900;">
|
|
<b>Experimental shader active.</b>
|
|
Jcrop now includes a shading mode that facilitates building
|
|
better transparent Jcrop instances. The experimental shader is less
|
|
robust than Jcrop's default shading method and should only be
|
|
used if you require this functionality.
|
|
</p>
|
|
|
|
<p>
|
|
<b>Animation/Transitions.</b>
|
|
Demonstration of animateTo API method and transitions for bgColor
|
|
and bgOpacity options. Color fading requires inclusion of John Resig's
|
|
jQuery <a href="http://plugins.jquery.com/project/color">Color
|
|
Animations</a> plugin. If it is not included, colors will not fade.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="span3" id="interface">
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="fadetog" /> Enable fading (bgFade: true)
|
|
</label>
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="shadetog" /> Use experimental shader (shade: true)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tapmodo-footer">
|
|
<a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
|
|
<div class="segment"><b>© 2008-2013 Tapmodo Interactive LLC</b><br />
|
|
Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|