Skip to content

Instantly share code, notes, and snippets.

<link rel="stylesheet" type="text/css" href="jcsdl/lib/jquery.ui.custom.min.css" />
<link rel="stylesheet" type="text/css" href="jcsdl/lib/jquery.tipsy.css" />
<link rel="stylesheet" type="text/css" href="jcsdl/jcsdl.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" type="text/css" href="yourCustomJCSDLCssFile.css" />
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jcsdl/jcsdl.min.js"></script>
<link rel="stylesheet" type="text/css" href="jcsdl/jcsdl.min.css" />
...
</head>
<body>
...
<script type="text/javascript">
var editor = new JCSDLGui($("#jcsdl"), {
definition : {
targets : {
amazon : {
name : 'Amazon',
fields : {
author : {
name : 'Author',
icon : 'user',
<script type="text/javascript">
var editor = new JCSDLGui($("#jcsdl"), {
animate : 0
});
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JCSDL Editor | Save query example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jcsdl/jcsdl.min.css" />
<script type="text/javascript" src="jcsdl/jcsdl.definition.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JCSDL Editor | Load query example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jcsdl/jcsdl.min.css" />
<script type="text/javascript" src="jcsdl/jcsdl.definition.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JCSDL Editor | Load query example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jcsdl/jcsdl.min.css" />
<script type="text/javascript" src="jcsdl/jcsdl.definition.js"></script>
<script type="text/javascript">
var editor = new JCSDLGui($("#jcsdl"), {
//Change the speed of animation to 0
animate : 0,
save : function(code) {
// output the resulting JCSDL code into a textarea
$('textarea[name="jcsdl-output"]').val(code);
},
var editor = new JCSDLGui($("#jcsdl"), {
//Change the speed of animation to 0
animate : 2000,
//Sets the Map Overlay element color, opacity, and stroke
mapsOverlay : {
strokeWeight : 1,
strokeColor: '#ffffff',
fillColor : '#ff0000',
<script type="text/javascript">
var editor = new JCSDLGui($("#jcsdl"), {
//Change the speed of animation to 0
animate : 2000,
//Sets the Map Overlay element color, opacity, and stroke
mapsOverlay : {
strokeWeight : 1,
strokeColor: '#ffffff',