I have already seen this link:
jQuery Plugin: How do I test the configuration of my plugin with qunit?
But I haven't understand if is the same case or not so I ask again.
I have a simple plugin like this:
(function ($) {
$.fn.extend({
miPlugin: function (argumentOptions) {
var defaults = {
txt: 'txt'
}
var options = $.extend(defaults, argumentOptions);
return this.each(function () {
var o = options;
var obj = $(this);
var textSend = '';
obj.mouseup(function(e) {
textSend = 'test';
});
});
}
});
})(jQuery);
I would like to check the variable textSend is possible when mouseUp trigger?
This is my test with QUnit:
$(document).ready(function(){
var testfield = $('.txt');
$('.txt').myPlugin({});
module('Simple');
test("Simple", function(){
testfield.focus();
testfield.select();
var obj = testfield.trigger( $.Event( "mouseup") );
});
});
How can I test the var textSend on mouseUp event?
Thanks
Related
I got a function that works on another website, but somehow it won't work with this (free) template I am using.
The main js file groups all functions together somehow and just pasting the code in the main.js file gives me a dropdown is not defined.
My function:
dropdown = function(e){
var obj = $(e+'.dropdown');
var btn = obj.find('.btn-selector');
var dd = obj.find('ul');
var opt = dd.find('li');
obj.on("mouseenter", function() {
dd.show();
}).on("mouseleave", function() {
dd.hide();
})
opt.on("click", function() {
dd.hide();
var txt = $(this).text();
opt.removeClass("active");
$(this).addClass("active");
btn.text(txt);
});
}
Then inside a document ready wrap I call:
dropdown('#lang-selector');
For the following HTML code:
<div id="lang-selector" class="dropdown">
NL
<ul>
<li>EN</li>
<li>NL</li>
</ul>
</div>
This is a working function in that template:
// custom theme
var CustomTheme = function () {
var _initInstances = function () {
if ($('.vk-home-dark').length) {
$('#scrollUp').addClass('inverse');
}
};
return {
init: function () {
_initInstances();
}
};
}();
Which is then called like this:
$(document).ready(function(){
PreLoader.init();
CustomTheme.init();
MediaPlayer.init();
});
I tried turning dropdown to a variable by adding var before it and then calling dropdown.init(); but this gave me dropdown.init(); is not a function
How can I make it work like the other functions?
Preloader function as requested:
// preloader
var PreLoader = function () {
var _initInstances = function () {
$('.animsition').animsition({
// loadingClass: 'loader',
inDuration: 900,
outDuration: 500,
linkElement: 'a:not([target="_blank"]):not([href^="#"]):not([href^="javascript:void(0);"])',
});
};
return {
init: function () {
_initInstances();
}
};
}();
I'd like to override (wrap) the $.fn.ckeditor function, that is the jQuery adapter for CKEditor. What value should I return? It this the correct way:
;(function ($) {
var defaults = {}
ckeditor = $.fn.ckeditor;
$.fn.ckeditor = function (cb, options) {
ckeditor.apply(this, [cb || $.noop, $.extend(defaults, options || {})]);
};
}(jQuery));
in order to override a plugin?
Note Not tried ckeditor (plugin).
If interpret post accurately,
Try this (pattern)
html
<article>123</article>
<div>123</div>
<span>123</span>
js
$(function () {;
(function ($) {
$.fn.ckeditor = function (options) {
var defaults = {
"n": 2
};
var options = $.extend({}, defaults, options);
return $(this).html(function (index, o) {
return String(Number(o) * options.n)
})
};
}(jQuery));
$("article").ckeditor();
$("div").ckeditor({
"n": 4
});
$("span").ckeditor({
"n": (function () {
return Number($("article").html())
})()
});
})
jsfiddle http://jsfiddle.net/guest271314/2qrq3/
See jQuery fn.extend ({bla: function(){}} vs. jQuery.fn.bla
I have written a jQuery plugin below and would like to be able to call it again for the same instance on an element.
The plugin goes...
(function($) {
$.fn.myPlugin = function(options){
var settings = {
color: null
};
if (options) {
$.extend(settings, options);
}
return this.each(function(){
var self = this;
var pics = $('li', self);
function refresh() {
pics = $('li', self);
};
$('a', self).click(function(){
pics.filter(':last').remove();
alert(settings.color);
refresh();
return false;
});
});
}
})(jQuery);
In the page this is called...
$('#test').myPlugin({ color: 'blue' });
Now I want to call the same plugin for the same instance but pass the string refresh as the option whilst all the other variables are the same (so color would still be blue) e.g...
$('#test').myPlugin('refresh');
This would then execute the refresh() function.
How could I achieve that with the above?
Edit: To make it clearer I am thinking of how jQuery UI does their plugins. In the sortable plugin you can do $("#sortable").sortable(); and then $("#sortable").sortable('refresh'); on the same element. This is what I am trying to achieve.
You can store your instance with .data() and check for it when creating an instance.
Something like:
$.fn.doStuff = function () {
var ob = $(this);
var data = ob.data();
if (data.doStuff !== undefined) {
return data.doStuff;
}
doStuff;
});
(function($) {
$.fn.myPlugin = function(options){
var init = function($self, ops){
$self.find("a").click(function(){
pics.filter(':last').remove();
alert(settings.color);
refresh();
return false;
});
};
this.refresh = function(){
//your code here
};
return this.each(function(){
var self = this;
var pics = $('li', self);
var settings = {
color: null
};
var ops = $.extend(true, settings, options);
init($(this), ops);
});
}
})(jQuery);
try something like this. and you can call refresh() like $().myPlugin().refresh();
I've created this simple plugin to add multiple animations on click but the problem is that once the object is clicked it can not repeat the animation by clicking again, i can't figure out why the added class is not removing itself after the click function is complete to allow it to be clicked again and repeat.. any suggestions?
(function($) {
$.fn.vivify = function(options) {
var defaults = {
animation: 'bounce',
};
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
var obj = $(this);
var animation = o.animation;
obj.bind("click", function() {
obj.addClass(o.animation);
obj.addClass('vivify');
}, function() {
obj.removeClass(o.animation);
});
})
}
})(jQuery);
Here's a working example (I guess, because I don't know exactly what's the intended effect of your plugin):
http://jsfiddle.net/gabrieleromanato/Fmr9g/
obj.bind("click", function() {
obj.addClass(o.animation);
obj.addClass('vivify');
},
// this callback is not valid
function() {
obj.removeClass(o.animation);
});
because .bind() accept parameters like following:
.bind(eventName, [eventData], [callback])
Read about .bind()
To remove class you can do:
obj.bind("click", function() {
obj.addClass(o.animation);
obj.addClass('vivify');
// you can removeClass here
obj.removeClass(o.animation);
// but you need some delay
setTimeou(function() {
obj.removeClass(o.animation);
}, 5000);
});
To increase the timeout you can do following:
return this.each(function(index, val) {
var o = options;
var obj = $(this);
var animation = o.animation;
obj.bind("click", function() {
obj.addClass(o.animation);
obj.addClass('vivify');
}, index * 2000);
});
I have the following Javascript file, where some html is generated dynamically:
(function ($){
NunoEstradaViwer: {
settings: {
total: 0,
format: "",
num: 0;
},
init: function (el, options) {
if (!el.length) { return false; }
this.options = $.extend({}, this.settings, options);
this.itemIndex =0;
this.container = el;
this.total = this.options.total;
this.format = ".svg";
this.num = 0;
this.generateHtml(el);
},
generateHtml: function(container){
var bnext = document.createElement('input');
bnext.setAttribute("type", "button");
bnext.setAttribute("id", "bnext");
bnext.onclick = this.nextImage();
bnext.setAttribute("value", "Next");
container.appendChild(bnext);
},
nextImage: function(){
this.num++;
}
});
What I wanted to do was to access the NunoEstradaViwer attribute num inside the nextImage function but instead the this object points to the bnext button.
Do you know how I can manage that?
check the link
bnext.onclick = this.nextImage; // not bnext.onclick = this.nextImage();
another thing is
NunoEstradaViwer.num++ ; // instead of this.num++
#rahen, I tried your sugestions but unfortunately none worked.
What I found out that worked for me was a solution envolving jquery. I did the following:
generateHtml: function(container){
var bnext = document.createElement('input');
bnext.setAttribute("type", "button");
bnext.setAttribute("id", "bnext");
bnext.setAttribute("value", "Next");
container.appendChild(bnext);
$("#bnext").bind('click',{viewer: this}, function(event) {
event.data.viewer.nextImage();
});
},
nextImage: function(){
this.num++;
}
And this way I can access the value of num and it is changed for the NunoEstradaViwer.