オンラインストアでサイトを作成しました。製品にはさまざまなカテゴリがあります。jQuery タブを使用してこれらのカテゴリを表示しています。各カテゴリ タブには、そのカテゴリの製品が一覧表示されます。jQueryを使用してカテゴリタブとコンテンツを動的に作成しています。また、jQuery NailThumb を使用してその場でサムネイルを生成しています。URL は次のとおりです。
http://www.thekclonghorns.com/TeamStore/Store.aspx
ページは、IE8 と IE9 を除くすべてのブラウザーで適切に表示されます。すべてのタブを循環した後、IE8 と IE9 で問題なく表示されます。
ストアを表示するコードは次のとおりです。これが IE で正しくレンダリングされない理由はありますか?
ありがとう！
$(document).ready(function () {
setupPage();
});
function setupPage() {
showProgress();
clearProducts();
setupCategories();
}
function setupCategories() {
loadingCount++;
GetCategories([], true,
{
successCallback: function (data) {
if ((data) && (data != null) && (data.length > 0)) {
setupProducts(data);
}
data = null;
},
errorCallback: function (httpRequest, status, error, functionName) {
httpRequest = null;
status = null;
error = null;
functionName = null;
},
completeCallback: function () {
loadingCount--;
checkLoading();
}
});
}
function setupProducts(categories) {
GetProducts([], true,
{
successCallback: function (data) {
if ((data) && (data != null) && (data.length > 0)) {
buildCategoryDisplay(categories, data);
}
data = null;
},
errorCallback: function (httpRequest, status, error, functionName) {
httpRequest = null;
status = null;
error = null;
functionName = null;
},
completeCallback: function () {
loadingCount--;
checkLoading();
}
});
}
function buildCategoryDisplay(categories, products) {
var content = [];
var category;
var product;
var totalCols = 4;
var limit = 0;
content.push("<div id=\"tabs\">");
content.push("<ul>");
for (var i = 0; i < categories.length; i++) {
category = categories[i];
if (category.IsActive) {
content.push("<li><a href=\"#tabs-" + category.Id + "\">" + category.Name + "</a></li>");
}
}
content.push("</ul>");
for (var i = 0; i < categories.length; i++) {
category = categories[i];
if (category.IsActive) {
content.push("<div id=\"tabs-" + category.Id + "\">");
content.push("<h4>" + category.Name + "</h4>");
//get the list of products for this category and display them with links to details page
if (products != null && products.length > 0) {
content.push("<table cellspacing=\"0\" cellpadding=\"0\" rules=\"none\" border=\"0\" class=\"modal_page_form\" style=\"width: 540px; margin: 4px;border-collapse: collapse; margin-bottom: 0px;\">");
content.push("<tr>");
for (var j = 0; j < products.length; j++) {
product = products[j];
if (product.Category.Name == category.Name) {
limit = limit + 1;
content.push("<td><a href=" + pageLocation + "TeamStore/StoreProductDetails.aspx?ProductId=" + product.Id + ">");
if (product.HasPhotos) {
content.push("<div class=\"nailthumb-container\" href=" + pageLocation + "Uploads/" + product.Photos[0].ImagePath.replace(/ /gi, "%20") + "><img src=" + pageLocation + "Uploads/" + product.Photos[0].ImagePath.replace(/ /gi, "%20") + "></img></div>");
}
else {
content.push("<div class=\"nailthumb-container\" href=" + pageLocation + "Uploads/no-img.jpg><img src=" + pageLocation + "Uploads/no-img.jpg></img></div>");
}
content.push("<br/><br/><p>" + product.Title + "<br/>$" + product.Cost + "</p>");
content.push("</a></td>");
if (limit == totalCols) {
content.push("</tr><tr>");
limit = 0; //reset limit
}
}
}
limit = 0;
content.push("</tr></table>");
}
content.push("</div>");
}
}
content.push("</div>");
$("#productsContainer").replaceHtml(content.join(""));
$("#productsContainer").show();
$(".nailthumb-container").nailthumb({ width: 100, height: 100, fitDirection: 'top left' });
$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
content = null;
category = null;
product = null;
totalCols = null;
limit = null;
}
function clearProducts() {
$("#productsContainer").replaceHtml("").hide();
}