Недавно просмотренные DIV без перезагрузки страницы - PullRequest
Новая
       10

Недавно просмотренные DIV без перезагрузки страницы

0 голосов
/ 15 марта 2009

Я хотел бы, чтобы div "недавно просмотренные страницы" заполнялся сценарием javascript, который добавляет заголовки и URL-адреса новых страниц по мере того, как они запрашиваются пользователем во время сеанса на сайте, с помощью которого содержимое div также поддерживается файлом cookie для сохранения между сеансами.

Примечание: новая страница, добавленная в «список истории» div, включает нажатие на ссылки href, которые содержат только статическую переменную, которая, таким образом, только перемещает окно вниз, а не ПОЛУЧАЕТ полностью новую страницу. Например, эти ссылки: 

<a class="link" href="#john">  <a class="link" href="#mary">
  • , которые будут показаны двумя новыми предметами.

Вот некоторые примеры кода, которые на самом деле не решают проблему для меня, потому что они не включают статические переменные GET, находящиеся на той же странице:

http://community.actinic.com/showthread.php?t=33229
http://wordpress.org/extend/plugins/last-viewed-posts/installation/

1 Ответ

4 голосов
/ 15 марта 2009

Вот что-то, что должно делать то, что вы хотите, используя jQuery: 

(function($){

    var history;

    function getHistory() {
        var tmp = $.cookie("history");
        if (tmp===undefined || tmp===null) tmp = "";
        if ($.trim(tmp)=="") tmp = [];
        else tmp = tmp.split("||");
        history = [];
        $.each(tmp, function(){
            var split = this.split("|");
            history.push({
                title: split[0],
                url: split[1]
            });
        });
    }

    function saveHistory() {
        var tmp = [];
        $.each(history, function(){
            tmp.push(this.title+"|"+this.url);
        });
        $.cookie("history",tmp.join("||"),{ expires: 60, path: "/" });
    }

    function addToHistory(title,url) {
        var newHistory = []
        $.each(history, function(){
            if (this.url!=url) newHistory.push(this);
        });
        history = newHistory;
        if (history.length>=10) {
            history.shift();
        }
        history.push({
            title: title,
            url: url
        });
        saveHistory();
        writeHistory();
    }

    function writeHistory() {
        var list = $("<ul />");
        $.each(history, function() {
            var element = $("<li />");
            var link = $("<a />");
            link.attr("href",this.url);
            link.text(this.title);
            element.append(link);
            list.append(element);
        });
        $("#history").empty().append(list);
    }

    $(document).ready(function(){
        getHistory();
        var url = document.location.href;
        var split = url.split("#");
        var title;
        if (split.length > 1) {
            title = $("#"+split[1]).text();
        } else {
            title = document.title;
        }
        if (title===undefined || title===null || $.trim(title)=="") title = url;
        addToHistory(title,url);
        url = split[0];
        $("a[href^='#']").click(function(){
            var link = $(this);
            var href = link.attr("href");
            var linkUrl = url+href;
            var title = $(href).text();
            if (title===undefined || title===null || $.trim(title)==="") title = linkUrl;
            addToHistory(title,linkUrl);
        });
    });

})(jQuery);

Вставьте js-файл, который вы включили во все ваши страницы. Вам также нужно включить jquery.cookie.js перед этим (http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/)

Ваша страница должна быть отформатирована следующим образом:

[history.html] 

    <html>
     <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript" src="jquery.cookie.js"></script>
      <script type="text/javascript" src="history.js"></script>
      <title>My First Page</title>
     </head>
     <body>
      <h2>PAGE ONE</h2>
      <h3>History</h3>
      <div id="history"></div>
      <h3>Links</h3>
      <a href="#part1">Page 1 -Part 1</a>
      <a href="#part2">Page 1 -Part 2</a>
      <a href="history2.html#part1">Page 2 - Part 1</a>
      <a href="history2.html#part2">Page 2 - Part 2</a>
      <h3>Parts</h3>
      <h4 id="part1">Part 1 of the First Page</h4>
      <h4 id="part2">Part 2 of the First Page</h4>
     </body>
    </html>

[history2.html] 

    <html>
     <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript" src="jquery.cookie.js"></script>
      <script type="text/javascript" src="history.js"></script>
      <title>My Second Page</title>
     </head>
     <body>
      <h2>PAGE TWO</h2>
      <h3>History</h3>
      <div id="history"></div>
      <h3>Links</h3>
      <a href="#part1">Page 2 - Part 1</a>
      <a href="#part2">Page 2 - Part 2</a>
      <a href="history.html#part1">Page 1 - Part 1</a>
      <a href="history.html#part2">Page 1 - Part 2</a>
      <h3>Parts</h3>
      <h4 id="part1">Part 1 of the Second Page</h4>
      <h4 id="part2">Part 2 of the Second Page</h4>
     </body>
    </html>

Обратите внимание, что заголовок, используемый для блока истории, - это текст тега, на который нацелена ссылка, если это # ​​homething href, или заголовок страницы, если это не так.

Любой программист, обладающий некоторыми знаниями о jQuery, может настроить его под свои конкретные потребности.

...