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 に追加されたプロパティです。

名前 タイプ 説明 デフォルト値
data object ribbon の説明オブジェクト。 undefined

イベント

このイベントはタブ（tabs）から拡張されており、以下は Ribbon に追加されたイベントです。

名前 パラメータ 説明
onClick name,target ボタンをクリックしたときに発生します。パラメータは次のとおりです：
name：ボタンの名前。
target：クリックされた DOM 要素。

メソッド

このメソッドはタブ（tabs）から拡張されており、以下は Ribbon に追加されたメソッドです。

名前 パラメータ 説明
loadData data Ribbon データをダウンロードします。

jQuery EasyUI インスタンスをダウンロード

jquery-easyui-ribbon.zip

jQuery EasyUI 扩展jQuery EasyUI 拡張 その他の拡張