|
|
 |
- Подробности
-
Категория: HTML, CSS
AngularJS — JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений. Его цель — расширение браузерных приложений на основе MVC шаблона, а также упрощение тестирования и разработки.
Фреймворк работает с HTML, содержащим дополнительные пользовательские атрибуты, которые описываются директивами, и связывает ввод или вывод области страницы с моделью, представляющей собой обычные переменные JavaScript. Значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных.
Популярные Angular-директивы
С помощью директив AngularJS можно создавать пользовательские HTML-теги и атрибуты, чтобы добавить поведение некоторым элементам.
- ng-app
- Объявляет элемент корневым для приложения.
- ng-bind
- Автоматически заменяет текст HTML-элемента на значение переданного выражения.
- ng-model
- То же что и ng-bind, только обеспечивает двустороннее связывание данных. Изменится содержимое элемента, ангуляр изменит и значение модели. Изменится значение модели, ангуляр изменит текст внутри элемента.
- ng-class
- Определяет классы для динамической загрузки.
- ng-controller
- Определяет JavaScript-контроллер для вычисления HTML-выражений.
- ng-repeat
- Создает экземпляр для каждого элемента из коллекции.
- ng-show и ng-hide
- Показывает или скрывает элемент в зависимости от значения логического выражения.
- ng-switch
- Создает экземпляр шаблона из множества вариантов, в зависимости от значения выражения.
- ng-view
- базовая директива, отвечает за обработку маршрутов, которые принимают JSON перед отображением шаблонов, управляемых указанными контроллерами.
Двустороннее связывание данных
Двустороннее связывание данных в AngularJS является наиболее примечательной особенностью и уменьшает количество кода, освобождая сервер от работы с шаблонами. Вместо этого, шаблоны отображаются как обычный HTML, наполненный данными, содержащимися в области видимости, определенной в модели. Сервис $scope в Angular следит за изменениями в модели и изменяет раздел HTML-выражения в представлении через контроллер. Кроме того, любые изменения в представлении отражаются в модели. Это позволяет обойти необходимость манипулирования DOM и облегчает инициализацию и прототипирование веб-приложений[2].
Ссылки
- <!doctype html>
- <html
ng-app>
- <head>
- <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/
angular.min.js"></script>
- </head>
- <body>
- <div>
- <label>Имя:</label>
- <inputtype="text"
ng-model="yourName"placeholder="Введите свое имя">
- <hr>
- <h1>Привет
{{yourName}}!</h1>
- </div>
- </body>
- </html>
- Подробности
-
Категория: HTML, CSS
1. <div id="block" style="background:#000;width:100px;height:100px"> </div> <button onclick="document.getElementById('block').style.display='none'">Click</button>
2. А в чём проблема? Проверьте условием: скрыт ли блок.
<div id="block" style="background:#000;width:100px;height:100px"> </div>
<button onclick="
var a =document.getElementById('block');
if(a.style.display=='none')
a.style.display='block'
else
a.style.display='none'">Click</button>
- Подробности
-
Категория: HTML, CSS
2001 г
Таблицы в примерах
Перевод Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра.
Центр Информационных Технологий, НГТУ
Этот документ содержит примеры таблиц. Он охватывает большинство новых тэгов в таблицах. Впрочем он не обязательно показывает некоторые действительно творческие возможности, доступные в таблицах.
ОБЫЧНАЯ ТАБЛИЦА 3X2
<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
ДВА ПРИМЕРА С ROWSPAN
Подробнее: Таблицы html в примерах
- Подробности
-
Категория: HTML, CSS
Наиболее используемым элементом форм несомненно является <input />. С его помощью создаются поля для ввода текста, паролей и выбора файлов, а также кнопки, флажки и переключатели. В HTML 5 он еще и приспособлен для ввода всевозможных дат, числовых значений, телефонов, адресов и даже выбора цвета. Все это многообразие определяется атрибутом type, все допустимые значения которого перечислены в таблице ниже. Вы уже знаете, что данные из формы передаются на сервер в виде пар «поле=значение». Название поля, определяемого элементом <input /> задается атрибутом name, а его значение по умолчанию можно указать в value.
Подробнее: Краткий курс HTML 5 / Элементы ввода данных
- Подробности
-
Категория: HTML, CSS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Крутой сайт</title>
<link rel="stylesheet" href="/css/css_reset.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="main">
<div id="header"></div>
<div id="left"></div>
<div class="right"></div>
<div class="right"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
style.css
div{
border: 1px solid black;
}
#main{
width: 80%;
margin: 0 auto;
}
#header{
height: 110px;
}
#left{
height: 500px;
width: 20%;
float: left;
}
#content{
height: 500px;
overflow: hidden;
}
.right{
height: 500px;
width: 20%;
float: right;
}
#footer{
height: 70px;
clear: both;
}
|
|
|
|
