jQuery2 开发秘籍
在这个问题中,我们假设你想要创建一个jQuery插件,该插件可以在页面上创建一个简单的计算器,用于执行基本算术运算。以下是一个简单的jQuery插件示例代码:
;(function($, window, document, undefined) {
// 定义构造函数
var SimpleCalculator = function(element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.simpleCalculator.defaults, options);
this.init();
};
// 原型方法,初始化计算器
SimpleCalculator.prototype.init = function() {
var _this = this;
// 创建计算器的HTML结构
var html = '<input type="text" class="calc-input" /> ' +
'<select class="calc-operators">' +
'<option value="+">+</option>' +
'<option value="-">-</option>' +
'<option value="*">*</option>' +
'<option value="/">/</option>' +
'</select> ' +
'<input type="text" class="calc-input" /> ' +
'<button class="calc-button">=</button>';
this.$element.html(html);
// 绑定按钮点击事件
this.$element.on('click', '.calc-button', function() {
var leftOperand = parseFloat(_this.$element.find('.calc-input').eq(0).val()) || 0;
var operator = _this.$element.find('.calc-operators').val() || '+';
var rightOperand = parseFloat(_this.$element.find('.calc-input').eq(1).val()) || 0;
var result = _calculateResult(leftOperand, operator, rightOperand);
_this.$element.find('.calc-input').eq(0).val(result);
});
};
// 私有函数,计算结果
function _calculateResult(leftOperand, operator, rightOperand) {
switch(operator) {
case '+':
return leftOperand + rightOperand;
case '-':
return leftOperand - rightOperand;
case '*':
return leftOperand * rightOperand;
case '/':
return leftOperand / rightOperand || 'Invalid Input';
default:
return 'Error';
}
}
// 在jQuery的原型上添加一个新的方法
$.fn.simpleCalculator = function(options) {
return this.each(function() {
if (!$.data(this, 'plugin_simpleCalcu
评论已关闭