我有以下脚本，我已经做了很长时间了：
<!doctype html>
<html>
<head>
<title>Shop List Demo</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.defaultPageTransition = 'none';
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript">
var dbSize = 5 * 1024 * 1024; // 5MB
var db = openDatabase("Oscommerce", "1.0", "Oscommerce Database", dbSize);
var categories={};
var list_str = '';
db.transaction(function (tx) {
tx.executeSql('SELECT c.categories_id, c.categories_image, c.parent_id, cd.categories_name, COUNT(p2c.categories_id) AS total FROM categories c INNER JOIN categories_description cd ON c.categories_id = cd.categories_id LEFT JOIN products_to_categories p2c ON p2c.categories_id = c.categories_id GROUP BY c.categories_id, cd.categories_name ORDER BY c.sort_order, cd.categories_name', [], function (tx, results) {
list_str += '<ul data-role="listview" data-inset="true" data-theme="d" data-count-theme="a" data-split-theme="a">';
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
var r = results.rows.item(i);
categories[r.categories_id] = r;
//console.log(categories);
//console.log(r.categories_id+'-'+r.parent_id);
}
for(key in categories)
{
var parent = 0;
var value=categories[key];
catId = value['categories_id'];
catName = value['categories_name'];
catImage = value['categories_image'];
parentId = value['parent_id'];
total = value['total'];
if (parentId == parent)
{
if (total == 0){
list_str += '<li id="'+ catId +'"><a class="parentlink" parentid="'+ parentId +'" catid="'+ catId +'" catname="'+ catName +'"><h3>' + catName + '</h3><p>' + catImage + '</p><div class="ui-li-count">'+ total +' products</div></a><a class="parentlink" parentid="'+ parentId +'" catid="'+ catId +'" catname="'+ catName +'">somelink</a></li>';
}else{
list_str += '<li id="'+ catId +'"><a class="productlink" parentid="'+ parentId +'" catid="'+ catId +'" catname="'+ catName +'"><h3>' + catName + '</h3><p>' + catImage + '</p><div class="ui-li-count">'+ total +' products</div></a><a class="parentlink" parentid="'+ parentId +'" catid="'+ catId +'" catname="'+ catName +'">somelink</a></li>';
}
}
}
list_str += '</ul>';
$('#parents').html(list_str).find('ul').listview();
});
});
/////////////////////////////////////
//call subcategories
/////////////////////////////////////
$('.parentlink').live('click', function() {
var cat_str = '';
var childcategories={};
var childId = $(this).attr("catid");
var parentcatname = $(this).attr("catname");
db.transaction(function (tx) {
tx.executeSql('SELECT c.categories_id, c.categories_image, c.parent_id, cd.categories_name, COUNT(p2c.categories_id) AS total FROM categories c INNER JOIN categories_description cd ON c.categories_id = cd.categories_id LEFT JOIN products_to_categories p2c ON p2c.categories_id = c.categories_id WHERE c.parent_id="'+ childId +'" GROUP BY c.categories_id, cd.categories_name ORDER BY c.sort_order, cd.categories_name', [], function (tx, results) {
//tx.executeSql('SELECT * FROM categories c,categories_description cd WHERE c.parent_id="'+ childId +'" AND c.categories_id = cd.categories_id ORDER BY sort_order, cd.categories_name', [], function (tx, results) {
cat_str += '<ul data-role="listview" data-inset="true" data-theme="d" data-count-theme="a" data-split-theme="a">';
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
var r = results.rows.item(i);
childcategories[r.categories_id] = r;
}
for(key in childcategories)
{
var value=childcategories[key];
childId = value['categories_id'];
childName = value['categories_name'];
childImage = value['categories_image'];
parentId = value['parent_id'];
childtotal = value['total'];
if (childtotal == 0){
cat_str += '<li id="'+ childId +'"><a class="parentlink" parentid="'+ parentId +'" catid="'+ childId +'" catname="'+ childName +'"><h3>' + childName + '</h3><p>' + childImage + '</p><div class="ui-li-count">'+ childtotal +' products</div></a><a class="parentlink" parentid="'+ parentId +'" catid="'+ childId +'" catname="'+ childName +'">somelink</a></li>';
}else{
cat_str += '<li id="'+ childId +'"><a class="productlink" parentid="'+ parentId +'" catid="'+ childId +'" catname="'+ childName +'"><h3>' + childName + '</h3><p>' + childImage + '</p><div class="ui-li-count">'+ childtotal +' products</div></a><a class="parentlink" parentid="'+ parentId +'" catid="'+ childId +'" catname="'+ childName +'">somelink</a></li>';
}
}
cat_str += '</ul>';
var newPage = $('<div data-role="page" data-url="' + parentcatname + '"><div data-role="header"><h1>' + parentcatname + '</h1></div><div data-role="content">'+ cat_str +'<div id="productlist"></div></div></div>');
newPage.appendTo( $.mobile.pageContainer );
//append it to the page container
$.mobile.changePage(newPage);
});
});
});
//if a categorie is clicked what contains products
//load it's containing products list
//refered from <a class="productlink"....
$('.productlink').live('click', function() {
var catid = $(this).attr("catid");
var catname = $(this).attr("catname");
var parentid = $(this).attr("parentid");
var html_str='';
db.transaction(function (tx) {
tx.executeSql('select count(*) as total from products_to_categories where categories_id = "'+ catid +'"', [], function (tx, results) {
total = results.rows.item(0)['total'];
if (total > 0){
html_str += '<ul data-role="listview" data-inset="true" data-theme="d">';
tx.executeSql('SELECT p.products_model, pd.products_name, p.products_quantity, p.products_weight, p.products_image, p.products_id, p.products_price, p.products_tax_class_id, CASE WHEN s.status <> 0 AND s.status IS NOT NULL THEN s.specials_new_products_price ELSE NULL END AS specials_new_products_price,CASE WHEN s.status <> 0 AND s.status IS NOT NULL THEN s.specials_new_products_price ELSE p.products_price END AS final_price FROM products_description pd, products p LEFT JOIN specials s ON p.products_id = s.products_id, products_to_categories p2c WHERE p.products_status = "1" AND p.products_id = p2c.products_id AND pd.products_id = p2c.products_id AND pd.language_id = "1" AND p2c.categories_id = "'+ catid +'"', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
var r = results.rows.item(i);
var prodID = r.products_id;
var prodName = r.products_name;
var prodDes = r.products_description
var prodPrice = r.products_price;
html_str += '<li><a class="attributes" productid="'+ prodID +'"><h3>'+ prodName +'</h3></a><div id="prodAttributes_'+ prodID +'"></div></li>';
}
html_str += '</ul>';
var newPage = $('<div data-role="page" data-url="productList'+ catid +'"><div data-role="header"><h1>'+ catname +'</h1></div><div data-role="content">'+ html_str +'</div></div');
newPage.appendTo( $.mobile.pageContainer );
//append it to the page container
$.mobile.changePage(newPage);
});
}else{
if (parentid > 0){
var newPage = $('<div data-role="page" data-url="productList'+ catid +'"><div data-role="header"><h1>'+ catname +'</h1></div><div data-role="content">no products for this categorie</div></div');
newPage.appendTo( $.mobile.pageContainer );
//append it to the page container
$.mobile.changePage(newPage);
}
}
});
});
});
//if the product list is loaded
//generate its attributes if it contains them
//refered from <a class="attributes"
$('.attributes').live('click', function(event) {
var prodID = $(this).attr("productid");
//alert('you clicked: ' + prodID);
var productAtt_str = '';
db.transaction(function (tx) {
tx.executeSql('select count(*) as total from products_options popt, products_attributes patrib where patrib.products_id="'+ prodID +'" and patrib.options_id = popt.products_options_id and popt.language_id ="1"', [], function (tx, results) {
total = results.rows.item(0)['total'];
if (total > 0){
productAtt_str += '<div><p>Products Otions ('+ total +'):</p></div>'; //WORKS
tx.executeSql('SELECT popt.products_options_id, popt.products_options_name,pov.products_options_values_id, pov.products_options_values_name, patrib.options_values_price, patrib.price_prefix FROM products_options popt, products_attributes patrib, products_options_values pov WHERE patrib.products_id="'+ prodID +'" AND patrib.options_id = popt.products_options_id AND patrib.options_values_id = pov.products_options_values_id AND popt.language_id = "1" ORDER BY popt.products_options_name;', [], function (tx, results) {
var len = results.rows.length, i;
var products_options_array={};
for (i = 0; i < len; i++) {
var r = results.rows.item(i);
products_options_array[r.products_options_values_id] = r;
}
for(key in products_options_array)
{
var value=products_options_array[key];
prodOpId = value['products_options_id'];
prodOpName = value['products_options_name'];
prodOpValueId = value['products_options_values_id'];
prodOpValueName = value['products_options_values_name'];
var arr = [
{
prodOpId: prodOpName,
prodOpValueId: prodOpValueName}
];
for (var i = 0; i < arr.length; i++) {
var r = arr[i];
var name = r.prodOpId;
var val = r.prodOpValueId;
if ($("#prodAttributes_"+prodID+" select").is("[name*=" + name + "]")) {
var select = $("#prodAttributes_"+prodID).find("select[name*=" + name + "]");
var option = $("<option></option>");
option.val(val);
option.text(val);
select.append(option);
} else {
var select = $("<select></select>");
select.attr("name", name);
select.attr("id", name);
var option = $("<option></option>");
option.val(val);
option.text(val);
select.append(option);
var label = $("<label></label>");
label.attr("for", name);
label.attr("class", "select");
label.text(name);
var div = $("<div></div>");
div.attr("data-role", "fieldcontain");
div.append(label).append(select);
$(div).appendTo("#prodAttributes_"+prodID);
}
}
}
});
}
});
});
});
</script>
</head>
<body>
<!-- /1st page start -->
<div data-role="page">
<div data-role="header">
<h1>categorie information</h1>
</div><!-- /header -->
<div id="content" data-role="content">
<div id="parents"></div>
</div><!-- /content -->
<div data-role="footer" >
<div data-role="navbar">
<ul>
<li><a href="db.html" data-ajax="false" data-icon="grid" data-iconpos="top">Load database</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<!-- /1st page end -->
</body>
</html>
到目前为止，我有一个工作示例here。 仅支持Chrome浏览器支持 webDB 的浏览器。
当我浏览产品时会出现问题，例如：硬件→图形卡→Matrox G200 MMS并单击产品名称。 它显示了产品的属性。 这适用于第一次单击（对于包含属性的所有产品）。 但是，如果我通过脚本的后退按钮或浏览器进行浏览，然后再次重新访问该产品，则脚本无法再次打开属性。
我尝试使用对话框;这也没用。然后我尝试将其作为一个函数执行，这也没有成功。 我假设我可以坚持使用类属性并从那里解决。