0
我有一個簡單的小部件，並且希望將其加載到不同的站點上。我已閱讀this article並嘗試使用AJAX制定解決方案 - 將響應類型設置爲document。從遠程站點加載html模板
首先看起來一切似乎確定 - 滑塊項目加載，樣式確定。但滑塊不開始滾動。似乎JavaScript不會開始運行。上/下按鈕也不起作用。
下面的代碼描述了我到目前爲止所嘗試的。
Widget - 我用樹枝做模板，但它並不重要。這會產生一個傳送帶/滑塊like this。
<div class="slider-items-holder">
<div class="control-btns">
<ul><li><strong>Slider</strong></li>
<li><a href="javascript:void(0)" class="prev"></a></li>
<li><a href="javascript:void(0)" class="next"></a></li>
</ul>
</div>
<div class="content-wrapper">
<ul>
{% for job in jobs %}
<li>
<div class="job-spotlight">
<a href="{{ job.slug }}"><h4>{{ job.title }}<span class="job-type part-time">{{ job.type }}</span></h4></a>
<span><a target="_blank" href="{{ job.loc_statecode }}">
<i class="marker"></i> {{ job.loc_state }}</a>
</span>
<span><i class="user"></i>{{ job.company }}</span>
<p>{{ job.detail|striptags }} ... </p>
<a href="{{ job.slug }}" class="button">Apply For This Job</a>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/script.js"></script>
JS
function fetch_jobs_widget(selector) {
var url = "http://localhost:9874";
var t = "/static";
var js_template = '<script type="text/javascript" src="'+url+'/js/script.js"></script>';
var css_template = '<link rel="stylesheet" type="text/css" href="'+url+'/css/styles.css">'
var xhr = new XMLHttpRequest();
xhr.open("GET", url+t, true);
xhr.responseType = 'document';
xhr.onload = function(e) {
container(selector).innerHTML = "";
var doc = e.target.response;
var widgetFragment = document.createDocumentFragment();
widgetFragment.appendChild(doc.querySelector(".my-slider"));
container(selector).appendChild(widgetFragment);
container(selector).innerHTML += css_template;
container(selector).innerHTML += js_template;
}
xhr.send();
}
HTML - 我想使用的小工具，網頁上。
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="textwidget jobs-plugin-carousel">
</div>
<script type="text/javascript" src="widgets.js"></script>
<script type="text/javascript">fetch_jobs_widget('.textwidget');</script>
</body>
</html>
我也嘗試一次加載HTML/CSS/JS，但我已經用相同的結果出來了。
UPDATE
的滑塊JS代碼
//script.js
(function() {
var mySlider, cWrapper, ul, li;
var current = 0;
var timeOut = 3000;
var intervalHandler;
var automaticStart = true;
init();
function init() {
mySlider = document.querySelector(".my-slider");
cWrapper = document.querySelector(".my-slider > .content-wrapper");
ul = document.getElementById("slider-items-holder");
li = ul.querySelectorAll("li");
if (!mySlider || !cWrapper || !ul || !li.length)
return;
ul.style.width = cWrapper.offsetWidth * li.length;
ul.style.height = cWrapper.offsetHeight;
bindEvents();
startSlider();
}
function startSlider() {
if (automaticStart)
intervalHandler = setInterval(next, timeOut);
}
function next() {
if (current + 1 >= li.length) {
current = -1;
}
ul.style.marginLeft = '-' + (li[0].offsetWidth * ++current);
}
function prev() {
if (current - 1 < 0) {
current = li.length;
}
ul.style.marginLeft = '-' + (li[0].offsetWidth * --current);
}
function bindEvents() {
mySlider.addEventListener('mouseover', function() {
clearInterval(intervalHandler);
});
mySlider.addEventListener('mouseout', startSlider);
var prevBtn = document.querySelector(".my-slider > .control-btns a.prev");
var nextBtn = document.querySelector(".my-slider > .control-btns a.next");
if (prevBtn)
prevBtn.addEventListener('click', prev);
if (nextBtn)
nextBtn.addEventListener('click', next);
}
})();
哪個插件您使用的傳送帶/滑塊。它看起來像你的插件沒有正確初始化。當您的html添加到DOM時，您需要重新初始化它。 –
無插件。 JSS一個自制的JavaScript - ））讓我用js和css代碼更新我的問題。 – marmeladze
當你通過ajax加載你的html時，你需要調用你的插件的init（）函數。因爲您的插件僅適用於第一次調用init（）時在DOM中可用的元素。所以只需在添加新滑塊後再次調用init即可。 –