这里的代码我试图为2个div元素调用这个插件。但我只能在最后一个实例中看到效果。我看到每个循环中都有所有元素，但是当我使用窗口调整大小事件时，我面临这个问题。
有些人可以指出问题是什么吗？我正在为此插件使用jqueryboilerplate模板 这是jquery插件代码。只需将其复制粘贴到您的html文件中即可。
// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {
"use strict";
// undefined is used here as the undefined global variable in ECMAScript 3 is
// mutable (ie. it can be changed by someone else). undefined isn't really being
// passed in so we can ensure the value of it is truly undefined. In ES5, undefined
// can no longer be modified.
// window and document are passed through as local variable rather than global
// as this (slightly) quickens the resolution process and can be more efficiently
// minified (especially when both are regularly referenced in your plugin).
// Create the defaults once
var pluginName = "vf_resizer",
defaults = {
propertyName: "value"
};
// The actual plugin constructor
function Plugin ( element, options ) {
this.element = element;
this.$element = $( element );
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.settings = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
// Avoid Plugin.prototype conflicts
$.extend(Plugin.prototype, {
init: function () {
// Place initialization logic here
// You already have access to the DOM element and
// the options via the instance, e.g. this.element
// and this.settings
// you can add more functions like the one below and
// call them like so: this.yourOtherFunction(this.element, this.settings).
// console.log(this);
this.cycle();
},
cycle: function () {
// some logic
//console.log(this);
this.resize_calculator();
},
resize_calculator : function (){
self = this
$(window).resize(function() {
console.log(self);
self.$element.each(function (index, value){
console.log(value);
})
self.$element.children().each(function (index, value){
var $parent_selector = self.$element[0].getBoundingClientRect();
var factors = {};
var parent = {};
var current_dimensions = {};
factors.w = $(this).data('w-factor');
factors.h = $(this).data('h-factor');
factors.posx = $(this).data('posx-factor');
factors.posy = $(this).data('posy-factor');
parent.width = $parent_selector.width;
parent.height = $parent_selector.width/2.4;
current_dimensions.left = parent.width * factors.posx;
current_dimensions.top = parent.height * factors.posy;
current_dimensions.width = parent.width * factors.w;
current_dimensions.height = parent.height * factors.h;
self.resize_elements(this, current_dimensions, parent);
})
});
},
resize_elements : function (element, dimensions, parent){
// console.log(element);
self = this;
console.log(self);
self.$element.css({height: parent.height})
$( element ).css({
position : "absolute",
left : dimensions.left,
top: dimensions.top,
height: dimensions.height,
width: dimensions.width
});
}
});
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[ pluginName ] = function ( options ) {
return this.each(function() {
//console.log($.data);
if ( !$.data( this, "plugin_" + pluginName ) ) {
// console.log(this);
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
}
});
};
})( jQuery, window, document );
这是html代码。
<body>
<style>
.resizer{ position : relative; border: 1px solid black; width: 100%; height:300px;}
.deeplink1{position: absolute; top:0; left: 300px; border: 1px solid blue; width: 50%; height: 100px;}
.deeplink2{position: absolute; top:100px; left: 0; border: 1px solid blue; width: 50%; height: 100px;}
</style>
<script>
$(function() {
$("#one").vf_resizer();
$("#two").vf_resizer();
/* $(".resizer").vf_resizer();*/
});
</script>
<div id="one" class="resizer">
<div id="drag1" class="deeplink1" data-posx-factor='0.25' data-posy-factor='0' data-h-factor='0.33' data-w-factor='0.5'></div>
<div id="drag2" class="deeplink2" data-posx-factor='0' data-posy-factor='0.33' data-h-factor='0.33' data-w-factor='0.5'></div>
<!--<div id="drag3" class="deeplink" data-posx-factor='0.5' data-posy-factor='0.5' data-h-factor='0.1' data-w-factor='0.2'></div>-->
</div>
<div id="two" class="resizer">
<div id="drag3" class="deeplink1" data-posx-factor='0.25' data-posy-factor='0' data-h-factor='0.33' data-w-factor='0.5'></div>
<div id="drag4" class="deeplink2" data-posx-factor='0' data-posy-factor='0.33' data-h-factor='0.33' data-w-factor='0.5'></div>
<!--<div id="drag3" class="deeplink" data-posx-factor='0.5' data-posy-factor='0.5' data-h-factor='0.1' data-w-factor='0.2'></div>-->
</div>
</body>
更新1：此插件应根据窗口大小调整div大小调整器中的元素大小。我已经在数据属性中添加了它们的因子来从中获取它们。
更新2：这是JS小提琴http://jsfiddle.net/DelightedDoD/5he2n2rb/
答案 0 :(得分：0)
不确定但是在插件中我在一个似乎不是的地方找到;：
current_dimensions.width = parent.width * factors.w;
current_dimensions.height = parent.height * factors.h;
; // <------this one should not have to be here.
self.resize_elements(this, current_dimensions, parent);
我可以看到你的html页面上没有jquery引用。