原創|使用教程|編輯:龔雪|2015-10-21 09:12:58.000|閱讀 485 次
概述:本教程主要為大家展示如何使用jQuery EasyUI創建一個拆分按鈕。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
Kendo UI for jQuery——創建現代Web應用程序的最完整UI庫!查看詳情>>>
本教程主要為大家展示如何使用jQuery EasyUI創建一個拆分按鈕。拆分包含了一個鏈接按鈕和菜單,當用戶點擊或將鼠標懸停在下拉箭頭區域時,對應的菜單就會顯示。下面的示例演示了如何創建和使用拆分按鈕:
我們創建一個拆分按鈕和一個鏈接按鈕:
<div style="border:1px solid #ccc;background:#fafafa;padding:5px;width:120px;"> <a href="#" class="easyui-splitbutton" menu="#mm" iconCls="icon-edit">Edit</a> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a> </div> <div id="mm" style="width:150px;"> <div iconCls="icon-undo">Undo</div> <div iconCls="icon-redo">Redo</div> <div class="menu-sep"></div> <div>Cut</div> <div>Copy</div> <div>Paste</div> <div class="menu-sep"></div> <div> <span>Open</span> <div style="width:150px;"> <div>Firefox</div> <div>Internet Explorer</div> <div class="menu-sep"></div> <div>Select Program...</div> </div> </div> <div iconCls="icon-remove">Delete</div> <div>Select All</div> </div>
創建完成拆分按鈕時,我們不需要寫任何JavaScript代碼。
購買最新正版授權!""
集團授權強勢登陸!滿額即送好禮哦,精彩不容錯過!優惠詳情點擊查看>>
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件網