Js метки (закладки, индивидуальный каталог меток с ссылками) на сайте.

Тема в разделе "JavaScript", создана пользователем jabbaxatt, 26 май 2014.

Модераторы: ZiX
  1. jabbaxatt

    jabbaxatt Добрый модератор

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    896
    Симпатии:
    423
    Есть ли где в природе решение похожее на систему меток как на Перейти по ссылке

    Там когда наводишь на товар, появляется возможность повесить метку на любой товар. Если потом вернуться (в том же браузере, т.е. скорее всего идёт привязка к кукам) то в отдельном блоке на сайте висят красивенько все твои метки.

    P.S. если есть что-то требующее доработки - то желательно чтобы нужно было дорабатывать PHP часть а не JS, который я не знаю нихрена.
     
  2. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.564
    Симпатии:
    1.454
    Там и JS и PHP.
    JS:
    Куки для такого не стоит применять - на сайте используют local storage создавая отдельное key-value на каждую метку.
    PHP:
    так же эти данные аяксом передаём на сервер и для статистики полезно и для залогиненного пользователя можно будет во всех браузерах показать :)

    PS вообще первый раз такое вижу, думаю что стоит не готовое искать, а писать потихоньку с нуля, потому тема была перенесена в раздел JavaScript, авось кто и подсобит...
     
    Последнее редактирование: 26 май 2014
    jabbaxatt нравится это.
  3. jabbaxatt

    jabbaxatt Добрый модератор

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    896
    Симпатии:
    423
    Спасибо. Значит буду писать. Видимо пора кроме PHP ещё и Ajax с Java и Html5 осваивать.

    У меня тогда большая просьба будет - подкинуть информацию к размышлению и изучению. Чтобы в мануалах не закопаться, а как можно быстрее перейти к делу, т.е. к кодингу нужного функционала.

    Если я правильно понял мне нужно:
    1) Найти и прочитать нормальную статью или мануал как использовать local storage
    2) Понять основы работы с Ajax
    3) Понять как эти данные с помощью Ajax передать на обработку PHP. (с PHP у меня проблем нет - там что угодно напишу, а вот с остальным плохо)
    4) Переписать под себя это всплывающее окно с прокруткой меток и вывод "блока Мой каталог". Здесь наверно потребуется нелюбимый мной JavaScript.

    В чём я ошибаюсь?
    И есть ли хорошие статьи\мануалы по работе с localStorage и использовании Ajax

    Буду рад любым подсказкам укоряющим поиск решения!
     
    latteo нравится это.
  4. Vishez

    Vishez

    Регистр.:
    19 авг 2013
    Сообщения:
    170
    Симпатии:
    81
    Насчет пунктов 2 и 3 - лично я учился по этой статье Перейти по ссылке
    На самом деле это все проще чем кажется, глаза боятся, а руки делают, как говорится.
     
    jabbaxatt нравится это.
  5. jabbaxatt

    jabbaxatt Добрый модератор

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    896
    Симпатии:
    423
    Приступил к работе. Буду постить решения и вопросы тут.

    С Ajax движется. Но есть вопрос, какие параметры лучше использовать для передачи данных. Мне нужно по клике на картинку (или div) передать в php скрипт 2 вещи - адрес картинки метки, и URL страницы привязанный к этой метке. Я делаю так:

    Сперва идёт функция отвечающая за работу Ajax - за передачу данных в php скрипт и запуск его. Вроде всё правильно.
    где
    str1
    - адрес картинки метки (или можно потом код метки в базе данных использовать),
    str2 - URL страницы связанной с меткой
    zakladka.php - имя PHP скрипта куда передаются данные и который исполняется по клику на картинке.
    HTML:
    
    function showUser2(str1,str2) {
      if (str1=="") {
      document.getElementById("zakladki").innerHTML="";
      return;
      }
      if (window.XMLHttpRequest) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      } else { // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("zakladki").innerHTML=xmlhttp.responseText;
      }
      }
      xmlhttp.open("GET","zakladka.php?q1="+str1+"&q2="+str2,true);
      xmlhttp.send();
    }
    
    Ниже HTML код с картинкой и местом вывода результатов.
    HTML:
    
    <table border="1">
    <tr>
      <td>
        <img src="nomer1.png" alt="http://mysite.ru/my-stranica.html" onclick="showUser2(this.alt, this.src)">
      </td>
      <td>
        <img src="nomer2.png" alt="http://mysite.ru/my-stranica2.html" onclick="showUser2(this.alt, this.src)">
      </td>
    </tr>
    </table>
      <div id="zakladki">  тут место для вывода "поставленной метки"   </div>
    
    Собственно вопрос - как то погано пихать нужный мне URL в alt. Но лучших параметров не вижу, а свой псевдо-параметр типа myparametr="Перейти по ссылке" - не работает. В какие параметры лучше пихать данные?

    php скрипт принимает нужные данные из Get, там всё понятно. Видимый результат выполнения скрипта выводится в <div id=zakladki>

    А про грамотное использование LocalStorage с примерами есть статьи чтобы посмотреть?
     
    Последнее редактирование: 27 май 2014
  6. Vishez

    Vishez

    Регистр.:
    19 авг 2013
    Сообщения:
    170
    Симпатии:
    81
    Странно что не работает, работать должно. Просто валидацию может не пройти.
    Можно заюзать "data-" атрибуты. В твоем случае это будет data-myparametr="Перейти по ссылке

    ПРо localstorage тут Перейти по ссылке. Нужно помнить что оно не поддерживается в IE6 и IE7
     
    jabbaxatt нравится это.
  7. jabbaxatt

    jabbaxatt Добрый модератор

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    896
    Симпатии:
    423
    С дата атрибутами получилось. После того как написал this.dataset.myparametr1
    HTML:
      <img src="nomer1.png" data-myparametr1="http://mysite.ru/my-stranica.html" data-myparametr2="nomer1.png"  onclick="showUser2(this.dataset.myparametr1, this.dataset.myparametr2); lokstar2(this.dataset.myparametr1, this.dataset.myparametr2)"  >
     
  8. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.564
    Симпатии:
    1.454
    Задачи постановка неверная...

    На сайте источнике сделано так:
    На странице хранится скрытый блок с разными оценками (цифры), каждой из которых соответствует url картинки;
    У каждого продукта есть кнопка с id продукта, по нажатию на которую высвечивается возле продукта вышеописанный блок и продукту выставляется оценка;
    Оценка сохраняется локально в сереализированном виде {"t":1401107488,"k":211885,"d":[3]} t - время, k - id продукта, d - оценка и отправляется сервере

    Отправку лучше делать через jquery - получится более кроссбраузерно и кода меньше.
    onclick="showUser2(this.alt, this.src)" - не обязательно передавать параметры они и так будут доступны внутри функции через this
     
    jabbaxatt нравится это.