components / admin-js
Installs: 171
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Language:JavaScript
Type:component
Requires
Requires (Dev)
This package is not auto-updated.
Last update: 2016-07-12 09:43:12 UTC
README
Compilation of plugin useful for an admistration interface using require js and compoment-installer.
If you don't know how to install plugin with components look at this link
admin-js work with composer you can add it to your composer.json file
with:
"components/admin-js": "dev-master"
Run composer install to install it.
Getting started
<html>
<head>
<meta charset="utf-8">
<title>Set up/title>
</head>
<body>
<script src="../components/require.js"></script>
<script>
requirejs.config({
baseUrl: '../components',
});
</script>
<script>
require(["admin-js"],function(views){
new views.AdminView();
});
</script>
</body>
</html>
Picture resizer
add the data-type='picture-resizer' to the img balise:
<html>
<head>
<meta charset="utf-8">
<title>QUnit basic example</title>
<link rel="stylesheet" href="../components/bootstrap3/css/bootstrap.min.css" />
<style>
.img-left{
float: left;
}
.img-border {
margin: 0 auto 0;
border: #999999 solid 1px;
}
</style>
</head>
<body>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Build a website <strong>worth visiting</strong>
</h2>
<hr>
<img alt="test alt" style="margin-right: 15px;" data-type='picture-resizer' class="img-responsive img-border img-left" src="http://cms.sion.nc/img/intro-pic.jpg" alt="">
<hr class="visible-xs">
<p>The boxes used in this template are nested inbetween a normal Bootstrap row and the start of your column layout. The boxes will be full-width boxes, so if you want to make them smaller then you will need to customize.</p>
<p>A huge thanks to <a href="http://join.deathtothestockphoto.com/" target="_blank">Death to the Stock Photo</a> for allowing us to use the beautiful photos that make this template really come to life. When using this template, make sure your photos are decent. Also make sure that the file size on your photos is kept to a minumum to keep load times to a minimum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat diam quis nisl vestibulum dignissim. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<img data-alt='test' data-description='test description' style="margin-right: 15px;" data-type='picture-resizer' class="img-responsive img-border img-left" src="http://cms.sion.nc/img/intro-pic.jpg" alt="">
</div>
</div>
</div>
<script src="../components/require.js"></script>
<script>
requirejs.config({
baseUrl: '../components',
});
</script>
<script>
require(["admin-js"],function(views){
new views.AdminView();
});
</script>
</body>
</html>
Data table example
add the data-type='data-table' to the html
<table data-type='data-table'>
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
Data sortable example
add the data-sortable='true' to the html
<ul data-sortable='true' data-url='link for the ajax request'>
<li data-id="server side id of the element">
Categorie
<ul data-sortable='true'>
<li>Categorie enfant</li>
</ul>
</li>
</ul>