Interactive arcs
- jquery
- jQuery UI:
- jQuery UI widget
- SVG.js
- Typescript sources
- All the css classes are configurable. See css classes
- Extensible with Widget. See jQuery UI widget docs
- Customizable using css
- Uses SVG.js
For more info, please check the docs
Install with npm i jq-arcs
or download the latest release
import * as $ from "jquery";
//choose one of the follow options
//for jquery-ui package
import "jq-arcs/esm2015/jquery-ui-deps";
//for jquery-ui-dist package
import "jquery-ui-dist/jquery-ui";
import {ArcsOptions} from "jq-arcs";
$("someSelector").arcs(<ArcsOptions>{
//options
});import * as $ from "jquery";
//choose one of the follow options
//for jquery-ui package
import "jq-arcs/esm2015/jquery-ui-deps";
//for jquery-ui-dist package
import "jquery-ui-dist/jquery-ui";
import "jq-arcs";
$("someSelector").arcs({
//options
});Please note that depending of the bundler you are using other configurations may be necessary. For example, shimming JQuery and jQuery UI.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"></script>
<script type="text/javascript" src="path/to/jquery.arcs"></script>
</head>
<body>
<div id="arcs">
<div data-arcs-item="">
<p>Some text 1</p>
</div>
<div data-arcs-item="">
<<p>Some text 2</p>
</div>
<div data-arcs-item="">
<p>Some text 3</p>
</div>
</div>
<script type="text/javascript">
$("img").arcs();
</script>
</body>
</html>jQuery UI could be included in the projects in many different ways and with different packages, instead of force you to use one, we leave up to you how to include it:
Using npm i jquery-ui that install the package allowing to import the widgets you want.
We provided a file with the imports of the required dependencies:
import "jq-arcs/esm2015/jquery-ui-deps";In npm is available the package jquery-ui-dist. Recommended if you will use the most of the framework.
Go to the jQuery UI download page and checks:
- Core
or use this configuration
Please go to docs
Please go to docs
For more info, please go to docs
Please note that only public methods are available using $("selector").arcs("methodName","methodParams");