Создадим страницу с помощью блокнота или c помощью
прекрасной программы Notepad++, которую можно бесплатно скачать отсюда: http://notepad-plus-plus.org/
Напишем в начале страницы сл. код:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8">
<title>jQuery Example</title>
<!--здесь должна быть ссылка на вашу версию-->
<script src="jquery-1.5.1.js"></script>
<script>
$(document).ready(function() {
$("#btn_01").click(function(){
alert("you click the button");
});
});
</script>
</head>
<body>
<div id="btn_01" style="border: solid #000000 1px; padding: 5px; width: 120px; cursor: pointer;">button</div>
</body>
</html>
Пояснение. Итак. После тэга <body> - у нас имеется элемент, который называется btn_01. Это слой, который с помощью стиля (style) имеет очертания - border (размером в 1 пиксел), черного цвета (#000000)... Кроме того, я добавил изменение курсора - cursor: pointer, чтобы при наведении он менялся
Наверху внутри конструкции $(document).ready(function() { располагается
$("#btn_01").click(function(){
alert("you click the button");
});
Нашему слою btn_01 мы присваиваем действие click
При запуске страницы с помощью Google Chrome при нажатии на клавишу появится окошко с надписью "you click the button!"
Таким же образом можно создать неограниченное количество кнопок для любых целей
Напишем в начале страницы сл. код:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8">
<title>jQuery Example</title>
<!--здесь должна быть ссылка на вашу версию-->
<script src="jquery-1.5.1.js"></script>
<script>
$(document).ready(function() {
$("#btn_01").click(function(){
alert("you click the button");
});
});
</script>
</head>
<body>
<div id="btn_01" style="border: solid #000000 1px; padding: 5px; width: 120px; cursor: pointer;">button</div>
</body>
</html>
Пояснение. Итак. После тэга <body> - у нас имеется элемент, который называется btn_01. Это слой, который с помощью стиля (style) имеет очертания - border (размером в 1 пиксел), черного цвета (#000000)... Кроме того, я добавил изменение курсора - cursor: pointer, чтобы при наведении он менялся
Наверху внутри конструкции $(document).ready(function() { располагается
$("#btn_01").click(function(){
alert("you click the button");
});
Нашему слою btn_01 мы присваиваем действие click
При запуске страницы с помощью Google Chrome при нажатии на клавишу появится окошко с надписью "you click the button!"
Таким же образом можно создать неограниченное количество кнопок для любых целей
Комментариев нет:
Отправить комментарий