6 Star 7 Fork 0

自由自在的小鱼 / jquery plugin

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 4.43 KB
一键复制 编辑 原始数据 按行查看 历史
自由自在的小鱼 提交于 2018-09-21 08:09 . 更新 README.md

jquery.pagination.js

输入图片说明

输入图片说明

输入图片说明

jquery.selectTree

输入图片说明

jquery.validator

表单提交验证

参数

before: function() {},
success: function() {},
error: function() {},
timeout: 600,
language: 'cn'

方法

<form id="loginForm" action="post.php" method='post'>
<input type='text' data-required='true' data-length='6,16' data-regular='cn' value=''/>
</form>
$('#loginForm').validator({
  success:function(data) {
    //code here
    window.location.href='/';
  }
});

data-regular可以是cn,en,num,char,password,url,email,ip,qq或者自定义正则表达式

截图

输入图片说明

jquery.box

针对AdminLTE模板所做的一个Box控件,可以生成最大化、折叠、刷新、关闭按钮,同时针对ajax加载的页面进行控制box按钮的操作。

参数

speed: 500,
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
removeIcon: 'fa-times',
refreshIcon: 'fa-refresh',
minimizeIcon: 'fa-window-minimize',
maximizeIcon: 'fa-window-maximize',
listenBody: true,
refresh: {
    url: '',
    type: 'get',
    data: {},
    async: true,
    dataType: '',
    beforeSend: function () {
    },
    error: function () {
    }
}

方法

toggle    折叠或展开       对象
expand    展开            对象
collapse  折叠            对象
remove    关闭            对象
refresh   刷新            对象
window    最大/小化box    对象
maximize  最大化box       对象
minimize  最小化box       对象
addBtn    自动增加btn     无参数

方法的调用方式

$.fn.box('toggle','.box');

调用

<script src="assets/js/jquery.box.min.js"></script>

自动生成btn,需要在box加上class

box-collapse    折叠或展开按钮
box-remove    关闭按钮
box-refresh    刷新按钮
box-maximize    最大化按钮

自动关闭的BOX

<div class="box box-warning box-remove collapsed">
    <div class="box-header with-border">
        <h3 class="box-title">待审核作者</h3>
    </div>
    <!-- /.box-header -->
    <div class="box-body" id="authorBox">
        The body of the box
    </div>
    <!-- /.box-body -->
</div>

带有刷新的BOX,自动加载url内容,注:通过ajax加载的页面无法自动加载。

<div class="box box-success box-remove box-refresh" data-refresh='{"url":"/"}'>
    <div class="box-header with-border">
        <h3 class="box-title">待审核小说</h3>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
    </div>
    <!-- /.box-body -->
</div>

data-refresh如果是字符串,默认为url,如果是json,是ajax使用的参数。例如:

data-refresh='{"url":"/","type":"post","data":{"id":1}}'

ajax加载的页面无法自动生成btn,需要调用

$(".box").box('addBtn');

或者html直接写入btn代码

<div class="box box-warning box-remove box-maximize collapsed">
    <div class="box-header with-border">
        <h3 class="box-title">待审核作者</h3>
        <!-- 按钮 -->
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-box="collapse">
                <i class="fa fa-minus"></i>
            </button>
        </div>
        <!-- /.box-tools -->
    </div>
    <!-- /.box-header -->
    <div class="box-body" id="authorBox">
        The body of the box
    </div>
    <!-- /.box-body -->
</div>

bootstrap 调用

<div class="panel panel-default box box-remove box-collapse">
  <div class="panel-heading box-header">Panel heading without title</div>
  <div class="panel-body box-body">
    Panel content
  </div>
</div>

截图

输入图片说明

JavaScript
1
https://gitee.com/hbbcs/jquery.box.git
git@gitee.com:hbbcs/jquery.box.git
hbbcs
jquery.box
jquery plugin
master

搜索帮助