|
Помогите с созданием нового объекта
Помогите начинающему веб-программисту разобраться с ООП. Я хочу создать объект, который что-то делает с блоком <div>, например вставляет туда кнопку при нажатии на которую еще что-то делается ЭТИМ же объектом. Я имею ввиду, что объект внутри блока <div id="DivId"> создается код html с кнопкой, у которой событие - это метод этого же объекта. Что-то типа такого:
function myObj() {
this.a = "Text";
this.func1 = function() {
$("#DivId").html('<input type="button" value="' + this.a + '" onclick="' + this.func2 + '">');
}
this.func2 = function() {alert("Ok")}
this.func1();
}
$().ready(function() {var myBut = new myObj(); });
Как это вообще реализовать? Как правильно задать событие кнопке? Ведь когда эта кнопка присоединиться к дереву, то это уже должно быть как бы обращение к методу funk2 из вне объекта. |
Начинающему программисту лучше пока оставить jQuery в покое и начать читать:
http://dmitrysoshnikov.com/ecmascrip...eneral-theory/ http://dmitrysoshnikov.com/ecmascrip...mplementation/ ну и остальные статьи там и на этом сайте.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<div id="test-container"></div>
<script>
if (!Function.prototype.bind) {
Function.prototype.bind = function (obj) {
var args = Array.prototype.slice.call(arguments, 1), thisFunc = this;
function wrap() {
return thisFunc.apply(this instanceof wrap ? this : obj || window, args.concat(Array.prototype.slice.call(arguments)));
}
return wrap;
};
}
var common = {
event: {
add: function (element, eventType, listener) {
var wrap;
if ("addEventListener" in element) {
element.addEventListener(eventType, listener, false);
}
else if ("attachEvent" in element) {
wrap = function () {
listener.call(element, window.event);
}
element.attachEvent("on" + eventType, wrap);
}
return wrap || listener;
}
}
};
function MyObj(node) {
this._container = node;
this.render();
}
MyObj.prototype = {
constructor: MyObj,
buttonCaption: "Text",
message: "Ok",
eventType: "click",
_container: null,
_button: null,
render: function () {
this.addButton();
this.initEvents();
},
addButton: function () {
var btn = document.createElement("input");
btn.type = "button";
btn.value = this.buttonCaption;
this._container.appendChild(btn);
this._button = btn;
},
initEvents: function () {
common.event.add(this._button, this.eventType, this.showMessage.bind(this));
},
showMessage: function () {
alert(this.message);
}
};
new MyObj(document.getElementById("test-container"));
</script>
</body>
</html>
|
Ну Вы жжёте вообще) Я весь мозг сломал пока процентов 20 отсюда понял :)
|
Я плагин видел для Квери,создающий новый объект. Погуглите,найдете его
|
jQuery головного мозга детектед
|
У кого?))
|
Цитата:
|
popov654, вам бы действительно для начала основы подучить. Чего вы хотите добиться этой строкой:
onclick="' + this.func2 + '" Вот как думаете, что у вас туда попадет? |
Цитата:
Цитата:
|
Спасибо за ссылки, но подобную литературу я уже прочла. Но вот несколько моментов осталось непонятых. Я изучила основы JavaScript jQuery, по только ОСНОВЫ. Я могу написать на JavaScript процедурным способом. Т. е. создать 20 функций в скрипте и вызывать из одной функции другую. Так у меня получается. Но я хочу разобраться с ООП, с пространством имен. Мне нужна помощь конкретно в этом примере. Еще раз привожу его, немного изменив. Вот есть страничка index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
var first = "Первая кнопка",
second = "Вторая кнопка";
function firstBut(){$("#doc").append('<input type="button" value="'+first+'" onclick="secondBut()">');}
function secondBut() {$("#doc").append('<input type="button" value="'+second+'" onclick="ok()">');}
function ok() {alert("ОК!");}
$().ready(function() {firstBut();});
</script>
</head>
<body>
Начало
<div id="doc"></div>
</body>
</html>
Если ее запустить, то все работает. Но тут реализовано процедурным способом. А как сделать так, что бы переменные first и second были свойвствами какого то объекта, а функции firstBut и secondBut - его методами? |
| Часовой пояс GMT +3, время: 16:26. |
|