pym.net
دوشنبه 18 شهریور 1392, 20:40 عصر
با سلام
میخوام محتوای صفحه رو بدون رفرش مرورگر تغییر بدم و کد زیر رو نوشتم که تا حدودی کار میکنه.
مشکل اینجاست که کد یکی در میون کار میکنه.
از دوستان و اساتید ممنونم میشم تو حلش بهم کمک کنند.
کد jquery
/// <reference path="jquery.js" />
$(document).ready(function () {
var hash = window.location.hash.substr(1);
var href = $("#nav li a").each(function () {
var href = $(this).attr("href");
if (hash == href.substr(0, href.length - 5)) {
var toLoad = hash + ".aspx #content";
$("#content").load(toLoad)
}
});
$("#nav li a").click(function () {
var toLoad = $(this).attr("href") + " #content";
$("#content").hide("fast", loadContent);
$("#load").remove();
$("body").append("<span id='load'>درحال بارگذاری...</span>");
$("#load").fadeIn("normal");
window.location.hash = $(this).attr("href").substr(0, $(this).attr("href").length - 5);
function loadContent() {
$("#content").load(toLoad, "", showNewContent());
}
function showNewContent() {
$("#content").show("normal", hideLoader());
}
function hideLoader() {
$("#load").fadeOut("normal");
}
return false;
});
});
کد صفحه
<head runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script src="AjaxLoader.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="content">
<h1>Page 2</h1><br />
<ul id="nav">
<li><a href="WebForm1.aspx">111</a></li>
<li><a href="WebForm2.aspx">222</a></li>
<li><a href="WebForm3.aspx">333</a></li>
</ul>
</div>
</form>
</body>
اینم پروژه کامل برای تست
110393
میخوام محتوای صفحه رو بدون رفرش مرورگر تغییر بدم و کد زیر رو نوشتم که تا حدودی کار میکنه.
مشکل اینجاست که کد یکی در میون کار میکنه.
از دوستان و اساتید ممنونم میشم تو حلش بهم کمک کنند.
کد jquery
/// <reference path="jquery.js" />
$(document).ready(function () {
var hash = window.location.hash.substr(1);
var href = $("#nav li a").each(function () {
var href = $(this).attr("href");
if (hash == href.substr(0, href.length - 5)) {
var toLoad = hash + ".aspx #content";
$("#content").load(toLoad)
}
});
$("#nav li a").click(function () {
var toLoad = $(this).attr("href") + " #content";
$("#content").hide("fast", loadContent);
$("#load").remove();
$("body").append("<span id='load'>درحال بارگذاری...</span>");
$("#load").fadeIn("normal");
window.location.hash = $(this).attr("href").substr(0, $(this).attr("href").length - 5);
function loadContent() {
$("#content").load(toLoad, "", showNewContent());
}
function showNewContent() {
$("#content").show("normal", hideLoader());
}
function hideLoader() {
$("#load").fadeOut("normal");
}
return false;
});
});
کد صفحه
<head runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script src="AjaxLoader.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="content">
<h1>Page 2</h1><br />
<ul id="nav">
<li><a href="WebForm1.aspx">111</a></li>
<li><a href="WebForm2.aspx">222</a></li>
<li><a href="WebForm3.aspx">333</a></li>
</ul>
</div>
</form>
</body>
اینم پروژه کامل برای تست
110393