formstone
Version:
Library of modular front end components.
133 lines (112 loc) • 5.46 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Page Attributes -->
<title>Cookie · Formstone</title>
<!-- Modernizer -->
<script src="../js/modernizr.js?v=1.4.7"></script>
<!-- Compiled CSS -->
<link rel="stylesheet" href="../css/site.css?v=1.4.7">
<!-- Compiled JS -->
<script src="../js/site.js?v=1.4.7"></script>
<!-- <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> -->
</head>
<body class="fs-grid demo_page">
<!-- JSHEADER -->
<div class="demo_content">
<header class="header">
<div class="fs-row">
<div class="fs-cell"> <a href="https://formstone.it/" class="header_logo icon-logo">Formstone</a> </div>
</div>
</header>
<div class="fs-row">
<div class="fs-cell">
<h1 id="cookie-demo">Cookie Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/cookie">View Documentation</a></p>
<!-- START: DEMO -->
<!-- START: FIRSTDEMO -->
<script>
var $demoForm,
$demoOutput;
Formstone.Ready(function() {
$demoForm = $(".demo_form");
$demoOutput = $(".demo_output");
$demoForm.on("click.cookie", ".set", setCookie)
.on("click.cookie", ".get", getCookie)
.on("click.cookie", ".erase", eraseCookie);
});
function setCookie(e) {
killEvent(e);
var key = $demoForm.find("[name=set_key]").val(),
value = $demoForm.find("[name=set_value]").val();
$.cookie(key, value);
output("Set", key + " = " + value);
}
function getCookie(e) {
killEvent(e);
var key = $demoForm.find("[name=get_key]").val(),
value = $.cookie(key);
output("Get", key + " = " + value);
}
function eraseCookie(e) {
killEvent(e);
var key = $demoForm.find("[name=erase_key]").val();
$.cookie(key, null);
output("Erase", key);
}
function output(label, value) {
$demoOutput.prepend('<strong>' + label + ': </strong>' + value + '</span><br>');
}
function killEvent(e) {
e.preventDefault();
e.stopPropagation();
}
</script>
<form action="#" medthod="GET" class="fs-row form demo_form">
<div class="fs-cell fs-xs-full fs-sm-third fs-md-third fs-lg-third">
<h4 class="no_margin_top">Set Cookie</h4>
<div class="fs-row">
<div class="fs-cell fs-xs-half">
<label class="form_label">Key</label>
<input type="text" name="set_key" value="foo" class="form_input">
</div>
<div class="fs-cell fs-xs-half">
<label class="form_label">Value</label>
<input type="text" name="set_value" value="bar" class="form_input">
</div>
</div>
<input type="submit" class="button form_button set" value="Set">
</div>
<div class="fs-cell fs-xs-full fs-sm-third fs-md-third fs-lg-third">
<h4 class="no_margin_top">Get Cookie</h4>
<label class="form_label">Key</label>
<input type="text" name="get_key" value="foo" class="form_input">
<input type="submit" class="button form_button get" value="Get">
</div>
<div class="fs-cell fs-xs-full fs-sm-third fs-md-third fs-lg-third">
<h4 class="no_margin_top">Erase Cookie</h4>
<label class="form_label">Key</label>
<input type="text" name="erase_key" value="foo" class="form_input">
<input type="submit" class="button form_button erase" value="Erase">
</div>
</form>
<div class="demo_output form_textarea"></div>
<!-- END: FIRSTDEMO -->
<!-- END: DEMO -->
<div class="footer">
<div class="copyright">
<div>© 2018 <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>