mirror of https://github.com/RubaXa/Ply.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
269 lines
6.4 KiB
269 lines
6.4 KiB
11 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Ply — Amazing layer/modal/dialog system. Wow!</title>
|
||
|
|
|
||
|
|
<meta name="keywords" content="ply, layer, modal, dialog, javascript, js, rubaxa"/>
|
||
|
|
<meta name="description" content=""/>
|
||
|
|
|
||
|
|
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
|
||
|
|
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
|
||
|
|
|
||
|
|
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'/>
|
||
|
|
<link href='./st/app.css' rel='stylesheet' type='text/css'/>
|
||
|
|
<link href='./ply.css' rel='stylesheet' type='text/css'/>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1 title="Try demo!"><u>Ply</u></h1>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<h2>Alert</h2>
|
||
|
|
|
||
|
|
<div class="col-left">
|
||
|
|
<div class="ply-layer alert example">
|
||
|
|
<div class="ply-content">Hello %username%!</div>
|
||
|
|
<div class="ply-footer"><button class="ply-ok">OK</button></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-right">
|
||
|
|
<code>
|
||
|
|
Ply.dialog("alert", "Hello %username%!");
|
||
|
|
</code>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<h2>Confirm</h2>
|
||
|
|
|
||
|
|
<div class="col-left">
|
||
|
|
<div class="ply-layer confirm example">
|
||
|
|
<div class="ply-content">Continue?</div>
|
||
|
|
<div class="ply-footer"><button class="ply-ok">OK</button><button class="ply-cancel">Cancel</button></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-right">
|
||
|
|
<code>
|
||
|
|
Ply.dialog(
|
||
|
|
"confirm",
|
||
|
|
{ effect: "3d-sign" },
|
||
|
|
"Continue?"
|
||
|
|
);
|
||
|
|
</code>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<h2>Prompt</h2>
|
||
|
|
|
||
|
|
<div class="col-left">
|
||
|
|
<div class="ply-layer prompt example">
|
||
|
|
<div class="ply-header">Spam subscribe</div>
|
||
|
|
<div class="ply-content">
|
||
|
|
<input class="ply-input" placeholder="E-mail"/>
|
||
|
|
</div>
|
||
|
|
<div class="ply-footer"><button class="ply-ok">OK</button><button class="ply-cancel">Cancel</button></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-right">
|
||
|
|
<code>
|
||
|
|
Ply.dialog("prompt", {
|
||
|
|
title: "Spam subscribe",
|
||
|
|
form: { email: "E-mail" }
|
||
|
|
});
|
||
|
|
</code>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div style="height: 100px"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
||
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>
|
||
|
|
|
||
|
|
<script src="./Ply.js"></script>
|
||
|
|
<script src="./Ply.ui.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
jQuery(function ($) {
|
||
|
|
hljs.configure({ classPrefix: '' });
|
||
|
|
|
||
|
|
|
||
|
|
Ply.dialog({
|
||
|
|
foo: {
|
||
|
|
data: 'Foo!',
|
||
|
|
next: 'bar',
|
||
|
|
nextEffect: 'inner'
|
||
|
|
},
|
||
|
|
bar: {
|
||
|
|
data: {
|
||
|
|
text: 'Bar!',
|
||
|
|
ok: 'Wow!'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$('.example')
|
||
|
|
.each(function () {
|
||
|
|
var $el = $(this);
|
||
|
|
var $code = $el.closest('.row').find('code');
|
||
|
|
var code = $code.text().split('\n');
|
||
|
|
var offset = code[1].match(/^\s+/)[0].length;
|
||
|
|
|
||
|
|
$.each(code, function (i) {
|
||
|
|
code[i] = code[i].substr(offset);
|
||
|
|
});
|
||
|
|
|
||
|
|
code = code.slice(1).join('\n');
|
||
|
|
$code.text(code);
|
||
|
|
$el.data('code', code);
|
||
|
|
|
||
|
|
hljs.highlightBlock($code.wrap('<pre/>').parent().addClass('javascript')[0])
|
||
|
|
})
|
||
|
|
.on('click', function () {
|
||
|
|
Function($(this).data('code'))();
|
||
|
|
return false;
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
|
||
|
|
$('h1 u').click(function () {
|
||
|
|
Ply.dialog({
|
||
|
|
'welcome': {
|
||
|
|
data: {
|
||
|
|
children: [{
|
||
|
|
tag: 'img',
|
||
|
|
src: 'http://www.saintjn.org/wp-content/uploads/2013/07/welcome.png?1',
|
||
|
|
width: 400
|
||
|
|
}],
|
||
|
|
ok: "Next"
|
||
|
|
},
|
||
|
|
next: 'introduce',
|
||
|
|
nextEffect: '3d-flip[180,-180]'
|
||
|
|
},
|
||
|
|
|
||
|
|
'introduce': {
|
||
|
|
ui: 'prompt',
|
||
|
|
data: {
|
||
|
|
title: 'Your name?',
|
||
|
|
form: { name: '%username%' }
|
||
|
|
},
|
||
|
|
back: 'welcome',
|
||
|
|
backEffect: '3d-flip[-180,180]',
|
||
|
|
next: 'hi',
|
||
|
|
nextEffect: 'scale'
|
||
|
|
},
|
||
|
|
|
||
|
|
'hi': {
|
||
|
|
data: {
|
||
|
|
text: 'Hi, {{name}}!',
|
||
|
|
ok: 'Next'
|
||
|
|
},
|
||
|
|
prepare: function (data, dialogs) {
|
||
|
|
data.text = data.text.replace(/\{\{([^}]+)\}\}/g, function (_, name) {
|
||
|
|
return dialogs.introduce.val(name);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
back: 'next',
|
||
|
|
next: 'question',
|
||
|
|
nextEffect: 'fall'
|
||
|
|
},
|
||
|
|
|
||
|
|
'question': {
|
||
|
|
ui: 'confirm',
|
||
|
|
data: {
|
||
|
|
text: 'You know Jonna Lee?',
|
||
|
|
ok: 'Yes',
|
||
|
|
cancel: 'No'
|
||
|
|
},
|
||
|
|
back: 'Jonna',
|
||
|
|
next: 'Jonna-01',
|
||
|
|
nextEffect: '3d-sign'
|
||
|
|
},
|
||
|
|
|
||
|
|
'Jonna': {
|
||
|
|
data: 'Jonna Lee (born Jonna Emily Lee Nilsson, October 3, 1981) is a singer-songwriter from Linköping, Sweden, currently residing in Stockholm. Lee is best known for being the creator and artist of iamamiwhoami. Lee started her own label "To whom it may concern" in 2010.',
|
||
|
|
back: 'next',
|
||
|
|
next: 'Jonna-01',
|
||
|
|
nextEffect: 'fade'
|
||
|
|
},
|
||
|
|
|
||
|
|
'Jonna-01': {
|
||
|
|
data: {
|
||
|
|
title: 'Jonna Lee',
|
||
|
|
children: [{
|
||
|
|
tag: 'img',
|
||
|
|
src: 'http://www.movieviral.com/wp-content/uploads/2010/03/jonnalee.jpg',
|
||
|
|
width: 400
|
||
|
|
}],
|
||
|
|
ok: 'Next'
|
||
|
|
},
|
||
|
|
next: 'Jonna-02',
|
||
|
|
nextEffect: '3d-flip[180,-180]'
|
||
|
|
},
|
||
|
|
|
||
|
|
'Jonna-02': {
|
||
|
|
data: {
|
||
|
|
title: 'Jonna Lee',
|
||
|
|
children: [{
|
||
|
|
tag: 'img',
|
||
|
|
src: 'http://2020k.files.wordpress.com/2012/03/iamamiwhoami-good-worker.png',
|
||
|
|
width: 400
|
||
|
|
}],
|
||
|
|
ok: 'Close',
|
||
|
|
cancel: 'Rewind'
|
||
|
|
},
|
||
|
|
back: 'welcome'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Background -->
|
||
|
|
<script>
|
||
|
|
(function () {
|
||
|
|
function setNoiseBackground(el, color, width, height, opacity) {
|
||
|
|
var canvas = document.createElement("canvas");
|
||
|
|
var context = canvas.getContext("2d");
|
||
|
|
|
||
|
|
canvas.width = width;
|
||
|
|
canvas.height = height;
|
||
|
|
|
||
|
|
for (var i = 0; i < width; i++) {
|
||
|
|
for (var j = 0; j < height; j++) {
|
||
|
|
var val = Math.floor(Math.random() * 255);
|
||
|
|
context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")";
|
||
|
|
context.fillRect(i, j, 1, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
el.style.backgroundColor = color;
|
||
|
|
el.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
|
||
|
|
}
|
||
|
|
|
||
|
|
// Usage
|
||
|
|
setNoiseBackground(document.body, "trasparent", 50, 50, 0.02);
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
|
|
|
||
|
|
ga('create', 'UA-16483888-3', 'rubaxa.github.io');
|
||
|
|
ga('send', 'pageview');
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|