【蓝桥软件学院】创建连接按钮、菜单按钮、分割按钮、开关按钮.docxVIP

创建连接按钮、菜单按钮、分割按钮、开关按钮课程目标掌握各种按钮的使用方法LinkButtonLinkButton简介按钮组件使用超链接按钮创建。它使用一个普通的a标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。效果如图：LinkButton程序复制$(function(){$(a).click(function(event){alert($(event.target).text());});});a href=#class=easyui-linkbutton data-options=iconCls:icon-search,iconAlign:top查找/a a href=#class=easyui-linkbutton data-options=iconCls:icon-add添加/a a href=#class=easyui-linkbutton data-options=iconCls:icon-remove,iconAlign:bottom删除/a 参考代码:16/linkbutton01.html效果如下图：LinkButton常用属性属性名属性值类型描述默认值idstring组件的ID属性。nulldisabledboolean为true时禁用按钮。falsetoggleboolean为true时允许用户切换其状态是被选中还是未选择，可实现checkbox复选效果。falseselectedboolean定义按钮初始的选择状态，true为被选中，false为未选中。falsegroupstring指定相同组名称的按钮同属于一个组，可实现radio单选效果。nullplainboolean为true时显示简洁效果。falsetextstring按钮文字。iconClsstring显示在按钮文字左侧的图标(16x16)的CSS类ID。nulliconAlignstring按钮图标位置。leftsizestring按钮大小。可用值有：small,large。smallselectedboolean定义按钮初始的选择状态，true为被选中，false为未选中。falseLinkButton常用方法方法名方法参数描述optionsnone返回属性对象。disablenone禁用按钮。enablenone启用按钮。selectnone选择按钮。unselectnone取消选择按钮。LinkButton常用事件事件名事件参数描述onClicknone在点击按钮的时候触发。参考jQueryEasyUI的API。代码如下：HTML代码：复制inputtype=buttonvalue=禁用按钮onclick=myBtn();/br/JS代码：复制functionmyBtn(){if($(input).attr(value) === 禁用按钮){$(a).linkbutton(disable);$(input).attr(value,启用按钮);}else{$(a).linkbutton(enable);$(input).attr(value,禁用按钮);}}参考代码:16/linkbutton01.htmlMenuButtonMenuButton简介菜单按钮是下拉菜单的一部分。它伴随着linkbutton和menu组件。在用户点击linkbutton之前菜单是隐藏的，当用户用鼠标点击或移动到linkbutton上面的时候菜单才会显示。 效果如图：MenuButton程序复制divstyle=background:#fafafa;padding:5px;width:200px;border:1px solid #cccahref=#class=easyui-menubuttonmenu=#mm1iconCls=icon-editEdit/aahref=#class=easyui-menubuttonmenu=#mm2iconCls=icon-helpHelp/a/divdivid=mm1style=width:150px;diviconCls=icon-undoUndo/divdiviconCls=icon-redoRedo/divdivclass=menu-sep/divdivCut/divdivCopy/divdivPaste/divdivclass=menu-sep/divdiviconCls=icon-removeDelete/divdivSelect All/div/divdivid=mm2style=width:100px;divHelp/divdivUpdate/divdivAbout/div/div参考代码:16/menubutton01.html效果如