README

使用 require js 和 component-installer 构建的插件编译，适用于管理界面。

如果您不知道如何使用组件安装插件，请查看此链接

admin-js 与 composer 兼容，您可以通过以下方式将其添加到您的 composer.json 文件中

"components/admin-js": "dev-master"

运行 composer install 安装它。

入门

<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>

图片缩放器

将 data-type='picture-resizer' 添加到 img 标签

    <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-type='data-table' 添加到 html

    <table data-type='data-table'>
    <thead>
        <tr>
        </tr>
    </thead>
    <tbody> 
        <tr>
        </tr>        
    </tbody>
    </table>

数据可排序示例

将 data-sortable='true' 添加到 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>

components / admin-js

维护者

详细信息

README

入门

图片缩放器

数据表示例

数据可排序示例