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

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

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

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

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    878
    Симпатии:
    411
    Есть ли где в природе решение похожее на систему меток как на http://www.love-sl.ru/catalog/for-men.html

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

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

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

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

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

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

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

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

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

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

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

    Vishez

    Регистр.:
    19 авг 2013
    Сообщения:
    169
    Симпатии:
    81
    Насчет пунктов 2 и 3 - лично я учился по этой статье http://www.w3schools.com/php/php_ajax_database.asp
    На самом деле это все проще чем кажется, глаза боятся, а руки делают, как говорится.
     
    jabbaxatt нравится это.
  5. jabbaxatt

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

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

    С 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="http://mysite.ru/my-stranica.html" - не работает. В какие параметры лучше пихать данные?

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

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

    Vishez

    Регистр.:
    19 авг 2013
    Сообщения:
    169
    Симпатии:
    81
    Странно что не работает, работать должно. Просто валидацию может не пройти.
    Можно заюзать "data-" атрибуты. В твоем случае это будет data-myparametr="http://mysite.ru/my-stranica.html". Подробнее тут http://html5doctor.com/html5-custom-data-attributes/

    ПРо localstorage тут http://www.w3schools.com/html/html5_webstorage.asp. Нужно помнить что оно не поддерживается в IE6 и IE7
     
    jabbaxatt нравится это.
  7. jabbaxatt

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

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    878
    Симпатии:
    411
    С дата атрибутами получилось. После того как написал 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.404
    Симпатии:
    1.185
    Задачи постановка неверная...

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

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