Introduction

Before introductiong Simone into your project, check if your using a supported versions of jQuery and jQuery UI, or download the appropriate versions. Also make sure that all the browsers version you need to support are supported by Simone.

Supported browsers

Only modern browsers are supported by Simone. No support for legacy browsers, sorry.

Certain API's, like fullscreen API, are missing in older browsers. Graceful degradation if provided.

Chrome Firefox Internet Explorer Safari Opera
17+ 12+ 9+ 6.1+ 15+

Dependencies

Simone require jQuery and jQuery UI. The tables bellow show all compatible versions of jQuery and jQuery UI.

Compatible jQuery versions
1.x 1.7.x and bellow 1.8.3 1.9.1 1.10.2 1.11.1 1.12.0
2.x 2.0.3 2.1.1 2.2.0
* Other minor jQuery versions from 1.8.0 are likely to work too,
although Simone is not tested against them.
Compatible jQuery UI versions
1.9.x and bellow
1.10.x 1.10.0 1.10.1 1.10.2 1.10.3 1.10.4
1.11.x 1.11.0 1.11.1 1.11.2
  • – supported
  • – not supported
  • – compatibility not yet confirmed

Required jQuery UI components

Table bellows shows those jQuery UI components that are required for Simone to work, and those that are optional. Without required components, widgets will not fire or be basically useless. Without highly recommended and recommended components, certain features will be not available, but widgets should work (and if they doesn't, please fill a bug report).

Note: When downloading themes from jQuery UI download site, check all the JS dependencies required for Simone, otherwise you will be missing some CSS. Unchecking all the JS files and going only for a particular theme won't work.

Required jQuery UI components
Component name Status
Core required
Widget required
Mouse required
Position required
Dialog required
Button required
Optional jQuery UI components
Component name Status
Draggable Required for draggable windows, and for sortable window buttons.
Droppable Required for draggable windows, and for sortable window buttons.
Resizable Required for resizable windows, and resizable taskbars.
Menu Required when using window groups, or language select menu, or start buttons.
Sortable Required for sortable window buttons.
Datepicker
(including translations) 		Required when using clock with datepicker.
Tooltip Required for pretty tooltips.

Adding files to your project

Adding Simone to your project is pretty straightforward.

First, download Simone version of your choice, either development (uncompressed) or production (compressed) JavaScript and CSS files, and translations for at least one language.

Remember to download compatibile versions of jQuery and jQuery UI.

When you have your files downloaded, unpack or move them to a common directory. For the sake of this instruction, let's assume that simone is a directory where your Simone files are, jQuery is in jquery directory, and jQuery UI is in jquery-ui directory. Let's assume that development versions are used. Assuming that you use js/ directory for all JS libraries, the inside of your head tag should look something like that: 

<!DOCTYPE html>
<html>
	<head>
		<!-- first, include jQuery -->
		<script src="/js/jquery/jquery.js"></script>

		<!-- second, jQuery UI Theme and jQuery UI itself is needed -->
		<link href="/js/jquery-ui/themes/sunny/jquery-ui.css" rel="stylesheet">
		<script src="js/jquery-ui/jquery-ui.js"></script>
		<!-- it's also recommended to include jQuery UI Datepicker language files -->
		<script src="/js/jquery-ui/i18n/jquery.ui.datepicker-all.js"></script>

		<!-- now, include Simone -->
		<link href="/js/simone/simone.css" rel="stylesheet">
		<script src="/js/simone/simone.js"></script>
		<!-- include translations after widgets has been included -->
		<script src="/js/simone/i18n/simone.all.js"></script>

		<!-- other scripts go here -->

		<!-- when all libraries are included, start writing your code;
		     just don't use inline JavaScript - write it in separate file(s)! -->
		<script>
			$( document ).ready( function () {
				// your code goes here—Simone need to be run on
				// document's ready event, or after it
			});
		</script>
	</head>
	<body>
</html>

Gettings started

There are a lot of demos to get you started with Simone.