Расширение jQuery EasyUI -Ribbon

jQuery EasyUI 扩展Расширение jQuery EasyUI

Подключение файлов Ribbon

Чтобы создать компонент Ribbon, необходимо подключить файлы 'ribbon.css', 'ribbon-icon.css' и 'jquery.ribbon.js'.

<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="ribbon.css.html">
<link rel="stylesheet" type="text/css" href="ribbon-icon.css.html">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery.ribbon.js.html"></script>

Создание Ribbon

Создание из разметки.

    <div class="easyui-ribbon" style="width:700px;">
    <div title="Home">
    <div class="ribbon-group">
    <div class="ribbon-toolbar">
    <a href="../index.html" class="easyui-menubutton" data-options="name:'paste',iconCls:'icon-paste-large',iconAlign:'top',size:'large'">Paste</a>
    </div>
    <div class="ribbon-toolbar">
    <a href="../index.html" class="easyui-linkbutton" data-options="name:'cut',iconCls:'icon-cut',plain:true">Cut</a><br>
    <a href="../index.html" class="easyui-linkbutton" data-options="name:'copy',iconCls:'icon-copy',plain:true">Copy</a><br>
    <a href="../index.html" class="easyui-linkbutton" data-options="name:'format',iconCls:'icon-format',plain:true">Format</a>
    </div>
    <div class="ribbon-group-title">Clipboard</div>
    </div>
    <div class="ribbon-group-sep"></div>
    <div class="ribbon-group">
    <div class="ribbon-toolbar" style="width:200px"></div>
    <div class="ribbon-group-title">other title</div>
    </div>
    <div class="ribbon-group-sep"></div>
    </div>
    </div>

Создание с помощью JavaScript.

    <div id="rr" style="width:700px;"></div>
    <script>
    $(function(){
    $('#rr').ribbon({
    data:data
    });
    });
    </script>

Свойства

Это свойство наследуется от tabs, ниже перечислены свойства, добавленные для Ribbon.

Name Type Описание Значение по умолчанию
data объект Объект описания Ribbon. undefined

Events

Это событие наследуется от tabs, ниже перечислены события, добавленные для Ribbon.

Name Parameters Описание
onClick name,target Срабатывает при нажатии кнопки. Параметры включают:
name: имя кнопки.
target: DOM-элемент, по которому был совершён щелчок.

Методы

Этот метод наследуется от tabs, ниже перечислены методы, добавленные для Ribbon.

Name Parameters Описание
loadData data Скачать данные Ribbon.

Скачать примеры jQuery EasyUI

jquery-easyui-ribbon.zip

jQuery EasyUI 扩展Расширение jQuery EasyUI Другие расширения