jQueryのEasyUI拡張 - リボン
リボンを含むファイル
リボンコンポーネントを作成するには、「ribbon.css '、'リボンicon.css 'と' jquery.ribbon.js」ファイルが含まれている必要があります。
<リンクのrel = "スタイルシート"タイプ= "テキスト/ cssの"のhref = "http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css"> <リンクのrel = "スタイルシート"タイプ= "テキスト/ cssの"のhref = "http://www.w3cschool.cc/try/jeasyui/themes/icon.css"> <リンクのrel = "スタイルシート"タイプ= "テキスト/ cssの"のhref = "ribbon.css"> <リンクのrel = "スタイルシート"タイプ= "テキスト/ cssの"のhref = "リボンicon.css"> ます。<script type = "text / javascriptの" SRC = "http://code.jquery.com/jquery-1.8.0.min.js"> </スクリプト> ます。<script type = "text / javascriptの" SRC = "http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"> </スクリプト> ます。<script type = "text / javascriptの" SRC = "jquery.ribbon.js"> </スクリプト>
リボンを作成します。
タグから作成されました。
<DIVクラス= "easyuiリボン"スタイル= "幅:700px;"> <DIVタイトル= "ホーム"> <DIVクラス= "リボングループ」> <DIVクラス= "リボンツールバー」> <a href="#" class="easyui-menubutton" data-options="name:'paste',iconCls:'icon-paste-large',iconAlign:'top',size:'large'">貼り付け< / A> </ DIV> <DIVクラス= "リボンツールバー」> <a href="#" class="easyui-linkbutton" data-options="name:'cut',iconCls:'icon-cut',plain:true">カットします</a> <BR> <a href="#" class="easyui-linkbutton" data-options="name:'copy',iconCls:'icon-copy',plain:true">コピーします</a> <BR> <a href="#" class="easyui-linkbutton" data-options="name:'format',iconCls:'icon-format',plain:true">フォーマットします</a> </ DIV> <DIVクラス= "リボングループタイトル">クリップボード</ DIV> </ DIV> <DIVクラス= "リボングループ9月"> </ div>の <DIVクラス= "リボングループ」> <DIVクラス= "リボンツールバー"スタイル= "幅:200pxの"> </ div>の <DIVクラス= "リボングループタイトル">他のタイトル</ DIV> </ DIV> <DIVクラス= "リボングループ9月"> </ div>の </ DIV> </ DIV>
作成したJavaScriptを使用してください。
<DIVのID = "RR"スタイル= "幅:700px;"> </ div>の <スクリプト> $(関数(){ $( '#Rrを')。リボン({ データ:データ }); }); </スクリプト>
プロパティ
プロパティは、タブ(タブ)から延びて、次の属性がリボンに追加されます。
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
data | object | ribbon 的描述对象。 | undefined |
イベント
イベントは、タブ(タブ)から延びて、次のイベントは、リボンのために追加されます。
名称 | 参数 | 描述 |
---|---|---|
onClick | name,target |
当单击按钮时触发。参数包括: name:按钮的名称。 target:被点击的 dom 元素。 |
ウェイ
方法は以下のリボンを追加するための方法である、タブ(タブ)から延びています。
名称 | 参数 | 描述 |
---|---|---|
loadData | data | 下载 Ribbon 数据。 |
jQueryのEasyUI例をダウンロード
jQueryのEasyUIは、拡張します