webgme
Version:
Web-based Generic Modeling Environment
300 lines (270 loc) • 13.5 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery CSS Zoom</title>
<link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link type="text/css" href="jquery.csszoom.css" rel="stylesheet"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.csszoom.js"></script>
<script type="text/javascript">
$(function () {
//DEFAULT
$('#demoZoom').csszoom({'zoomTarget': $('#demoZoomTarget')});
//REMOVE / REATTACH
$('#removeZoom').click(function() {
if ($(this).text() == 'Remove') {
$(this).text('Re-attach');
$('#demoZoom').csszoom('destroy');
} else {
$(this).text('Remove');
$('#demoZoom').csszoom({'zoomTarget': $('#demoZoomTarget')});
}
});
//DISABLE / ENABLE
$('#disableZoom').click(function() {
if ($(this).text() == 'Disable') {
$(this).text('Enable');
$('#demoZoom').csszoom('disable');
} else {
$(this).text('Disable');
$('#demoZoom').csszoom('enable');
}
});
//OPTIONS
$('#optionZoom1').csszoom({'zoomTarget': $('#optionZoom1Target'), zoomLevels: [1, 2, 5, 10]});
//EVENTS
$('#optionZoom2').csszoom({'zoomTarget': $('#optionZoom2Target'), onZoom: function (zoom) {
$('#optionZoomOnZoomLabel').text('Current zoom value: ' + zoom);
}});
//METHODS
$('#optionZoom3').csszoom({'zoomTarget': $('#optionZoom3Target')});
$('#zoomIn').click(function() { $('#optionZoom3').csszoom('zoomIn');});
$('#zoomOut').click(function() { $('#optionZoom3').csszoom('zoomOut');});
});
</script>
</head>
<body>
<h1>jQuery CSS Zoom</h1>
<p>A <a href="http://jquery.com">jQuery</a> plugin that transforms a DOM element into a zoom control using a jQueryUI slider. Zooming is done by CSS transform.</p>
<p>The current version is <span class="version">1.0.0</span> and is available
under the <a href="https://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt">MIT</a> licence.
<div id="tabs">
<div>
<h2>Default Settings</h2>
<p>The CSS zoom functionality can easily be added to a DOM element with appropriate default settings.<br>
<pre>
<code>
$('#demoZoom').csszoom({'zoomTarget': $('#demoZoomTarget')});
</code>
</pre>
<div id="demoZoom"></div>
<div id="demoZoomTarget">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
consectetur turpis non semper suscipit. Nullam a libero convallis, molestie est quis, sollicitudin odio.
Vestibulum lacus massa, feugiat nec tincidunt sed, gravida id mi. Cras et ullamcorper augue.
Quisque condimentum libero diam, eget porta urna gravida vitae. Aenean eget ipsum nulla. Proin quis rhoncus
augue. Nullam eu diam et quam imperdiet bibendum. Nulla facilisi. Phasellus posuere eros eget augue
condimentum pharetra. Morbi aliquet odio elit, sit amet viverra purus feugiat quis. Sed eu neque fermentum
arcu placerat lacinia vel ac est.
</div>
<p>
You can also remove the CSS zoom functionality if it is no longer required, or disable or enable the field to receive input.
</p>
<p><span class="demoLabel"> </span>
<button type="button" id="removeZoom">Remove</button>
<button type="button" id="disableZoom">Disable</button>
</p>
<pre>
<code>
$('#removeZoom').click(function() {
if ($(this).text() == 'Remove') {
$(this).text('Re-attach');
$('#demoZoom').csszoom('destroy');
} else {
$(this).text('Remove');
$('#demoZoom').csszoom({'zoomTarget': $('#demoZoomTarget')});
}
});
$('#disableZoom').click(function() {
if ($(this).text() == 'Disable') {
$(this).text('Enable');
$('#demoZoom').csszoom('disable');
} else {
$(this).text('Disable');
$('#demoZoom').csszoom('enable');
}
});
</code>
</pre>
<p style="clear: both;">You can override the defaults globally as shown below:</p>
<pre><code>$.csszoom.setDefaults({zoomLevels: [1, 2, 5, 10]});</code></pre>
</div>
<div>
<h2>Options</h2>
<p><code>zoomLevels</code>: Customise the zoom levels through additional settings.</p>
<pre>
<code>
$('#optionZoom1').csszoom({'zoomTarget': $('#optionZoom1Target'), zoomLevels: [1, 2, 5, 10]});
</code>
</pre>
<div id="optionZoom1"></div>
<div id="optionZoom1Target">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
consectetur turpis non semper suscipit. Nullam a libero convallis, molestie est quis, sollicitudin odio.
Vestibulum lacus massa, feugiat nec tincidunt sed, gravida id mi. Cras et ullamcorper augue.
Quisque condimentum libero diam, eget porta urna gravida vitae. Aenean eget ipsum nulla. Proin quis rhoncus
augue. Nullam eu diam et quam imperdiet bibendum. Nulla facilisi. Phasellus posuere eros eget augue
condimentum pharetra. Morbi aliquet odio elit, sit amet viverra purus feugiat quis. Sed eu neque fermentum
arcu placerat lacinia vel ac est.
</div>
</div>
<div>
<h2>Events</h2>
<code>onZoom</code>:<p>You can be notified when the zoom changes via the <code>onZoom</code> setting.
It receives one argument, the actual level of the zoom.</p>
<label id="optionZoomOnZoomLabel"></label>
<pre>
<code>
$('#optionZoom2').csszoom({'zoomTarget': $('#optionZoom2Target'), onZoom: function (zoom) {
$('#optionZoomOnZoomLabel').text('Current zoom value: ' + zoom);
}});
</code>
</pre>
<div id="optionZoom2"></div>
<div id="optionZoom2Target">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
consectetur turpis non semper suscipit. Nullam a libero convallis, molestie est quis, sollicitudin odio.
Vestibulum lacus massa, feugiat nec tincidunt sed, gravida id mi. Cras et ullamcorper augue.
Quisque condimentum libero diam, eget porta urna gravida vitae. Aenean eget ipsum nulla. Proin quis rhoncus
augue. Nullam eu diam et quam imperdiet bibendum. Nulla facilisi. Phasellus posuere eros eget augue
condimentum pharetra. Morbi aliquet odio elit, sit amet viverra purus feugiat quis. Sed eu neque fermentum
arcu placerat lacinia vel ac est.
</div>
</div>
<div>
<h2>Methods</h2>
<code>zoomIn</code> and <code>zoomOut</code>:<p>You can call <code>zoomIn</code> and <code>zoomOut</code> respectively to zoom-in or zoom-out.</p>
<p><span class="demoLabel"> </span>
<button type="button" id="zoomIn">zoomIn</button>
<button type="button" id="zoomOut">zoomOut</button>
</p>
<pre>
<code>
$('#optionZoom3').csszoom({'zoomTarget': $('#optionZoom3Target')});
$('#zoomIn').click(function() { $('#optionZoom3').csszoom('zoomIn');});
$('#zoomOut').click(function() { $('#optionZoom3').csszoom('zoomOut');});
</code>
</pre>
<div id="optionZoom3"></div>
<div id="optionZoom3Target">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
consectetur turpis non semper suscipit. Nullam a libero convallis, molestie est quis, sollicitudin odio.
Vestibulum lacus massa, feugiat nec tincidunt sed, gravida id mi. Cras et ullamcorper augue.
Quisque condimentum libero diam, eget porta urna gravida vitae. Aenean eget ipsum nulla. Proin quis rhoncus
augue. Nullam eu diam et quam imperdiet bibendum. Nulla facilisi. Phasellus posuere eros eget augue
condimentum pharetra. Morbi aliquet odio elit, sit amet viverra purus feugiat quis. Sed eu neque fermentum
arcu placerat lacinia vel ac est.
</div>
</div>
<div>
<h2>Styling</h2>
<p>You can adjust the appearance of the zoom slider via CSS. In addition to the default jQueryUI css classes
the main control will have a <code>css-zoom</code> definition and the
The default is to place the feedback immediately after the textarea zoom label will have a <code>css-zoom-label</code> definition.
The default styles should be defined like (see attached .css file)
<pre>
<code>
.css-zoom {
height: 100px;
width: 3px;
position: relative;
display: inline-block;
}
.css-zoom a.ui-slider-handle {
width: 15px;
height: 15px;
line-height: 15px;
left: -7px;
outline: none;
}
.css-zoom a.ui-slider-handle .css-zoom-label {
top: 0px;
left: 17px;
position: absolute;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10px;
}
</code>
</pre>
</div>
<div>
<h2>Quick Reference</h2>
<p>A full list of all possible settings is shown below.</p>
<pre><code>$(selector).csszoom({
zoomTarget: selector, //the target DOM element to be zoomed via this control
zoomLevels: [0.1, 0.25, 0.5, 1, 2, 5, 10], //the list of available zoom levels
onZoom: null // Callback when zoom level changes
// receives one parameter: the current zoom level
});
$.csszoom.setDefaults(settings) // Change settings for all instances
$(selector).csszoom('option', settings) // Change the instance settings
$(selector).csszoom('option', name, value) // Change an instance setting
$(selector).csszoom('option', name) // Retrieve an instance setting
$(selector).csszoom('enable') // Enable the css-zoom functionality
$(selector).csszoom('disable') // Disable the css-zoom functionality
$(selector).csszoom('zoomIn') // Zoom in
$(selector).csszoom('zoomOut') // Zoom out
$(selector).csszoom('destroy') // Remove the css-zoom functionality</code></pre>
</div>
</div>
<h2>Usage</h2>
<ol>
<li>Include the jQuery and jQueryUI library in the head section of your page.
<pre>
<code>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
</code>
</pre>
</li>
<li>Download and include the jQueryUI CSS in the head section of your page.
<pre>
<code>
<link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
</code>
</pre>
</li>
<li>Download and include the jQuery CSS Zoom CSS and JavaScript in the head section of your page.
<pre>
<code>
<link type="text/css" href="jquery.csszoom.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.csszoom.js"></script> or <script type="text/javascript" src="jquery.csszoom.min.js"></script>
</code>
</pre>
</li>
<li>Connect the CSS-Zoom functionality to your DOM elements.
<pre><code>$(selector).csszoom({'zoomTarget': selector});</code></pre>
</li>
</ol>
<h2><a name="changes">Change History</a></h2>
<table border="0" id="history" width="100%">
<tr>
<th>Version</th>
<th>Date</th>
<th>Changes</th>
</tr>
<tr>
<td>1.0.0</td>
<td>15 Nov 2013</td>
<td>
<ul>
<li>Initial release</li>
</ul>
</td>
</tr>
</table>
<hr>
<p>
<a id="valid" href="http://validator.w3.org/check">
<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict"></a>
</p>
</body>
</html>