【EasyUI】文本提示框制作(自定义小图标)

目录1. 自定义图标2. EasyUI默认图标1. 自定义图标自定义小图标提示符号圆圈中包含一个问号。span idmessageTip styledisplay: inline-block; width: 1em; height: 1em; line-height: 1em; text-align: center; border-radius: 50%; background-color: #FDB813; color: #FFF;?/span提示事件//设置提示框 $(#messageTip).tooltip({ position : top,// position string 消息框位置。 默认 bootom 还有 left、 right、 top content : 括号外数值为水温大于设置水温时的标准值括br号内数值为水温小于等于设置水温时的标准值。 //content string 消息框内容。默认为 null可以包含 html 标签 });注意position可以指定文件位置默认 bootom 还有 left、 right、 top.content是内容如果信息过多可以使用br进行换行。(官方是一个a标签里面还会title如果使用那个不可以换行br会被当做文本输出)上述完整代码如下!DOCTYPE html html head meta http-equivContent-Type contenttext/html; charsetUTF-8 titlejQuery EasyUI组件功能在线演示/title link relstylesheet typetext/css href../jquery-easyui-1.8.6/themes/default/easyui.css link relstylesheet typetext/css href../jquery-easyui-1.8.6/themes/icon.css script typetext/javascript src../jquery-easyui-1.8.6/jquery.min.js/script script typetext/javascript src../jquery-easyui-1.8.6/jquery.easyui.min.js/script /head body div classeasyui-panel titleAjax Form stylewidth:500px;padding:10px; form idmyForm methodpost classeasyui-form table tbody tr td rowspan4span classrequiredMark※/span标准值/td td colspan2 input idisCheckStandardValueA typecheckbox valuetrue checked 设置冬夏季标准值 /td td alignright span idmessageTip styledisplay: inline-block; width: 1em; height: 1em; line-height: 1em; text-align: center; border-radius: 50%; background-color: #FDB813; color: #FFF;?/span /td /tr tr td colspan3 hr styleborder-top: 1px solid #ccc; /td /tr tr td标准值:/td tdinput classform-control required number typetext idsummerValue namesummerValue stylewidth: 88px;/td td(input classform-control required number typetext idwinterValue namewinterValue stylewidth: 70px;)/td /tr tr td设置水温/td tdinput classform-control required number idwaterTemperature namewaterTemperature stylewidth: 100px;/td td colspan2 span classspan_background styleheight: 22px;padding-top: 3px;#8451/span/td /tr /tbody /table /form /div style scoped .f1{ width:200px; } /style script typetext/javascript //设置提示框 $(#messageTip).tooltip({ position : top,// position string 消息框位置。 默认 bootom content : 括号外数值为水温大于设置水温时的标准值括br号内数值为水温小于等于设置水温时的标准值。 //content string 消息框内容。默认为 null可以包含 html 标签 }); /script /body style .span_background { display: inline-block; font-weight: bold; background-color: #eee; /* 淡灰色背景 */ border: 1px solid #ccc; /* 边框 */ padding: 3px 6px; /* 内边距 */ } /style /html2. EasyUI默认图标如果你想使用Easyui的图标,可以按照下述方法使用:td alignright a hrefjavascript:void(0); idmessageTip stylecursor:default; classeasyui-linkbutton iconClsicon-tip titlecehsi/a /tdEasyUI中使用图标基本上要配合着 classeasyui-linkbutton 用所以默认是一个按钮单独拿出来使用很不方便。还需要再对他的样式进行设置。style .easyui-linkbutton { border: none !important; background: none !important; box-shadow: none !important; } /style//设置提示框 $(#messageTip).tooltip({ position : top,// position string 消息框位置。 默认 bootom 还有 left、 right、 top content : 括号外数值为水温大于设置水温时的标准值括br号内数值为水温小于等于设置水温时的标准值。 //content string 消息框内容。默认为 null可以包含 html 标签 });