easyui源码翻译1.32--LinkButton（按钮）

前言

使用$.fn.linkbutton.defaults重写默认值对象。下载该插件翻译源码

按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。

源码

/*** jQuery EasyUI 1.3.2* * 翻译：lbq**g=this p=g.options*/
(function ($) {//初始化函数function _init(target) {var p = $.data(target, "linkbutton").options;$(target).empty();$(target).addClass("l-btn");if (p.id) {$(target).attr("id", p.id);} else {$(target).attr("id", "");}if (p.plain) {$(target).addClass("l-btn-plain");} else {$(target).removeClass("l-btn-plain");}if (p.text) {$(target).html(p.text).wrapInner("<span class=\"l-btn-left\">"+ "<span class=\"l-btn-text\">"+ "</span>" + "</span>");if (p.iconCls) {$(target).find(".l-btn-text").addClass(p.iconCls).addClass(p.iconAlign == "left" ? "l-btn-icon-left" : "l-btn-icon-right");}} else {$(target).html("&nbsp;").wrapInner("<span class=\"l-btn-left\">"+ "<span class=\"l-btn-text\">"+ "<span class=\"l-btn-empty\"></span>"+ "</span>" + "</span>");if (p.iconCls) {$(target).find(".l-btn-empty").addClass(p.iconCls);}}$(target).unbind(".linkbutton").bind("focus.linkbutton", function () {if (!p.disabled) {$(this).find("span.l-btn-text").addClass("l-btn-focus");}}).bind("blur.linkbutton", function () {$(this).find("span.l-btn-text").removeClass("l-btn-focus");});setDisabled(target, p.disabled);};//设置禁用function setDisabled(target, disabled) {var g = $.data(target, "linkbutton");if (disabled) {g.options.disabled = true;var href = $(target).attr("href");if (href) {g.href = href;$(target).attr("href", "javascript:void(0)");}if (target.onclick) {g.onclick = target.onclick;target.onclick = null;}$(target).addClass("l-btn-disabled");} else {g.options.disabled = false;if (g.href) {$(target).attr("href", g.href);}if (g.onclick) {target.onclick = g.onclick;}$(target).removeClass("l-btn-disabled");}};//实例化按钮$.fn.linkbutton = function (options, parm) {if (typeof options == "string") {return $.fn.linkbutton.methods[options](this, parm);}options = options || {};return this.each(function () {var g = $.data(this, "linkbutton");if (g) {$.extend(g.options, options);} else {$.data(this, "linkbutton", {options: $.extend({},$.fn.linkbutton.defaults,$.fn.linkbutton.parseOptions(this), options)});$(this).removeAttr("disabled");}_init(this);});};//方法定义(3)$.fn.linkbutton.methods = {//返回属性对象options: function (jq) {return $.data(jq[0], "linkbutton").options;},//启用按钮enable: function (jq) {return jq.each(function () {setDisabled(this, false);});},//禁用按钮disable: function (jq) {return jq.each(function () {setDisabled(this, true);});}};//解析器配置$.fn.linkbutton.parseOptions = function (target) {var t = $(target);return $.extend({},$.parser.parseOptions(target,["id", "iconCls", "iconAlign", { plain: "boolean" }]),{disabled: (t.attr("disabled") ? true : undefined),text: $.trim(t.html()),iconCls: (t.attr("icon") || t.attr("iconCls"))});};//默认值对象(6)$.fn.linkbutton.defaults = {id: null,//组件的ID属性disabled: false,//为true时禁用按钮plain: false,//为true时显示简洁效果text: "",//按钮文字iconCls: null,//显示在按钮文字左侧的图标(16x16)的CSS类IDiconAlign: "left"//按钮图标位置。可用值有：'left','right'
    };
})(jQuery);

View Code

示例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Basic LinkButton - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../themes/icon.css"><link rel="stylesheet" type="text/css" href="../demo.css"><script type="text/javascript" src="../../jquery-1.8.0.min.js"></script><script src="../../plugins2/jquery.parser.js"></script><script src="../../plugins2/jquery.linkbutton.js"></script>
</head>
<body><h2>Basic LinkButton</h2><div class="demo-info"><div class="demo-tip icon-tip"></div><div>Buttons can be created from &lt;a/&gt; link.</div></div><div style="margin:10px 0;"></div><div style="padding:5px;"><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a><a href="#" class="easyui-linkbutton">Text Button</a></div></body>
</html>

View Code

插件效果

转载于:https://www.cnblogs.com/DemoLee/p/3500775.html

easyui源码翻译1.32--LinkButton（按钮）相关推荐

easyui源码翻译1.32--Messager（消息窗口）
前言使用$.messager.defaults重写默认值对象.下载该插件翻译源码消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), p ...
easyui源码翻译1.32--panel(面板)
前言昨天发布了表格datagrid的翻译源码 ,easyui的许多插件有依赖关系比如datagrid 的渲染需要panel.resizable.linkbutton.pagination 今 ...
easyui源码翻译1.32--SearchBox（搜索框）
前言使用$.fn.searchbox.defaults重写默认值对象.下载该插件翻译源码搜索框提示用户需要输入搜索的值.它可以结合一个菜单,允许用户选择不同的搜索类别.在用户按下回车键或点击组件右 ...
easyui源码翻译1.32--Window（窗口）
前言扩展自$.fn.panel.defaults.使用$.fn.window.defaults重写默认值对象.下载该插件翻译源码窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口.默认情况下,窗 ...
easyui源码翻译1.32--ValidateBox（验证框）
前言使用$.fn.validatebox.defaults重写默认值对象.下载该插件翻译源码 validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将 ...
easyui源码翻译1.32--Resizable（调整大小）
前言使用$.fn.resizable.defaults重写默认值对象下载该插件翻译源码源码 /*** jQuery EasyUI 1.3.2* *翻译:qq 1364386878 Resizab ...
ArrayList源码翻译
ArrayList源码翻译简介属性解读初始化添加方法 get方法 set方法 remove方法 contains方法 clone方法总结简介 ArrayList 是 java 集合框架中比 ...
three.js源码翻译及案例(五)-GLTFLoader.js
写在前面 Three中的加载脚本很多,但是核心思想是差不多的,就是文件用文件解析器加载,图片用图片解析器加载,然后json转换为对象,但是由于gltf格式可以自己编辑所以有的源码参考意义不大,glb及 ...
jQuery Easyui 源码分析之combo组件
/** * jQuery EasyUI 1.3.1 * 该源码完全由压缩码翻译而来,并非网络上放出的源码,请勿索要.*/ (function($) {function setSize(target, ...
Vue源码翻译之渲染逻辑链
本篇文章主要要记录说明的是,Vue在Vdom的创建上的相关细节.这也是描绘了Vue在界面的创建上的一个逻辑顺序,同时我也非常拜服作者编码的逻辑性,当然或许这么庞大复杂的编码不是一次性铸就的,我想应该也 ...

easyui源码翻译1.32--LinkButton（按钮）

前言

源码

示例代码

插件效果

easyui源码翻译1.32--LinkButton（按钮）相关推荐

最新文章

热门文章