zoukankan      html  css  js  c++  java
  • javascript:jquery.history.js使用方法

    step1:download jquery.history.js

    step2:create a test page as following:

    说明:当页面执行javascript代码后,地址栏能前进和后退。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
    #mydiv
    {
    border: 1px solid blue;
    400px;
    height: 200px;
    }
    </style>

    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.history.js" type="text/javascript"></script>
    <script type="text/javascript">
    function showMsg(msg) {//you can ajax request
      $('#mydiv').html(msg);
    }
    $(function () {
      $("#link1").bind("click", function () { window.location.hash = "#link1"; });
      $("#link2").bind("click", function () {  window.location.hash = "#link2"; });
      $("#link3").bind("click", function () {  window.location.hash = "#link3"; });

      $.history.init(function (hash) {
        var msg;
        if (hash) {
          msg= hash;
        } 

        else 

        {
         msg= "no set hash value"
        }
        showMsg(msg);
      });
    })
    </script>


    </head>
    <body>
    <input type="button" value="button1" id="link1" />
    <input type="button" value="button2" id="link2" />
    <input type="button" value="button3" id="link3" />
    <hr />
    <div id="mydiv">
    </div>

    </body>

    </html>

  • 相关阅读:
    [git] git 的基本认知
    [Java] Java IO Files
    [Java] Java IO 概况
    [Java] JavaMail 发送带图片的 html 格式的邮件
    [Java] HashMap 导致的高 CPU 使用率
    [Struts] Hello World Demo
    [Hibernate] 注解映射例子
    [Hibernate] List 映射例子
    cmd的xcopy命令
    wpf custom control
  • 原文地址:https://www.cnblogs.com/tuolin/p/1901439.html
Copyright © 2011-2022 走看看