fast-admin

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <li

Usage no npm install needed!

<script type="module">
  import fastAdmin from 'https://cdn.skypack.dev/fast-admin';
</script>

README

fast-admin
Hi,admin 返回网站首页
首页
登录
登录1 登录2 登录3 登录4 登录5
布局
布局1 布局2 布局3 布局4 布局5 布局6
展示类
统计面板 步骤
按钮和表单
按钮 表单 日期 编辑器
盒子/列表/面包屑/分页
盒子 列表 面包屑 tab切换 分页
提示和标签
提示条 提示框
功能组件
ajax 编辑文字 图片上传 层级选择 复制组件 删除功能 filter 排序 树级菜单 树级下拉菜单 弹窗 ajax table ajax select cascade级联下拉框 日历
24等分排版

fast-admin

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/fast-admin@latest/fast-admin.css">
    <title>______</title>
</head>
<body>
    ________
    <script src="https://unpkg.com/fast-admin@latest/fast-admin-deps.js"></script>
    <script src="https://unpkg.com/fast-admin@latest/fast-admin.js"></script>
</body>
</html>

给后端程序员使用的 data-api 管理后台框架

data-ajax

审核通过

</div>
<div class="markrun-pre">
<pre><code>

<span class="mo-btn mo-btn--info" data-ajax-url="/m/json/ok.json" data-ajax-data="id=2&type=del" data-ajax-method="post" >审核通过</span>

data-form

text 
</div>
<div class="markrun-pre">
<pre><code>

<form class="mo-form" method="get" action="/m/json/ok.json" data-form-ajax="true" > <div class="mo-form-item"> <span class="mo-form-item-label">text</span> <span class="mo-form-item-form"> <input type="text" name="user" class="mo-input" placeholder="输入用户名／邮箱"> </span> </div> <div class="mo-form-item"> <button class="mo-btn mo-btn--info"> 提交</button> </div> </form>

data-upload

</div>
<div class="markrun-pre">
<pre><code>

<div data-upload-url="/m/json/ok-upload.json" data-upload-name="pic" data-upload-title="上传头像" data-upload-width="200" data-upload-height="200" > </div>

data-linkage

<span data-linkage-name="city" data-linkage-width="200" data-linkage-options='#linkageJSON' data-linkage-placeholder="请选择城市"

</div>
<div class="markrun-pre">
<pre><code>

<!-- 为了方便预览隐藏了 script#linkageJSON --> <span data-linkage-name="city" data-linkage-width="200" data-linkage-options='#linkageJSON' data-linkage-placeholder="请选择城市" ></span>

data-copy

email
新增邮箱 
</div>
<div class="markrun-pre">
<pre><code>

<form class="mo-form" method="get" action="/m/json/ok.json" data-form-ajax="true" > <div class="mo-form-item js-copydemo1" > <span class="mo-form-item-label">email</span> <span class="mo-form-item-form"> <input type="text" name="email[]" class="mo-input" placeholder="输入邮箱"> </span> </div> <div class="mo-form-item" id="copytarget1"> <span class="mo-btn" data-copy-clone=".js-copydemo1:first" data-copy-target="#copytarget1" data-copy-method="before" > 新增邮箱</span> </div> <div class="mo-form-item"> <button class="mo-btn mo-btn--info"> 提交</button> </div> </form>

全站使用 font-awesome 4.6 作为图标库，字体索引： http://fontawesome.io/icons/

</div>
<div class="markrun-pre">
<pre><code>

<i class="fa fa-user"></i><i class="fa fa-edit"></i> 

            </div>
            <div class="mo-2-foot">
                <div class="mo-2-foot-side">
                    <a href="https://github.com/fast-flow/admin" target="_blank" >https://github.com/fast-flow/admin</a>
                </div>
                <div class="mo-2-foot-copyright">
                    Create By <a href="https://github.com/fast-flow/admin" target="_blank" >fast-flow</a>
                </div>
            </div>
        </div>
        <script src="fast-admin-deps.js"></script>
        <script src="fast-admin.js"></script>
        <script>
        ;(function ($) {
            var $currentItem = $('.mo-2-side-item-bd-link,.mo-2-side-item-hd').filter('[href="' + location.pathname + '"]')
            $currentItem.closest('.mo-2-side-item').addClass('mo-2-side-item--on')
        })(__FAST_ADMIN_EXTERNALS_.$)
        </script>
    </html>