Javascript.RU

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

JavaScript Используя иерархию и наследования, создать классы окна, окна с заголовком
Помогите пожалуйста, написать программу на javascript:
Используя иерархию и наследования, создать классы окна, окна с заголовком и окна с кнопкой.
Ответить с цитированием
  #2 (permalink)  
Старый 24.03.2021, 19:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,312

Сообщение от Forever_smile
Используя иерархию и наследования, создать классы окна, окна с заголовком и окна с кнопкой.
Как вариант...

<!DOCTYPE html>
<html>
<head>
<style>
.win {
	position: relative;
	width: 200px;
	height: 100px;
	margin-bottom: 50px;
	border: 1px solid;
}
.win.tit > :first-child {
	text-align: center;
	color: #ffffff;
	background-color: blue;
}
.win.btn > :first-child {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
}
</style>
  <!-- Загрузка React. -->
  <!-- Внимание: во время развертывания, замените "development.js" на "production.min.js". -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
</script>
</head>
<body> 

<div id='root'></div>

<script>
'use strict';

const e = React.createElement;

class Window extends React.Component {
	render() {
		let cls=['win']
		if (this.props.addClass) {
			cls.push(this.props.addClass)
		}
		return e(
			'div',
			{className: cls.join(' ')},
			this.props.children,
			'Window'
		);
	}
}

class WinTit extends React.Component {
	render() {
		let cls='tit'
		return e(
			Window,
			{addClass: cls},
			e(
				'div',
				null,
				this.props.titText
			)
		);
	}
}

class WinBtn extends React.Component {
	render() {
		let cls='btn'
		return e(
			Window,
			{addClass: cls},
			e(
				'div',
				null,
				e(
					'button',
					null,
					this.props.btnText
				)
			)
		);
	}
}

const container = document.querySelector('#root');
ReactDOM.render(
	e(
		'div',
		null,
		e(
			Window
		), 
		e(
			WinTit,
			{titText: 'Заголовок окна'}
		),
		e(
			WinBtn,
			{btnText: 'Ok'}
		)
	), 
	container
);
</script>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 24.03.2021, 22:38
Новичок на форуме
Отправить личное сообщение для Forever_smile Посмотреть профиль Найти все сообщения от Forever_smile
 
Регистрация: 24.03.2021
Сообщений: 2

Большое спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 18:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 19:34