Как я могу разработать пользовательский элемент управления в JavaScript (возможно использующий jQuery)
Я хотел бы создать пользовательский элемент управления в JavaScript. Цель состоит в том, чтобы создать стандартный блок, который имеет методы, свойства и события и рендеринг в отделение.
Примером одного такого управления был бы календарь. Это представило бы в отделении, это будет иметь свойства, которые определили бы, как это отображено и какая дата выбрана или выделена, это имело бы методы, чтобы изменить текущий месяц или выбрать некоторую дату, и это сгенерирует события, когда день будет нажат, или текущий месяц изменяется вводом данных пользователем.
Я могу думать о большом количестве способа реализовать это, и я не уверен, каков лучший способ. Я, кажется, помню, что это - плохая вещь увеличить элементы DOM со свойствами и методом, таким образом, я исключил это. Плагин jQuery походит на хорошую идею, однако я не уверен, уместно ли создать плагин для каждого метода, мое управление имело бы так, я мог затем использовать его как:
$('#control').method1();
$('#control').method2();
И если я действительно использую jQuery, где я храню частные данные своего управления?
Другая идея, которую я получил, состояла в том, чтобы создать новый вид объекта, который будет иметь ссылку на отделение, в котором это могло представить, это - элементы.
Таким образом, что предпочтенный путь состоит в том, чтобы сделать это. Если бы я могу я хотеть сделать это как плагин jQuery, но мне были бы нужны инструкции по тому, как создать методы и где хранить частные данные. Я посмотрел на Плагины/Авторскую разработку на веб-сайте jQuery, и он не сделал помог так многому в этом отношении.
2 ответа
- Вы можете начать с чтения этого, простого руководства по плагинам JQuery
- Вы также можете получить много идей на этом сайте, руководстве по виджетам jQuery UI.
В качестве отправной точки первый сайт предлагает этот фрагмент в качестве скелета для разработки плагина:
//You need an anonymous function to wrap around your function to avoid conflict
(function($){
//Attach this new method to jQuery
$.fn.extend({
//This is where you write your plugin's name
pluginname: function() {
//Iterate over the current set of matched elements
return this.each(function() {
//code to be inserted here
});
}
});
//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )
})(jQuery);
При написании подключаемых модулей JQuery вы обычно предоставляете методы через дополнительные аргументы функции подключаемого модуля
Например:
$("#id").myplugin( 'method1' );
Хранить данные довольно просто. Просто решите, хотите ли вы сохранить эти данные в DOM или в памяти. В последнем случае вам необходимо создать объект, к которому ваш плагин может получить доступ.
(function($) {
var data;
$.fn.extend({
myplugin: function(args) {
if (args === 'init') {
data = {};
data.prop1 = val;
}
if (args === 'method1')
alert(data.prop1);
}
});
})(JQuery);
Если вы хотите сохранить данные в DOM, вы должны добавить атрибут (ы) в свой контейнерный div с данными, которые вы хотите сохранить.
(function($) {
$.fn.extend({
myplugin: function(args) {
if (args === 'init') {
$(this).attr('data') = val;
}
if (args === 'method1')
alert($(this).attr('data'));
}
});
})(JQuery);