Javascript-форум (https://javascript.ru/forum/)
-   Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)
-   -   JavaScript Используя иерархию и наследования, создать классы окна, окна с заголовком (https://javascript.ru/forum/css-html-internet-explorer/82162-javascript-ispolzuya-ierarkhiyu-i-nasledovaniya-sozdat-klassy-okna-okna-s-zagolovkom.html)

Forever_smile 24.03.2021 16:20

JavaScript Используя иерархию и наследования, создать классы окна, окна с заголовком
 
Помогите пожалуйста, написать программу на javascript:
Используя иерархию и наследования, создать классы окна, окна с заголовком и окна с кнопкой.

ksa 24.03.2021 19:59

Цитата:

Сообщение от 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>

Forever_smile 24.03.2021 22:38

Большое спасибо! :)


Часовой пояс GMT +3, время: 03:45.