If you haven't download LudoJS, do that from the Download page
<!-- JQuery is required -->
<script type="text/javascript" src="ludojs/jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="ludojs/js/ludojs-minified.js"></script><link rel="stylesheet" href="ludojs/css/ludojs-all.css" type="text/css">LudoJS comes with different layouts/skins. All layouts are included in ludojs-all.css.
To use a layout, add the css class of the theme to the <body> tag.
Example
<body class="ludo-twilight">All the Skins can be found in the css-source/skins folder. In the body tag's class name, prefix the skin name with ludo- as above.
Example:
<body class="ludo-lightgray"> or
<body class="ludo-blue"> or
<body class="ludo-gray">Use the code below to create your first LudoJS View.
<html>
<head>
<title>My first LudoJS App</head>
<script type="text/javascript" src="ludojs/jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="ludojs/js/ludojs-minified.js"></script>
<link rel="stylesheet" href="ludojs/css/ludojs-all.css" type="text/css">
<script type="text/javascript">
// Wait until DOM is ready
$( document ).ready(function() {
// Create a ludo.Window View
new ludo.Window({
id:'myWindow', // id of view, for ludo.$() later
title:'My First Window', // Title of View
layout:{ // Rendering properties
top:10,left:10,
width:300,height:200
},
html: 'This is my first View' // HTML of View
});
});
</script>
</head>
<!-- Remember the CSS class for the body tag -->
<body class="ludo-twilight">
</body>
</html>
Click here to to see this in action.
The code created a new ludo.Window view
