chicago
Version:
A front-end JavaScript library for user-interface developers.
131 lines (125 loc) • 3.68 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chicago Test</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="main">
<header class="header">
<h1>#Chicago.events.transition</h1>
<ul class="breadcrumb">
<li><a href="../static/">Chicago.js Visual Tests</a></li>
<li class="active"><span>_c.events.transition</span></li>
</ul>
</header>
<article class="body">
<div class="row">
<div class="col-6-12">
<div class="panel panel-box">
<legend>
<div class="flex flex-middle flex-space-between padding-bottom">
<div class="col">Example:</div>
<div class="col">
<button class="button button-primary" id="trigger">Trigger Transition</button>
</div>
</div>
</legend>
<div class="preview">
<div class="box box-transition"></div>
</div>
</div>
</div>
<div class="col-6-12">
<div class="panel panel-box">
<legend>Output:</legend>
<h4>Start</h4>
<table class="start">
<thead>
<tr>
<th style="width:50%">Property Name:</th>
<th style="width:50%">Initial Value:</th>
</tr>
</thead>
<tbody></tbody>
</table>
<h4>Progress</h4>
<table class="progress">
<thead>
<tr>
<th style="width:33.333%">Property Name:</th>
<th style="width:33.333%">Value:</th>
<th style="width:33.333%">Elapsed Time:</th>
</tr>
</thead>
<tbody></tbody>
</table>
<h4>Complete</h4>
<table class="complete">
<thead>
<tr>
<th style="width:33.333%">Property Name:</th>
<th style="width:33.333%">End Value:</th>
<th style="width:33.333%">Elapsed Time:</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</article>
</div>
<script src="js/jquery.js"></script>
<script src="../../dist/Chicago.js"></script>
<script>
;(function(_c, $, window, document) {
_c.$('.box').on('transition', {
start : function( property, value ) {
var html = [
'<tr data-start="' + property + '">',
'<td style="width:50%"><em>' + property + '</em></td>',
'<td style="width:50%">' + value + '</td>',
'</tr>',
];
_c.$('.start tbody').append( html.join('') );
},
progress : function( property, cssValue, elapsedTime ) {
if( _c.$('[data-progress="' + property + '"]').length ) {
_c.$('[data-progress="' + property + '"]').find('[data-value]').text( cssValue );
_c.$('[data-progress="' + property + '"]').find('[data-time]').text( elapsedTime );
} else {
var html = [
'<tr data-progress="' + property + '">',
'<td><em>' + property + '</em></td>',
'<td data-value>' + cssValue + '</td>',
'<td data-time>' + elapsedTime + '</td>',
'</tr>',
];
_c.$('.progress tbody').append( html.join('') );
}
},
complete : function( property, cssValue, elapsedTime ) {
var html = [
'<tr data-complete="' + property + '">',
'<td><em>' + property + '</em></td>',
'<td>' + cssValue + '</td>',
'<td>' + elapsedTime + '</td>',
'</tr>',
];
_c.$('.complete tbody').append( html.join('') );
}
}, function(evt) {
console.log(evt);
});
_c.$('#trigger').on('click', function() {
_c.$('.box').toggleClass('active');
_c.$('table tbody').html('');
});
})(Chicago, jQuery, window, document);
</script>
</body>
</html>