首页 > 代码库 > 自制的类似EasyUI的JQuery Button插件
自制的类似EasyUI的JQuery Button插件
jQuery控件所需图片
btn_corner.jpg
btn_corner_hover.jpg
ok.png
reload.png
undo.png
jQuery控件样式
.btn_container{ height:25px; font-size:12px; font-family:Arial; color:#444; text-decoration:none; display: block; float:left; margin-right:5px;}.btn_left{ width:10px; height:25px; float:left; background:url(../images/btn_corner.jpg) left top;}.btn_center{ height:25px; float:left; background:url(../images/btn_corner.jpg) -10px 0px; padding:0px 3px; vertical-align:middle; line-height:25px;}.btn_right{ width:10px; height:25px; float:left;background:url(../images/btn_corner.jpg) right top;}.btn_container:hover .btn_left{background:url(../images/btn_corner_hover.jpg) left top;}.btn_container:hover .btn_center{background:url(../images/btn_corner_hover.jpg) -10px 0px;}.btn_container:hover .btn_right{background:url(../images/btn_corner_hover.jpg) right top;}.icon_reload{ width:16px; height:16px; background:url(../images/reload.png); float:left; margin:3px 2px;}.icon_ok{width:16px; height:16px; background:url(../images/ok.png); float:left; margin:3px 2px;}.icon_undo{width:16px; height:16px; background:url(../images/undo.png); float:left; margin:3px 2px;}
jQuery控件js源码
$(function () { $(‘.linkbotton‘).each(function () { var btnId = $(this).attr(‘id‘); var btnValue = http://www.mamicode.com/$(this).attr(‘value‘); var iconCls = $(this).attr(‘iconCls‘); var strBtn = ""; if (typeof iconCls == ‘string‘) { strBtn = "<a href=http://www.mamicode.com/‘#‘ class=‘btn_container‘ id=‘" + btnId + "‘>" + "<span class=‘btn_left‘></span>" + "<span class=‘btn_center‘>" + "<span class=‘" + iconCls + "‘></span>" + btnValue + "</span>" + "<span class=‘btn_right‘></span>" + "</a>"; } else { strBtn = "<a href=http://www.mamicode.com/‘#‘ class=‘btn_container‘ id=‘" + btnId + "‘>" + "<span class=‘btn_left‘></span>" + "<span class=‘btn_center‘>" + btnValue + "</span>" + "<span class=‘btn_right‘></span>" + "</a>"; } $(this).replaceWith(strBtn); });});
Demo页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <link href="css/btn.css" rel="stylesheet" type="text/css" /> <script src="../../jquery-1.7.1.min.js" type="text/javascript"></script> <script src="js/btn.js" type="text/javascript"></script></head><body> <input id="Button3" type="button" value="Confirm" class=‘linkbotton‘ iconCls=‘icon_ok‘ /> <input id="Button1" type="button" value="button" class=‘linkbotton‘ /> <input id="Button2" type="button" value="Confirm" class=‘linkbotton‘ iconCls=‘icon_reload‘ /> <input id="Button4" type="button" value="Confirm" class=‘linkbotton‘ iconCls=‘icon_undo‘ /> </body></html>
效果图
源码下载
jQueryButtonPlugin.rar
自制的类似EasyUI的JQuery Button插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。