<!doctype>
<html>
<head>
<title>pluie.org - svan demo - v0.4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body { background-color:#888; color:white; font-family:arial; font-size:1.3rem; }
#test { border: 1px dashed #ccc; }
body > div { border-radius:20px; margin:40px; padding:20px; background-color: #ccc; color:black; }
body > span { font-size:0.8rem; }
button { padding:5px 15px; }
h3 { margin:35px 0 10px 0; }
h2 { margin:5px 0 0 0; }
textarea { padding:8px 5px; border-radius:10px; border-style:solid; width:100%; height:120px; font-size:1.2rem; }
#test { margin:20px; background-color:white; padding:20px; border: 1px dashed #aaa; }
.cssAdded { color:#990000; }
#output { margin-top:250px; }
</style>
</head>
<body>
<h2>pluie.org - svan demo : </h2>
<div style="border:1px dashed #ccc; position:fixed; width:90%; ">
<button id="click">click</button>
<button id="addClass">addClass</button>
<button id="removeClass">removeClass</button>
<button id="toggle">toggle</button>
<button id="fade">fade</button>
<button id="find">$('div').find('button')</button>
<button id="ajax">ajax</button>
</div>
<div style="border:1px dashed #ccc; position:fixed; width:90%; top:150px;">
<select id="selnode">
<option value="0">value : 0</option>
<option value="1">value : 1</option>
<option value="2">value : 2</option>
</select>
<button id="attrget">attr getselect</button>
<button id="attrset">attr set select to 1 </button>
</div>
<div id="output"></div>
<script type="text/javascript" src="src/svan-min.js"></script>
<script type="text/javascript">
var $l = (function alias() {
var a = localStorage;
return {
clear : function() { return a.clear(); },
get : function(k) { return a.getItem(k); },
rem : function(k) { return a.removeItem(k); },
set : function(k, v) { return a.setItem(k, v); }
};
}());
var $j = (function alias() {
var a = JSON;
return {
str : function(o) { return a.stringify(o); },
obj : function(s) { return a.parse(s); }
};
}());
$(document).ready(function() {
var sep = "<br/>----------------";
var o = function(msg, c) {
msg += '<br/>';
$('#output').append(msg);
if (c) console.log(msg.replace(/\<br\/\>/g, '\n'));
}
o('on dom ready event<br/>', 1);
$('#click').on('click', function(e) {
o(sep);
o('click click event<br/>context : #'+this.id);
console.log(e);
console.log(this);
});
$('#addClass').on('click', function(e) {
o(sep);
o('addClass click event<br/>context : #'+this.id+'<br/>css before : '+this.className);
$(this).addClass('cssAdded');
o('css after : '+this.className);
});
$('#removeClass').on('click', function(e) {
o(sep);
var n = $('#addClass').first();
o('removeClass event<br/>context : #'+this.id+'<br/>css before : '+n.className);
$(n).removeClass('cssAdded');
o('css after : '+n.className);
});
$('#toggle').on('click', function(e) {
o(sep);
var n = $('#addClass').first();
o('toogle event<br/>context : #'+this.id+'<br/>css before : '+n.className);
$(n).toggle('cssAdded');
o('css after : '+n.className);
});
$('#attrset').on('click', function(e) {
o(sep);
$('#selnode').val(1);
o('set selectedIndex to 1');
});
$('#attrget').on('click', function(e) {
o(sep);
o('get selected value : '+($('#selnode').val()));
});
$('#find').on('click', function(e) {
o(sep);
o("find $('div').find('button')");
$('div').find('button').all().forEach(function(n) {
o(n.getAttribute('id'));
});
});
$('#fade').on('click', function(e) {
o(sep);
o('fade click event<br/>context : #'+this.id);
$('#output').fadeOut(600, function() {
o('end fade out');
$(this).fadeIn(1600, function() {
o('end fadeIn');
});
});
});
$('#ajax').on('click', function(e) {
o(sep);
o('ajax click event');
$.ajax({
url : 'http://domain.dev/ajax-done',
async : true,
data : { toto : "tata" },
done : function(data) {
o('ajax done receiving data<br/>' + $j.str(data) +'<br/>');
o($j.str(xhr));
},
always : function(data) {
o('ajax always<br/>');
},
method : 'POST'
});
$.ajax({
url : 'http://domain.dev/ajax-fail',
async : false,
fail : function(data, xhr) {
o('ajax fail receiving data<br/>' + $j.str(data) +'<br/>');
o($j.str(xhr));
},
always : function(data) {
o('ajax always<br/>');
},
method : 'GET'
});
});
});
</script>
</body>
</html>