Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $(`<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"
- integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
- crossorigin="anonymous"></script>`).appendTo('head')
- $(`<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css" />`).appendTo('head');
- var createBox = () => {
- const w = 100;
- const h = 100;
- const style = `
- background: rgba(0,0,0,.4);
- position:absolute;
- top: 0;
- left: 0;
- z-index: 9999;
- font-size: 12px;
- color: #fff;
- font-weight: bold;
- `;
- const $box = $(`<div style="${style}"><span data-size>${w}, ${h}</span></div>`).appendTo('body');
- $box.css({ width: w, height: h });
- $box.draggable().resizable({
- resize(event, ui) {
- $box.find('[data-size]').text(`${ui.size.width}, ${ui.size.height}`);
- }
- });
- };
- function createRuler(axis, options) {
- axis = axis || 'y';
- var opts = {
- color: 'red',
- background: 'rgba(0,0,0,.3)'
- };
- $.extend(opts, options);
- var dimensions = axis === 'y' ? 'width:100%; height: 40px;' : 'height: 100%;width: 40px;';
- var divStyle = `cursor:pointer; border-top:1px solid ${opts.color}; background:${opts.background};position:fixed;top:0;left:0;z-index:9999`;
- var closeStyle = 'color:#fff;position:absolute;right:10px;top:5px;font-size:13px;text-decoration:none;';
- var $ruler = $(`<div style="${dimensions}${divStyle}">
- <a data-cmd="close" style="${closeStyle}">
- <span>close</span>
- </a>
- </div>`).appendTo('body');
- $ruler.draggable({
- axis: axis
- });
- $ruler.on('click', '[data-cmd=close]', function (e) {
- $ruler.remove();
- return false;
- });
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement