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

[jabbaxatt]

Есть ли где в природе решение похожее на систему меток как на Для просмотра ссылки Войди или Зарегистрируйся

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

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

 

[latteo]

Там и JS и PHP.
JS:
Куки для такого не стоит применять - на сайте используют local storage создавая отдельное key-value на каждую метку.
PHP:
так же эти данные аяксом передаём на сервер и для статистики полезно и для залогиненного пользователя можно будет во всех браузерах показать

PS вообще первый раз такое вижу, думаю что стоит не готовое искать, а писать потихоньку с нуля, потому тема была перенесена в раздел Для просмотра ссылки Войди или Зарегистрируйся, авось кто и подсобит...

 

[jabbaxatt]

Спасибо. Значит буду писать. Видимо пора кроме PHP ещё и Ajax с Java и Html5 осваивать.

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

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

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

Буду рад любым подсказкам укоряющим поиск решения!

 

[Vishez]

Спасибо. Значит буду писать. Видимо пора кроме PHP ещё и Ajax с Java и Html5 осваивать.

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

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

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

Буду рад любым подсказкам укоряющим поиск решения!

Насчет пунктов 2 и 3 - лично я учился по этой статье Для просмотра ссылки Войди или Зарегистрируйся
На самом деле это все проще чем кажется, глаза боятся, а руки делают, как говорится.

 

[jabbaxatt]

Приступил к работе. Буду постить решения и вопросы тут.

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

Сперва идёт функция отвечающая за работу Ajax - за передачу данных в php скрипт и запуск его. Вроде всё правильно.
где
str1 - адрес картинки метки (или можно потом код метки в базе данных использовать),
str2 - URL страницы связанной с меткой
zakladka.php - имя PHP скрипта куда передаются данные и который исполняется по клику на картинке.

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 код с картинкой и местом вывода результатов.

<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 с примерами есть статьи чтобы посмотреть?

 

[Vishez]

Собственно вопрос - как то погано пихать нужный мне URL в alt. Но лучших параметров не вижу, а свой псевдо-параметр типа myparametr="Для просмотра ссылки Войди или Зарегистрируйся" - не работает. В какие параметры лучше пихать данные?

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

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

 

[jabbaxatt]

Странно что не работает, работать должно. Просто валидацию может не пройти.
Можно заюзать "data-" атрибуты.

С дата атрибутами получилось. После того как написал this.dataset.myparametr1

  <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)"  >

 

[latteo]

передать в php скрипт 2 вещи - адрес картинки метки

Задачи постановка неверная...

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

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