Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.08.2011, 01:49
Интересующийся
Отправить личное сообщение для yambbkru Посмотреть профиль Найти все сообщения от yambbkru
 
Регистрация: 22.08.2011
Сообщений: 28

Помогите с созданием нового объекта
Помогите начинающему веб-программисту разобраться с ООП. Я хочу создать объект, который что-то делает с блоком <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 из вне объекта.
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2011, 05:27
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Начинающему программисту лучше пока оставить 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>
Ответить с цитированием
  #3 (permalink)  
Старый 22.08.2011, 09:43
Профессор
Отправить личное сообщение для popov654 Посмотреть профиль Найти все сообщения от popov654
 
Регистрация: 22.09.2010
Сообщений: 217

Ну Вы жжёте вообще) Я весь мозг сломал пока процентов 20 отсюда понял
Ответить с цитированием
  #4 (permalink)  
Старый 22.08.2011, 10:47
Аватар для Андрей38
Профессор
Отправить личное сообщение для Андрей38 Посмотреть профиль Найти все сообщения от Андрей38
 
Регистрация: 11.12.2010
Сообщений: 261

Я плагин видел для Квери,создающий новый объект. Погуглите,найдете его
__________________
http://www.youtube.com/watch?feature...&v=cz0uN1ZNuM0
История не в теории ,а по факту
Ответить с цитированием
  #5 (permalink)  
Старый 22.08.2011, 11:20
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

jQuery головного мозга детектед
Ответить с цитированием
  #6 (permalink)  
Старый 22.08.2011, 11:55
Профессор
Отправить личное сообщение для popov654 Посмотреть профиль Найти все сообщения от popov654
 
Регистрация: 22.09.2010
Сообщений: 217

У кого?))
Ответить с цитированием
  #7 (permalink)  
Старый 22.08.2011, 12:26
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Андрей38
Я плагин видел для Квери,создающий новый объект. Погуглите,найдете его
Универсальный ответ на любой вопрос: Я плагин видел для Квери, делающий название темы. Погуглите,найдете его.
Ответить с цитированием
  #8 (permalink)  
Старый 22.08.2011, 12:34
Аватар для SkyLight
Злюка-бобер
Отправить личное сообщение для SkyLight Посмотреть профиль Найти все сообщения от SkyLight
 
Регистрация: 21.03.2010
Сообщений: 438

popov654, вам бы действительно для начала основы подучить. Чего вы хотите добиться этой строкой:
onclick="' + this.func2 + '"

Вот как думаете, что у вас туда попадет?
__________________
In WEB We Trust
У всех есть своя темная сторона...
Ответить с цитированием
  #9 (permalink)  
Старый 22.08.2011, 13:08
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Сообщение от popov654
У кого?))
у Андрей38

Сообщение от SkyLight
popov654, вам бы действительно…
тему создал yambbkru
Ответить с цитированием
  #10 (permalink)  
Старый 22.08.2011, 14:02
Интересующийся
Отправить личное сообщение для yambbkru Посмотреть профиль Найти все сообщения от yambbkru
 
Регистрация: 22.08.2011
Сообщений: 28

Спасибо за ссылки, но подобную литературу я уже прочла. Но вот несколько моментов осталось непонятых. Я изучила основы 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 - его методами?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с созданием обменного пункта dikabraz Работа 2 23.04.2011 22:17
Помогите чайнику определить местоположение объекта maydep Общие вопросы Javascript 4 02.11.2010 09:17
Пожалуйста, помогите с созданием скрипта! Елизавета Общие вопросы Javascript 10 08.06.2010 13:20
Помогите!!! Из нового окна вызвать функцию ignavr Элементы интерфейса 5 13.12.2009 13:04
помогите с положением свободно позиционируемого объекта Newgen Элементы интерфейса 16 28.07.2009 09:41