Я ищу информацию об этом - "Как создать пользовательскую функцию JQuery и как ее использовать"
Я искал в Google, но я не нашел информации об этом.
Можете ли вы подробнее рассказать о пользовательских функциях?
Я ищу информацию об этом - "Как создать пользовательскую функцию JQuery и как ее использовать"
Я искал в Google, но я не нашел информации об этом.
Можете ли вы подробнее рассказать о пользовательских функциях?
Под "пользовательской функцией" я предполагаю, что вы имеете в виду "плагин". Если это так, есть хороший учебник на сайте jQuery. Основная идея такова:
(function($) {
$.fn.myPlugin = function() {
return this.each(function() {
//Do stuff
});
};
}(jQuery));
В принципе, приведенный выше код делает несколько вещей. Во-первых, он фиксирует значение jQuery
и передает его в анонимную функцию, где затем его можно называть $
(это значит, что пользователи вашего плагина, которые используют идентификатор $
для чего-то еще все еще может использовать его.)
Затем он объявляет метод на $.fn
, который является просто псевдонимом для $.prototype
. Внутри этого метода this
относится к согласованному набору элементов, на который был вызван плагин. Поскольку это объект jQuery и может содержать несколько элементов, вам нужно выполнить итерацию по этому набору (поэтому существует each
).
Оператор return
используется для поддержания связуемости плагина с другими методами jQuery. Поскольку each
возвращает экземпляр jQuery, сам плагин возвращает экземпляр jQuery, и другие методы jQuery, очевидно, могут быть вызваны в экземпляре jQuery.
вы можете использовать его так:
$(document).ready(function() {
$('#button').click(function(){
$(this).myFunction();
});
$.fn.myFunction = function() {
alert('test');
}
});
Как сказал gesutery, используйте "extend". Вы можете добавить свои собственные свойства и функции в качестве значений:
$(function(){
$.extend({
propAsString: '',
propAsNumber: 12345,
propAsObject: {},
propAsFunction: function() {
//your function code
}
});
$.propAsFunction(); //call your function
});
(function($){
$.fn.extend({
//plugin name - animatemenu
animateMenu: function(options) {
//Settings list and the default values
var defaults = {
animatePadding: 60,
defaultPadding: 10,
evenColor: '#ccc',
oddColor: '#eee'
};
var options = $.extend(defaults, options);
return this.each(function() {
var o =options;
//Assign current element to variable, in this case is UL element
var obj = $(this);
//Get all LI in the UL
var items = $("li", obj);
//Change the color according to odd and even rows
$("li:even", obj).css('background-color', o.evenColor);
$("li:odd", obj).css('background-color', o.oddColor);
//Attach mouseover and mouseout event to the LI
items.mouseover(function() {
$(this).animate({paddingLeft: o.animatePadding}, 300);
}).mouseout(function() {
$(this).animate({paddingLeft: o.defaultPadding}, 300);
});
});
}
});
})(jQuery);
Для тех, кто ищет "пользовательскую функцию" в соответствии с заголовком, он прост как:
if(window.$)
window.$.customMethod = function() { * your code here * };
Это будет работать как $.ajax()
делает
Мне нужно, чтобы мои пользовательские функции вызывались как $.myfunction()
. Я определил эти функции во внешнем js файле несколько как это
$.myfunction = function(){
//Your code here
};