Речь пойдёт не о математике, а о практике многократного использования части программы для того, чтобы выполнить какую-либо задачу.
Например, у нас есть несколько окошек, которые мы сделали с помощью слоёв (<div></div>)
И мы хотим, чтобы окошко выскакивало по центру страницы.
Для того, чтобы это сделать достаточно написать:
$("#_наш_слой").css("left","50%");
$("#_наш_слой").css("margin-left",-1*(obj_width/2));
А если в программе предусмотрено 10 диалогов.
Поэтому можно написать функцию, в ней прописать заранее действия, которые мы предполагаем предпринять с нашими слоями.
Функция в Java Script начинается со слова function далее идёт имя функции. Пробелы в имени, спецсимволы недопустимы. Пробелы можно заменить на знак подчёркивания. Наша функция будет называться - "помести_в_центр" (place_in_center)
function place_in_center(obj){
// вычисляем ширину obj (obj - переменная объекта)
var obj_width=$(obj).width();
// вычисляем высоту
var obj_height=$(obj).height();
//рисуем слева начиная от половины экрана
$(obj).css("left","50%");
//смещаем в лево на расстояние равное половине ширины объекта
$(obj).css("margin-left",-1*(obj_width/2));
// делаем тоже самое по вертикале
$(obj).css("top","50%");
$(obj).css("margin-top",-1*(obj_height/2));
}
После того, как функция написана, её помещают в начале программы - функцию объявляют.
После этого её можно многократно использовать.
place_in_center("#dialog_1");
place_in_center("#dialog_2");
place_in_center("#dialog_3");
и т.д.
Пример ниже можно скопировать пометить в текстовой файл, сохранить файл с расширением .html, например: "test.html" и открыть с помощью Google Crome.
Внимание! Для того, чтобы пример работал файл jquery.js, должен быть в той же папке.
Скачать jquery-1.5.1.js (для примера) можно отсюда: http://2l4u.ru/pub/js/jquery-1.5.1.js
<!DOCTYPE html>
<html lang="ru">
<head> <meta charset="utf-8">
<title>jQuery Example</title>
<!--здесь должна быть ссылка на вашу версию-->
<script src="jquery-1.5.1.js"></script>
<!--После этого, можно проверить работу JQuery следующим образом.
Напишем на странице следующий код:-->
<script>
$(document).ready(function() {
function place_in_center(obj){
var obj_width=$(obj).width();
var obj_height=$(obj).height();
$(obj).css("left","50%");
$(obj).css("margin-left",-1*(obj_width/2));
$(obj).css("top","50%");
$(obj).css("margin-top",-1*(obj_height/2));
}
place_in_center("#dialog_1");
place_in_center("#dialog_2");
place_in_center("#dialog_3");
});
</script>
<body>
<div id="dialog_1" style="position: absolute; background: #cc6600; width: 700px; height: 350px; border: solid #000000 4px; padding: 4px;">
<!-- содержимое диалога -->
Frame 1
</div>
<div id="dialog_2" style="position: absolute; background: #ff33cc; width: 600px; height: 300px; border: solid #000000 2px; padding: 4px;">
<!-- содержимое диалога -->
Frame 2
</div>
<div id="dialog_3" style="position: absolute; background: #336699; width: 500px; height: 250px; border: solid #000000 1px; padding: 4px;">
<!-- содержимое диалога -->
Frame 3
</div>
</body>
</html>
Например, у нас есть несколько окошек, которые мы сделали с помощью слоёв (<div></div>)
И мы хотим, чтобы окошко выскакивало по центру страницы.
Для того, чтобы это сделать достаточно написать:
$("#_наш_слой").css("left","50%");
$("#_наш_слой").css("margin-left",-1*(obj_width/2));
А если в программе предусмотрено 10 диалогов.
Поэтому можно написать функцию, в ней прописать заранее действия, которые мы предполагаем предпринять с нашими слоями.
Функция в Java Script начинается со слова function далее идёт имя функции. Пробелы в имени, спецсимволы недопустимы. Пробелы можно заменить на знак подчёркивания. Наша функция будет называться - "помести_в_центр" (place_in_center)
function place_in_center(obj){
// вычисляем ширину obj (obj - переменная объекта)
var obj_width=$(obj).width();
// вычисляем высоту
var obj_height=$(obj).height();
//рисуем слева начиная от половины экрана
$(obj).css("left","50%");
//смещаем в лево на расстояние равное половине ширины объекта
$(obj).css("margin-left",-1*(obj_width/2));
// делаем тоже самое по вертикале
$(obj).css("top","50%");
$(obj).css("margin-top",-1*(obj_height/2));
}
После того, как функция написана, её помещают в начале программы - функцию объявляют.
После этого её можно многократно использовать.
place_in_center("#dialog_1");
place_in_center("#dialog_2");
place_in_center("#dialog_3");
и т.д.
Пример ниже можно скопировать пометить в текстовой файл, сохранить файл с расширением .html, например: "test.html" и открыть с помощью Google Crome.
Внимание! Для того, чтобы пример работал файл jquery.js, должен быть в той же папке.
Скачать jquery-1.5.1.js (для примера) можно отсюда: http://2l4u.ru/pub/js/jquery-1.5.1.js
<!DOCTYPE html>
<html lang="ru">
<head> <meta charset="utf-8">
<title>jQuery Example</title>
<!--здесь должна быть ссылка на вашу версию-->
<script src="jquery-1.5.1.js"></script>
<!--После этого, можно проверить работу JQuery следующим образом.
Напишем на странице следующий код:-->
<script>
$(document).ready(function() {
function place_in_center(obj){
var obj_width=$(obj).width();
var obj_height=$(obj).height();
$(obj).css("left","50%");
$(obj).css("margin-left",-1*(obj_width/2));
$(obj).css("top","50%");
$(obj).css("margin-top",-1*(obj_height/2));
}
place_in_center("#dialog_1");
place_in_center("#dialog_2");
place_in_center("#dialog_3");
});
</script>
<body>
<div id="dialog_1" style="position: absolute; background: #cc6600; width: 700px; height: 350px; border: solid #000000 4px; padding: 4px;">
<!-- содержимое диалога -->
Frame 1
</div>
<div id="dialog_2" style="position: absolute; background: #ff33cc; width: 600px; height: 300px; border: solid #000000 2px; padding: 4px;">
<!-- содержимое диалога -->
Frame 2
</div>
<div id="dialog_3" style="position: absolute; background: #336699; width: 500px; height: 250px; border: solid #000000 1px; padding: 4px;">
<!-- содержимое диалога -->
Frame 3
</div>
</body>
</html>
Комментариев нет:
Отправить комментарий