jQuery.pagination.js

Изображения не представлены в запросе.

jQuery.selectTree

Изображения не представлены в запросе.

jQuery.validator

Форму можно отправить с помощью валидатора jQuery. Для этого необходимо указать параметры и методы.

Параметры:

• before — функция, которая выполняется перед проверкой;
• success — функция, выполняемая при успешной проверке;
• error — функция, выполняемая при неудачной проверке;
• timeout — время ожидания ответа от сервера (в миллисекундах);
• language — язык проверки (cn, en, num, char, password, url, email, ip, qq или пользовательское регулярное выражение).

Методы:

<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

jQuery.box — это элемент управления, который можно использовать в шаблоне AdminLTE. Он позволяет создавать кнопки для максимизации, минимизации, закрытия, обновления и сворачивания окна. Также он контролирует работу кнопок в окне при использовании AJAX для загрузки страниц.

Параметры:

• speed — скорость анимации (в миллисекундах);
• collapseIcon — значок для сворачивания (например, fa-minus);
• expandIcon — значок для разворачивания (например, fa-plus);
• removeIcon — значок закрытия (например, fa-times);
• refreshIcon — значок обновления (например, fa-refresh);
• minimizeIcon — значок минимизации (например, fa-window-minimize);
• maximizeIcon — значок максимизации (например, fa-window-maximize);
• listenBody — определяет, будет ли окно реагировать на события в теле документа;
• refresh — объект, содержащий параметры запроса на обновление содержимого окна (url, type, data, async, dataType, beforeSend, error).

Методы:

• toggle — сворачивает или разворачивает окно;
• expand — разворачивает окно;
• collapse — сворачивает окно;
• remove — закрывает окно;
• refresh — обновляет содержимое окна;
• window — выполняет операцию максимизации или минимизации окна;
• maximize — максимизирует окно;
• minimize — минимизирует окно;
• addBtn — автоматически добавляет кнопки.

Вызов метода:

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

Для автоматического создания кнопок необходимо добавить класс к элементу box. Например:

• box-collapse — кнопка сворачивания или разворачивания;
• box-remove — кнопка закрытия;
• box-refresh — кнопка обновления;
• box-maximize — кнопка максимизации.

Пример использования:

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

Пример использования с обновлением содержимого:

<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-запроса автоматическое создание кнопок невозможно. Необходимо вызвать метод:

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

или добавить HTML-код для кнопок вручную:

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