cascading-menu
Version:
a cascading menu
182 lines (171 loc) • 9.79 kB
JavaScript
/**
* Created by zhangmk on 2017/1/9.
*/
(function( $ ) {
$.fn.myPlugin = function() {
var cars = [
{id: "10", text: "奥迪", firstAlph: "A"},
{id: "12", text: "奥克斯", firstAlph: "A"},
{id: "13", text: "阿尔特", firstAlph: "A"},
{id: "14", text: "本田", firstAlph: "B"},
{id: "15", text: "奔驰", firstAlph: "B"},
{id: "16", text: "别克", firstAlph: "B"},
{id: "17", text: "宝马", firstAlph: "B"},
{id: "18", text: "长城", firstAlph: "C"},
{id: "19", text: "昌河", firstAlph: "C"},
{id: "20", text: "大众", firstAlph: "D"},
{id: "21", text: "东南", firstAlph: "D"},
{id: "22", text: "法拉利", firstAlph: "F"},
{id: "23", text: "福田", firstAlph: "F"},
{id: "25", text: "中华", firstAlph: "Z"},
{id: "26", text: "中华", firstAlph: "Z"},
{id: "27", text: "中华", firstAlph: "Z"},
{id: "28", text: "中华", firstAlph: "Z"},
{id: "29", text: "中华", firstAlph: "Z"},
{id: "30", text: "中华", firstAlph: "Z"},
{id: "31", text: "中华", firstAlph: "Z"},
{id: "32", text: "中华", firstAlph: "Z"},
{id: "33", text: "中华", firstAlph: "Z"},
{id: "34", text: "中华", firstAlph: "Z"}
];
var cars_type = {
"10": [
{pid: "10",id: "101", text: "一汽奥迪"},
{pid: "101", id: "10000", text: "A3", isfinish: false},
{pid: "101", id: "10002", text: "A4L", isfinish: false},
{pid: "101", id: "10003", text: "A6L", isfinish: false},
{pid: "101", id: "10004", text: "Q3", isfinish: false},
{pid: "101", id: "10005", text: "Q5", isfinish: false},
{pid: "101", id: "10006", text: "A4", isfinish: false},
{pid: "101", id: "10007", text: "100", isfinish: true},
{pid: "10", id: "102", text: "进口奥迪"},
{pid: "102", id: "10008", text: "A3", isfinish: false},
{pid: "102", id: "10009", text: "A4L", isfinish: false},
{pid: "102", id: "100010", text: "A6L", isfinish: false},
{pid: "102", id: "100011", text: "Q3", isfinish: false},
{pid: "102", id: "100012", text: "Q5", isfinish: false},
{pid: "102", id: "100013", text: "A4", isfinish: false},
{pid: "102", id: "100014", text: "100", isfinish: true}
],
"12": [
{pid: "12",id: "121", text: "奥克斯"},
{pid: "121", id: "100015", text: "A3", isfinish: false},
{pid: "121", id: "100016", text: "A4L", isfinish: false},
{pid: "121", id: "100017", text: "A6L", isfinish: false},
{pid: "121", id: "100018", text: "Q3", isfinish: false},
{pid: "121", id: "100019", text: "Q5", isfinish: false},
{pid: "121", id: "100020", text: "A4", isfinish: false},
{pid: "121", id: "100021", text: "100", isfinish: true}
],
"13": [
{pid: "13",id: "131", text: "进口阿尔特"},
{pid: "131", id: "100022", text: "A3", isfinish: false}
],
"14": [
{pid: "14",id: "141", text: "东风本田"},
{pid: "141", id: "100023", text: "艾力绅", isfinish: false},
{pid: "141", id: "100024", text: "CR-v", isfinish: false},
{pid: "141", id: "100025", text: "哥瑞", isfinish: false},
{pid: "141", id: "100026", text: "Q3", isfinish: false},
{pid: "141", id: "100027", text: "Q5", isfinish: false},
{pid: "141", id: "100028", text: "A4", isfinish: false},
{pid: "141", id: "100029", text: "100", isfinish: true},
{pid: "14",id: "142", text: "东风本田"},
{pid: "142", id: "100023", text: "奥格赛", isfinish: false},
{pid: "142", id: "100024", text: "飞度", isfinish: false},
{pid: "142", id: "100025", text: "风范", isfinish: false},
{pid: "142", id: "100026", text: "Q3", isfinish: false},
{pid: "142", id: "100027", text: "Q5", isfinish: false},
{pid: "142", id: "100028", text: "A4", isfinish: false},
{pid: "142", id: "100029", text: "100", isfinish: true}
]
};
var jump_height = {};
var carspObj = {};
var html = '<div class="search_text"> <form id="sug_form"> <div class="bor"> <em></em> <input id="sug_txtkeyword" type="text" class="select_t" name="wd" maxlength="20"/> <input type="button" id="sug_submit" value="搜索" class="input_orange"/> <div class="brand_bg" id="master-index" style="display: none;"> </div> <div class="brand_bg models_bg " id="serial-index" style="display: none;"> </div> </div> </form> </div>';
var letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
$('#search_box').append(html);
$('#sug_txtkeyword').click(function () {
render_master_index(letters, cars);
});
for(var i = 0; i < cars.length; i++){
carspObj[cars[i].id] = cars[i].text;
}
// console.log(carspObj);
function render_master_index(letters, data) {
$('#master-index').css('display', 'block');
// $('#master-index').css('display', 'block');
var count = 0;
var master_letter = '<div class="brand_letters" id="master-index_letters">';
var brand_name_bg = '<div class="brand_name_bg"><div class="brand_name" id="master-index_list">';
for(var i = 0; i < letters.length; i++){
console.log(letters[i])
master_letter += '<span data-char="' + letters[i] + '"><a href="javascript:;">' + letters[i] + '</a></span>';
if (i == letters.length - 1){
master_letter += '</div>';
}
}
for(var m = 0; m < cars.length; m++){
if (m == 0 || (m != 0 && cars[m].firstAlph != cars[m-1].firstAlph)){
jump_height[cars[m].firstAlph] = count*24;
brand_name_bg += '<dl><dd><a href="javascript:;" data-id="' + cars[m].id + '">' + cars[m].firstAlph + ' ' + cars[m].text + '</a></dd>';
count++;
}else if(m != 0 && cars[m].firstAlph == cars[m-1].firstAlph){
brand_name_bg += '<dd><a href="javascript:;" data-id="' + cars[m].id + '">' + cars[m].firstAlph + ' ' + cars[m].text + '</a></dd>';
count ++;
if(cars[m].firstAlph != cars[m-1].firstAlph){
brand_name_bg += '</dl>';
}
}
if (m == cars.length-1){
jump_height[cars[m].firstAlph] = count*24;
brand_name_bg += '</div></div></div>';
}
}
$('#master-index').append(master_letter);
$('#master-index').append(brand_name_bg);
// console.log(jump_height['A']);
alphEvent(jump_height);
listEvent(cars_type);
}
function alphEvent(jump_height) {
var master_index_letters = $('#master-index_letters span');
master_index_letters.each(function () {
$(this).click(function () {
var data_char = $(this).data('char');
console.log(jump_height[data_char]);
$('#master-index_list').scrollTop(jump_height[data_char])
console.log($('#master-index_list').scrollTop())
})
})
}
function listEvent(cars_type) {
$('#master-index_list dd a').each(function () {
$(this).click(function () {
$('#serial-index').css('display', 'block');
$('#serial-index').empty();
var pid = $(this).data("id");
var type = cars_type[pid];
console.log(type);
var serial_index = '<h6><a data-id = "' + pid + '" href="javascript:;" title="' + carspObj[pid] + '">全部车型</a></h6><div class="models_detail_bg"><div class="models_detail" id="serial-index_list">';
for(var i = 0; i < type.length; i++){
var dl = '<dl>';
serial_index += dl;
if (type[i].pid == pid){
var first = type[i].text;
var dt = '<dt><a data-id = "' + type[i].id + '" href="javascript:;" title="' + first +'">' + type[i].text + '</a></dt>';
serial_index += dt;
}else {
var dd = '<dd><a data-id = "' + type[i].id + '" href="javascript:;">' + type[i].text + '</a></dd>';
serial_index += dd;
}
if(i == type.length-1){
serial_index += '</div></div>';
}
}
$('#serial-index').append(serial_index);
})
})
}
};
})( jQuery );