Категории:

  • Программирование


  • Изобразительное искусство


  • Программирование встраиваемых систем


  • Компьютерная графика


  • WEB Разработка


  • Музыка


  • Инженерия


  • iVARIOUS


  • Mobil App


  • JavaScript. Создание, поиск и удаление элементов

    В предыдущей статье рассмотрен пример кода для простой галереи. Как уже отмечалось, в управлении галереей нет неких сложных алгоритмов только манипуляция отображением страницы через теги. В этом случае используются только объекты направления HTML DOOM.
    Первое что попадается в файле JavaScript это глобальные переменные id_img, ln_img, и img_path. Они находятся вне всяких функций для того чтоб были видны везде. Первая функция img_up, она принимает источник изображения при нажатии на картинку. Строка :
    document.getElementById("galary");
    находит элемент по названию id и возвращает указатель на него -elem. Дальше:
    elem.getElementsByTagName('img');
    ищет и собирает в одном месте все нужные теги, в даном случае собираем все предварительно выведенные (например сервером через PHP) изображения - в что то вроде массива. В созданной функции search_img находим номер под которым в массиве находится изображение и сохраняем его в глобальную переменную id_img. В другой глобальной переменной ln_img сохраним длину массива изображений (количество изображений).
    Строкой:
    document.createElement('div');
    к существующей странице добавляется новый div и ссылку на него сохраняет переменная div_all.
    div_all.id="div_all_id";
    дает новому элементу div имя id по которому можно его найти. Для того чтоб новый div появился на странице записана строка:
    document.body.appendChild(div_all);
    и с этого момента в теле body будет внесен новый элемент.
    Теми же действиями создаем внутри нового div еще один div с уникальным именем id, специально для открытия выбранного в галереи изображения.
    Вычисленное ранее местоположение изображения в массиве images[id_img], через: img_path=document.images[id_img].src; извлекаем и сохраняем путь к нему.
    src="+" ' "+document.images[id_img].src+" ' >";
    выводит выбранное изображение в большом размере поверх галереи.
    Также создается дополнительный div в котором будут размещены кнопки:
    var div_button = document.createElement('div'); div_button.id="div_bt";
    Функция img_cls() является обработчиком кнопки закрытия окна, и удаляет созданные элементы (div):
    var remel=document.getElementById("div_image"); remel.parentNode.removeChild(remel);
    ... Метод ( функция ) next(), увеличивает переменную id_img в которой хранится номер изображения в массиве, тем самым выводит следующие изображения. Функция back() наоборот, уменьшает значение переменной id_img и выводит предыдущие изображения на экран. img_dwnld() играет роль кнопки download, создает новое окно в браузере и открывает картинку для загрузки в полном размере.

    Читайте больше в категории: WEB Разработка

    2016-06-28 10:36:26



    Другие статьи:

    WEB Разработка

    Maya. Sculpt Geometry Tool

    PHP. Передача параметров в ссылке. $_GET

    PHP. Типовые команды MySQL

    PHP. $_COOKIE

    HTML. Общее

    Maya. Loft и Revolve

    Математика и Программирование

    STM32

    Java. Перегрузка методов и конструктров