我的脚本有一些问题：
它不会将点击功能附加到新元素
不加载其中包含内联 java 的元素
我的目标是制作一个具有实时页面更改和单击功能的左右滑动方法的网站，同时#从 url 中删除。
这是我的代码：
$(function(){
if (Modernizr.history) {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$panel = $("#panel");
$panel.visible = false;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("li").delegate("a", "click", function () {
_link = $(this).attr("href");
history.pushState(null, null, _link);
ajaxcontent();
loadContent(_link);
return false;
});
function ajaxcontent(href) {
var content = $('#guts' + href).html();
$("#page-wrap").stop().css("position", "relative").animate({
left: "3000px"
}, 1000, 'easeOutSine', function () {});
}
function loadContent(href) {
$mainContent.find("#guts").fadeOut(200, function () {
$mainContent.load(href + " #guts", function () {
$mainContent.fadeIn(200, function () {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
jQuery("#page-wrap").css({
display: "block",
left: "-3000px"
}).animate({
left: "0px"
}, 1000, 'easeOutSine');
});
$("li a[href*='+href+']").removeClass("current");
console.log(href);
$("li a[href*='+href+']").addClass("current");
});
});
}
$(document).bind('popstate', 'guts', function (e, data) {
_link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
loadContent(_link);
});
} // otherwise, history is not supported, so nothing fancy here.
});
这是位于文件 im 上的头，包括
<script type="text/javascript">
var CCM_DISPATCHER_FILENAME = '/get-installed-today/index.php';
var CCM_CID = 144;
var CCM_EDIT_MODE = false;
var CCM_ARRANGE_MODE = false;
var CCM_IMAGE_PATH = "/get-installed-today/concrete/images";
var CCM_TOOLS_PATH = "/get-installed-today/index.php/tools/required";
var CCM_BASE_URL = "http://dralarm.net";
var CCM_REL = "/get-installed-today";
</script>
<link rel="stylesheet" type="text/css" href="/get-installed- today/concrete/css/ccm.base.css?v=70f0a7a04670ba4505c2723bfe639897" />
<script type="text/javascript" src="/get-installed-today/concrete/js/jquery.js?v=70f0a7a04670ba4505c2723bfe639897"></script>
<script type="text/javascript" src="/get-installed-today/concrete/js/ccm.base.js?v=70f0a7a04670ba4505c2723bfe639897"></script>
<style type="text/css">
#blockStyle562MainBodyLayout4Cell134 {background-repeat:no-repeat; margin:0 0 5px 0; padding:0 0 5px 0; }
#blockStyle979MainBodyLayout7Cell244 {background-repeat:no-repeat; margin:0 5px 5px 5px; padding:0 5px 5px 5px; }
#blockStyle1192MainBodyLayout7Cell143 {background-repeat:no-repeat; margin:0 5px 5px 5px; padding:0 5px 5px 5px; }
#blockStyle1193MainBodyLayout7Cell344 {background-repeat:no-repeat; margin:0 5px 5px 5px; padding:0 5px 5px 5px; }
#id1 {background-repeat:no-repeat; }
#ccm-layout-mainbody-248-7 .ccm-layout-col-spacing { margin:0px 5px }
#ccm-layout-mainbody-249-3 .ccm-layout-col-spacing { margin:0px 3px }
#ccm-layout-mainbody-198-10 .ccm-layout-col-spacing { margin:0px 10px }
</style>
<style type="text/css">
#blockStyle934Main63 {background-color:#ed0303; background-repeat:repeat-x; }
</style>
<style type="text/css">
#blockStyle1190Main64 {background-image: url('/get-installed- today/files/5213/7022/9692/sidebar-red270.png'); background-repeat:repeat-x; }
</style>
<link rel="stylesheet" type="text/css" href="/get-installed-today/concrete/blocks/form/view.css?v=70f0a7a04670ba4505c2723bfe639897" />
<link rel="stylesheet" type="text/css" href="/get-installed-today/concrete/blocks/slideshow/view.css?v=70f0a7a04670ba4505c2723bfe639897" />
这是身体
<div id="ccm-layout-wrapper-4786" class="ccm-layout-wrapper">
<div id="ccm-layout-mainbody-69-4" class="ccm-layout ccm-layout-table ccm-layout-name-MainBody-Layout-4 ">
<div class="ccm-layout-row ccm-layout-row-1"><div class="ccm-layout-69-col-1 ccm-layout-cell ccm-layout-col ccm-layout-col-1 first" style="width:100%"> <div id="blockStyle562MainBodyLayout4Cell134" class=" ccm-block-styles" >
<script type="text/javascript">
//<![CDATA[
var ccmSlideShowHelper562 = {
bID:562,
imgNum:0,
init:function(){
this.displayWrap=$('#ccm-SlideshowBlock-display'+this.bID);
if(this.imgInfos.length==0){
//alert('There are no images in this slideshow');
return false;
}
var maxHeight=0;
for(var i=0;i<this.imgInfos.length;i++){
this.addImg(i);
if(maxHeight==0 || this.imgInfos[i].imgHeight > maxHeight)
maxHeight=this.imgInfos[i].imgHeight;
}
this.displayWrap.css('height',maxHeight);
//center images
for(var i=0;i<this.imgInfos.length;i++){
if( this.imgInfos[i].imgHeight < maxHeight){
var t=((maxHeight - this.imgInfos[i].imgHeight)/2);
this.imgEls[i].css('top',t);
}
}
this.nextImg();
},
nextImg:function(){
if(this.imgNum>=this.imgInfos.length) this.imgNum=0;
this.imgEls[this.imgNum].css('opacity',0);
this.imgEls[this.imgNum].css('display','block');
this.imgEls[this.imgNum].animate({opacity:1},
this.imgInfos[this.imgNum].fadeDuration*1000,'',function(){ccmSlideShowHelper562.preparefadeOut()});
var prevNum=this.imgNum-1;
if(prevNum<0) prevNum=this.imgInfos.length-1;
if(this.imgInfos.length==1) return;
this.imgEls[prevNum].animate({opacity:0},this.imgInfos[this.imgNum].fadeDuration*800,function(){this.style.zIndex=1;});
},
preparefadeOut:function(){
if(this.imgInfos.length==1) return;
var milisecDuration=parseInt(this.imgInfos[this.imgNum].duration)*1000;
this.imgEls[this.imgNum].css('z-index',2);
setTimeout('ccmSlideShowHelper'+562+'.nextImg();',milisecDuration);
this.imgNum++;
},
maxHeight:0,
imgEls:[],
addImg:function(num){
var el=document.createElement('div');
el.id="slideImgWrap"+num;
el.className="slideImgWrap";
if(this.imgInfos[num].fullFilePath.length>0)
imgURL=this.imgInfos[num].fullFilePath;
else imgURL='/get-installed-today/files/'+this.imgInfos[num].fileName;
//el.innerHTML='<img src="'+imgURL+'" >';
el.innerHTML='<div style="height:'+this.imgInfos[num].imgHeight+'px; background:url(\''+escape(imgURL)+'\') center no-repeat"> </div>';
//alert(imgURL);
if(this.imgInfos[num].url.length>0) {
//el.linkURL=this.imgInfos[num].url;
var clickEvent='onclick="return ccmSlideShowHelper562.imgClick( this.href );"';
el.innerHTML='<a href="'+this.imgInfos[num].url+'" '+clickEvent+' >'+el.innerHTML+'</a>';
}
el.style.display='none';
this.displayWrap.append(el);
var jqEl=$(el);
this.imgEls.push(jqEl);
},
imgClick:function(linkURL){
//override for custom behavior
},
imgInfos:[
{
fileName:"home-security-02.jpg",
fullFilePath:"/get-installed-today/files/8013/6798/3067/home-security-02.jpg",
duration:5,
fadeDuration:2,
url:"",
groupSet:0,
imgHeight:300 }
, {
fileName:"protect-04-1.png",
fullFilePath:"/get-installed-today/files/3413/6796/1826/protect-04-1.png",
duration:5,
fadeDuration:2,
url:"",
groupSet:0,
imgHeight:278 }
, {
fileName:"home-security.jpg",
fullFilePath:"/get-installed-today/files/9213/6796/1210/home-security.jpg",
duration:5,
fadeDuration:2,
url:"",
groupSet:0,
imgHeight:300 }
]
}
$(function(){ccmSlideShowHelper562.init();});
//]]>
</script>
<div id="ccm-SlideshowBlock-display562" class="ccm-SlideshowBlock-display">
<div id="ccm-SlideshowBlock-heightSetter562" class="ccm-SlideshowBlock-heightSetter"> </div>
<div class="ccm-SlideshowBlock-clear" ></div>
</div>
</div></div>
这是一个由混凝土 5 制作的幻灯片