前言
使用$.fn.slider.defaults重写默认值对象。下载该插件翻译源码
滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块
源码
/**
* jQuery EasyUI 1.3.2
*
*翻译：qq 1364386878 滑动条
*/
(function ($) {
//初始化
function init(jq) {
var html = $("<div class=\"slider\">"
+ "<div class=\"slider-inner\">"
+ "<a href=\"javascript:void(0)\" class=\"slider-handle\"></a>"
+ "<span class=\"slider-tip\"></span>"
+ "</div>"
+ "<div class=\"slider-rule\"></div>"
+ "<div class=\"slider-rulelabel\"></div>"
+ "<div style=\"clear:both\"></div>"
+ "<input type=\"hidden\" class=\"slider-value\">"
+ "</div>").insertAfter(jq);
var name = $(jq).hide().attr("name");
if (name) {
html.find("input.slider-value").attr("name", name);
$(jq).removeAttr("name").attr("sliderName", name);
}
return html;
};
//调整大小
function _resize(jq, parm) {
var options = $.data(jq, "slider").options;
var slider = $.data(jq, "slider").slider;
if (parm) {
if (parm.width) {
options.width = parm.width;
}
if (parm.height) {
options.height = parm.height;
}
}
if (options.mode == "h") {
slider.css("height", "");
slider.children("div").css("height", "");
if (!isNaN(options.width)) {
slider.width(options.width);
}
} else {
slider.css("width", "");
slider.children("div").css("width", "");
if (!isNaN(options.height)) {
slider.height(options.height);
slider.find("div.slider-rule").height(options.height);
slider.find("div.slider-rulelabel").height(options.height);
slider.find("div.slider-inner")._outerHeight(options.height);
}
}
_a(jq);
}; function _b(jq) {
var options = $.data(jq, "slider").options;
var slider = $.data(jq, "slider").slider;
var mode = options.mode == "h" ? options.rule : options.rule.slice(0).reverse();
if (options.reversed) {
mode = mode.slice(0).reverse();
}
_f(mode);
function _f(mode) {
var rule = slider.find("div.slider-rule");
var rulelabel = slider.find("div.slider-rulelabel");
rule.empty();
rulelabel.empty();
for (var i = 0; i < mode.length; i++) {
var _12 = i * 100 / (mode.length - 1) + "%";
var span = $("<span></span>").appendTo(rule);
span.css((options.mode == "h" ? "left" : "top"), _12);
if (mode[i] != "|") {
span = $("<span></span>").appendTo(rulelabel);
span.html(mode[i]);
if (options.mode == "h") {
span.css({ left: _12, marginLeft: -Math.round(span.outerWidth() / 2) });
} else {
span.css({ top: _12, marginTop: -Math.round(span.outerHeight() / 2) });
}
}
}
};
};
//设置是否禁用
function _setdisable(jq) {
var options = $.data(jq, "slider").options;
var slider = $.data(jq, "slider").slider;
slider.removeClass("slider-h slider-v slider-disabled");
slider.addClass(options.mode == "h" ? "slider-h" : "slider-v");
slider.addClass(options.disabled ? "slider-disabled" : "");
slider.find("a.slider-handle").draggable({
axis: options.mode, cursor: "pointer", disabled: options.disabled, onDrag: function (e) {
var left = e.data.left;
var width = slider.width();
if (options.mode != "h") {
left = e.data.top;
width = slider.height();
}
if (left < 0 || left > width) {
return false;
} else {
var _1a = _2c(jq, left);
_1b(_1a);
return false;
}
}, onStartDrag: function () {
options.onSlideStart.call(jq, options.value);
}, onStopDrag: function (e) {
var _1c = _2c(jq, (options.mode == "h" ? e.data.left : e.data.top));
_1b(_1c);
options.onSlideEnd.call(jq, options.value);
}
});
function _1b(_1d) {
var s = Math.abs(_1d % options.step);
if (s < options.step / 2) {
_1d -= s;
} else {
_1d = _1d - s + options.step;
}
_setValue(jq, _1d);
};
};
function _setValue(_1f, _20) {
var _21 = $.data(_1f, "slider").options;
var _22 = $.data(_1f, "slider").slider;
var _23 = _21.value;
if (_20 < _21.min) {
_20 = _21.min;
}
if (_20 > _21.max) {
_20 = _21.max;
}
_21.value = _20;
$(_1f).val(_20);
_22.find("input.slider-value").val(_20);
var pos = _24(_1f, _20);
var tip = _22.find(".slider-tip");
if (_21.showTip) {
tip.show();
tip.html(_21.tipFormatter.call(_1f, _21.value));
} else {
tip.hide();
}
if (_21.mode == "h") {
var _25 = "left:" + pos + "px;";
_22.find(".slider-handle").attr("style", _25);
tip.attr("style", _25 + "margin-left:" + (-Math.round(tip.outerWidth() / 2)) + "px");
} else {
var _25 = "top:" + pos + "px;";
_22.find(".slider-handle").attr("style", _25);
tip.attr("style", _25 + "margin-left:" + (-Math.round(tip.outerWidth())) + "px");
}
if (_23 != _20) {
_21.onChange.call(_1f, _20, _23);
}
};
function _a(_26) {
var _27 = $.data(_26, "slider").options;
var fn = _27.onChange;
_27.onChange = function () {
};
_setValue(_26, _27.value);
_27.onChange = fn;
};
function _24(_28, _29) {
var _2a = $.data(_28, "slider").options;
var _2b = $.data(_28, "slider").slider;
if (_2a.mode == "h") {
var pos = (_29 - _2a.min) / (_2a.max - _2a.min) * _2b.width();
if (_2a.reversed) {
pos = _2b.width() - pos;
}
} else {
var pos = _2b.height() - (_29 - _2a.min) / (_2a.max - _2a.min) * _2b.height();
if (_2a.reversed) {
pos = _2b.height() - pos;
}
}
return pos.toFixed(0);
};
function _2c(_2d, pos) {
var _2e = $.data(_2d, "slider").options;
var _2f = $.data(_2d, "slider").slider;
if (_2e.mode == "h") {
var _30 = _2e.min + (_2e.max - _2e.min) * (pos / _2f.width());
} else {
var _30 = _2e.min + (_2e.max - _2e.min) * ((_2f.height() - pos) / _2f.height());
}
return _2e.reversed ? _2e.max - _30.toFixed(0) : _30.toFixed(0);
};
//实例化组件
$.fn.slider = function (target, parm) {
if (typeof target == "string") {
return $.fn.slider.methods[target](this, parm);
}
target = target || {};
return this.each(function () {
var slider = $.data(this, "slider");
if (slider) {
$.extend(slider.options, target);
} else {
slider = $.data(this, "slider", {
options: $.extend({},
$.fn.slider.defaults, $.fn.slider.parseOptions(this), target),
slider: init(this)
});
$(this).removeAttr("disabled");
}
_setdisable(this);
_b(this);
_resize(this);
});
};
//默认方法
$.fn.slider.methods = {
//返回滑动条属性
options: function (jq) {
return $.data(jq[0], "slider").options;
},
//返回滑动条属性
destroy: function (jq) {
return jq.each(function () {
$.data(this, "slider").slider.remove();
$(this).remove();
});
},
//设置滑动条大小
resize: function (jq, parm) {
return jq.each(function () {
_resize(this, parm);
});
},
//获取滑动条的值
getValue: function (jq) {
return jq.slider("options").value;
},
//获取滑动条的值
setValue: function (jq, value) {
return jq.each(function () {
_setValue(this, value);
});
},
//启用滑动条控件
enable: function (jq) {
return jq.each(function () {
$.data(this, "slider").options.disabled = false;
_setdisable(this);
});
},
//启用滑动条控件
disable: function (jq) {
return jq.each(function () {
$.data(this, "slider").options.disabled = true;
_setdisable(this);
});
}
};
//解析器
$.fn.slider.parseOptions = function (target) {
var t = $(target);
return $.extend({}, $.parser.parseOptions(target, ["width", "height", "mode",
{
reversed: "boolean",
showTip: "boolean",
min: "number",
max: "number",
step: "number"
}]),
{
value: (t.val() || undefined),
disabled: (t.attr("disabled") ? true : undefined),
rule: (t.attr("rule") ? eval(t.attr("rule")) : undefined)
});
};
//默认属性和事件
$.fn.slider.defaults = {
width: "auto",//滑动条宽度
height: "auto",//滑动条高度
mode: "h",//滑动条高度
reversed: false,//设置为true时，最小值和最大值将对调他们的位置
showTip: false,//定义是否显示值信息提示
disabled: false,//定义是否禁用滑动条
value: 0,//默认值
min: 0,//允许的最小值
max: 100,//允许的最大值
step: 1,//值增加或减少
rule: [],//显示标签旁边的滑块，'|' — 只显示一行
//显示标签旁边的滑块，'|' — 只显示一行
tipFormatter: function (jq) {
return jq;
},
//在字段值更改的时候触发
onChange: function (_38, _39) {
},
//在开始拖拽滑动条的时候触发
onSlideStart: function (_3a) {
},
//在结束拖拽滑动条的时候触发
onSlideEnd: function (_3b) {
}
};
})(jQuery);
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Slider - 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.draggable.js"></script>
<script src="../../plugins2/jquery.slider.js"></script>
</head>
<body>
<h2>Basic Slider</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Drag the slider to change value.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="margin-top:20px;">
<input class="easyui-slider" style="width:300px" data-options="showTip:true">
</div>
</body>
</html>
插件效果
