Clipboard: basic

提供Clipboard所有基础css, js引用

导入方法:
from system.core.ui.clipboard import ClipboardUIPlugin
使用方法:
<button class="copy_text" data-clipboard-target="#copy_target">Copy</button><span id="copy_target" >Copy text</span>

注意:这里的copy_text是必须的

Clipboard: code inline

给行内代码自动添加复制按钮

导入方法:
from system.core.ui.clipboard import CodeInlineUIPlugin
使用方法:
<div class="code-inline-copy" >Some code here</div>

注意:这里的code-inline-copy是必须的, 如果不想添加复制功能, 使用code-inline即可

Effect: Wow

Wow是一个很炫的页面载入效果, 本插件提供Wow所有基础css, js引用

导入方法:
from system.core.ui.effect import WowUIPlugin
使用方法:

这里只提供一个简单的使用方法，详细请参看官方文档

<div class="wow bounceInUp" >...</div>

Effect: CounterUp

提供CounterUp所有基础css, js引用, 这是一个counterUp的特效

导入方法:
from system.core.ui.effect import CounterUpUIPlugin
使用方法:
<span data-toggle="counter-up" >0</span>

Effect: Slick

提供Slick所有基础css, js引用, 效果演示参看 演示页面

导入方法:
from system.core.ui.effect import SlickUIPlugin
使用方法:

需要在页面添加一个初始化的脚本, 如下:

$(".regular").slick({
                            dots: false,
                            infinite: true,
                            slidesToShow: 5,
                            slidesToScroll: 1
                            });

同时，页面加入如下标签, book的部分即是内容区域

<div class="regular slider" ><div class="book" >...</div><div class="book" >...</div></div>

SimpleCaptchaUIPlugin

这个插件不能独立使用, 是django-simple-captcha的辅助UI, 主要是优化django-simple-captcha的页面显示

导入方法:
from system.core.ui.form import SimpleCaptchaUIPlugin
使用方法:

需要使用在添加了django-simple-captcha的表单页面, 例如我们有个form

from django import forms
from captcha.fields import CaptchaField

class CaptchaTestForm(forms.Form):
    myfield = AnyOtherField()
    captcha = CaptchaField()

在这个form的实例化view里添加即可.

JqueryCookie

Jquery Cookie 提供 Cookie 所有基础js引用; 使用文档相信参看 https://github.com/carhartl/jquery-cookie#readme

导入方法:
from system.core.ui.jquery import JqueryCookieUIPlugin
使用方法:

Create session cookie:

$.cookie('name', 'value');

Create expiring cookie, 7 days from then:

$.cookie('name', 'value', { expires: 7 });

Create expiring cookie, valid across entire site:

$.cookie('name', 'value', { expires: 7, path: '/' });

Read cookie:

let name = $.cookie('name');

Delete cookie:cookie删除成功则返回true，否则返回false, 需要使用与写入 cookie 相同的属性 (path, domain) ; 比如，我们创建了一个name的cookie值:

$.cookie('name', 'value', { path: '/' });

然后， 删除操作如下:

// This won't work!
$.removeCookie('name'); // => false
// This will work!
$.removeCookie('name', { path: '/' }); // => true

注意：删除 cookie 时，您必须传递用于设置 cookie 的完全相同的路径、域和安全选项，除非您依赖于默认选项。

Button: Confirm

提供按钮或者链接跳转前确认对话框的功能

导入方法:
from system.core.ui.form import ButtonConfirmUIPlugin
使用方法:

在 a标签或者button标签添加class="confirmBtn"

Button: Delete

提供删除前确认对话框的功能

导入方法:
from system.core.ui.form import ButtonDeleteUIPlugin
使用方法:

在 a标签或者button标签添加class="confirmDeleteBtn"

注意：与Button: Confirm不同, 这里跳转的时候将发起一个post请求

Navigation : GoTop

提供 返回页面顶部 所有基础css, js引用

导入方法:
from system.core.ui.navigation import GoTopButtonUIPlugin
使用方法:

由于程序需要在<footer>...</footer>内插入一个go top的按钮，所以页面必须包含footer标签

DateTable: all

DateTable 添加高级交互控件以免费且简单的方式访问您的 HTML 表格

导入方法:
from system.core.ui.table import DateTableUIPlugin
使用方法:

这个使用比较简单：插件内置常用的Datable功能，您只要在指定的table添加id="main-table"即可

DateTable: mini

只提供实现DateTable 最基础的功能

导入方法:
from system.core.ui.table import DateTableMinUIPlugin
使用方法:

需要自定义datatable的启动js, 然后给需要的table指定ID即可


                            $(document).ready(function() {
                                $("#main-table").DataTable({
                                  responsive: true, lengthChange: false, autoWidth: true,
                                    paging: true, info: true, ordering: false, searching: true, pagingType: "full_numbers",
                                })
                            });

HighlightCode

Highlight.js 是一个用 JavaScript 编写的语法荧光笔。 它几乎可以与任何标记一起使用，不依赖于任何其他框架，并且具有自动语言检测功能。

导入方法:
from system.core.ui.text import HighlightCodeUIPlugin
使用方法:
<pre><code class="language-html">...</code></pre>

注意: code里的部分需要转义>和<

PrintPage

提供打印页面的js引用

导入方法:

from system.core.ui.text import PrintPageUIPlugin

使用方法:

在页面中加入这个按钮:

<button class="btn btn-primary btn-xs" onclick="printSection('printing-content')" >
                        <i class="fas fa-print" ></i>
                        </button>

这个按钮会在触发后, 将ID为 print-content 区域内的内容作为打印区进行弹窗 

<div id="printing-content">This part will be printed </div>

说明: 需要一个按钮来触发打印事件， 并指定目标ID, 参看 博客终端页面

MathJs

Math.js 是一个适用于 JavaScript 和 Node.js 的扩展数学库。 它具有灵活的表达式解析器，支持符号计算， 附带大量内置函数和常量，并提供集成解决方案来处理不同的数据类型，如数字、大数、复数、分数、单位和 矩阵。 功能强大且易于使用。

导入方法:

from system.core.ui.text import MathJsUIPlugin

使用方法:

直接引入即可,MathJs会自动查找需要格化式的公式

注意: /static/assets/js/output/fonts/下的字体为公式使用