國(guó)外展柜網(wǎng)站,深訓(xùn)網(wǎng)站,建設(shè)外貿(mào)網(wǎng)站要多少錢,邢臺(tái)做網(wǎng)站口碑好jQuery EasyUI 菜單與按鈕 - 創(chuàng)建分割按鈕#xff08;Split Button#xff09; jQuery EasyUI 的 splitbutton 組件是一種特殊的菜單按鈕#xff0c;它將按鈕分為兩個(gè)部分#xff1a; 左側(cè)主體#xff1a;可點(diǎn)擊執(zhí)行默認(rèn)主要操作#xff08;例如“保存”#xff09;?！璲Query EasyUI 菜單與按鈕 - 創(chuàng)建分割按鈕Split ButtonjQuery EasyUI的splitbutton組件是一種特殊的菜單按鈕它將按鈕分為兩個(gè)部分左側(cè)主體可點(diǎn)擊執(zhí)行默認(rèn)主要操作例如“保存”。右側(cè)下拉箭頭點(diǎn)擊顯示關(guān)聯(lián)的下拉菜單提供更多相關(guān)選項(xiàng)。這比 menubutton 更靈活常用于“保存”按鈕主體保存箭頭選擇“另存為”“保存并關(guān)閉”等。官方參考教程https://www.jeasyui.com/tutorial/mb/splitbutton.php文檔https://www.jeasyui.com/documentation/splitbutton.php在線 Demohttps://www.jeasyui.com/demo/main/index.php?pluginSplitButton步驟 1: 引入 EasyUI 資源linkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script步驟 2: 創(chuàng)建基本的 Split Button在a標(biāo)簽上添加classeasyui-splitbutton并通過menu屬性指定關(guān)聯(lián)菜單。!-- 保存分割按鈕 --ahrefjavascript:void(0)idsaveBtnclasseasyui-splitbuttondata-optionsmenu:#mm-save,iconCls:icon-save保存/a!-- 關(guān)聯(lián)菜單 --dividmm-saveclasseasyui-menustylewidth:150px;divdata-optionsiconCls:icon-save保存/divdivdata-optionsiconCls:icon-save另存為.../divdivclassmenu-sep/divdivdata-optionsiconCls:icon-ok保存并關(guān)閉/divdivdata-optionsiconCls:icon-cancel取消/div/div!-- 另一個(gè)示例打印分割按鈕 --ahrefjavascript:void(0)classeasyui-splitbuttondata-optionsmenu:#mm-print,plain:true,iconCls:icon-print打印/adividmm-printclasseasyui-menudiv直接打印/divdiv打印預(yù)覽/divdiv頁面設(shè)置/div/div步驟 3: 處理主體點(diǎn)擊和菜單項(xiàng)點(diǎn)擊事件scripttypetext/javascript$(function(){// 主體按鈕點(diǎn)擊默認(rèn)操作$(#saveBtn).splitbutton({onClick:function(){$.messager.alert(提示,執(zhí)行默認(rèn)保存操作);// 這里寫主要保存邏輯}});// 菜單項(xiàng)點(diǎn)擊$(#mm-save).menu({onClick:function(item){vartextitem.text;if(text保存){$(#saveBtn).splitbutton(options).onClick.call($(#saveBtn)[0]);}else{$.messager.alert(操作,您選擇了text);}}});});/script步驟 4: 完整示例工具欄風(fēng)格 多種用法!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titlejQuery EasyUI Split Button 示例/titlelinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script/headbodyh2jQuery EasyUI 分割按鈕Split Button示例/h2p標(biāo)準(zhǔn)分割按鈕/paidsb-savehref#classeasyui-splitbuttondata-optionsmenu:#mm1,iconCls:icon-save保存/adividmm1classeasyui-menustylewidth:150px;divdata-optionsiconCls:icon-save保存/divdivdata-optionsiconCls:icon-save另存為.../divdivclassmenu-sep/divdivdata-optionsiconCls:icon-ok保存并繼續(xù)/divdivdata-optionsiconCls:icon-reload保存并新建/div/divp工具欄風(fēng)格plain/pdivstylepadding:10px;background:#eee;ahref#classeasyui-splitbuttondata-optionsmenu:#mm2,plain:true文件/aahref#classeasyui-splitbuttondata-optionsmenu:#mm3,plain:true,iconCls:icon-edit編輯/a/divdividmm2classeasyui-menudiv新建/divdiv打開/divdiv保存/div/divdividmm3classeasyui-menudiv剪切/divdiv復(fù)制/divdiv粘貼/div/divscript$(function(){$(#sb-save).splitbutton({onClick:function(){$.messager.alert(保存,執(zhí)行默認(rèn)保存操作);}});$(#mm1).menu({onClick:function(item){if(item.text保存){$(#sb-save).splitbutton(options).onClick();}else{$.messager.alert(操作,選擇了菜單項(xiàng)item.text);}}});});/script/body/html關(guān)鍵說明區(qū)別于 menubuttonmenubutton整個(gè)按鈕點(diǎn)擊都彈出菜單。splitbutton左側(cè)主體可單獨(dú)點(diǎn)擊執(zhí)行默認(rèn)操作右側(cè)箭頭才彈出菜單。常用屬性menu關(guān)聯(lián)菜單 ID必填。onClick主體按鈕點(diǎn)擊事件。plain:true簡(jiǎn)潔模式適合工具欄。支持所有 linkbutton 屬性如iconCls、disabled。菜單第一項(xiàng)通常與主體操作一致便于用戶快速選擇。實(shí)際應(yīng)用場(chǎng)景富文本編輯器加粗主體 下拉更多樣式。數(shù)據(jù)表格導(dǎo)出主體導(dǎo)出 Excel 下拉選擇 PDF、CSV 等。表單提交主體提交 下拉“提交并新增”等。更多示例官方分割按鈕教程https://www.jeasyui.com/tutorial/mb/splitbutton.php與 toolbar 結(jié)合常用于 datagrid、window、dialog 的工具欄。如果需要將這些按鈕集成到 datagrid 工具欄、動(dòng)態(tài)菜單或其他高級(jí)用法示例請(qǐng)繼續(xù)提問