|
|
<div id="main_2">
<div class="content_header">
ssss
</div>
<div class="content_box">
<div class="content_box_title">
商品列表
<a href="javascript:dialog(400,210,'<?PHP echo site_url(); ?>/main/add_pro/1');" class="btn">+ 增加</a>
</div>
<?PHP foreach($root_pat_pro as $list): ?>
<div class="content_box_list pro_list root_<?PHP echo $list->id; ?> range_0" alt="0" title="<?PHP echo $list->id; ?>" >
<a href="javascript:opList(<?PHP echo $list->id; ?>);" title="展开" alt="1" class="list_show_<?PHP echo $list->id; ?>"><img src="<?PHP echo base_url(); ?>images/pro_list_show.png" class="map_btn" /></a>
<a href="<?PHP echo site_url().'/fun/del_area/'.$list->id; ?>" title="区域坐标" ><img src="<?PHP echo base_url(); ?>images/map.png" class="map_btn" /></a>
<a href="javascript:dialog(400,210,'<?PHP echo site_url().'/main/add_pro/'.$list->id; ?>');" title="添加子商品"><img src="<?PHP echo base_url(); ?>images/add.png" class="add_btn" /></a>
<a href="<?PHP echo site_url().'/fun/del_pro/'.$list->id; ?>" title="删除" ><img src="<?PHP echo base_url(); ?>images/delete.png" class="del_btn" /></a>
<a href="javascript:dialog(400,210,'<?PHP echo site_url().'/main/add_pro/'.$list->pat.'/'.$list->id; ?>');"><?PHP echo $list->name; ?></a>
</div>
<?PHP endforeach; ?>
<div class="content_box_footer">
</div>
</div>
</div>
<script language="javascript">
<!--
var doArr = [];
var doArrLen = 0;
var doneArrlen = 0;
function opList(this_pat){
var level = $(".root_"+this_pat).attr('alt');
var this_list_show = $(".list_show_"+this_pat).attr('alt');
if(this_list_show == '0'){
$(".list_show_"+this_pat).attr('alt','1');
$(".list_show_"+this_pat+" img").attr('src','<?PHP echo base_url(); ?>images/pro_list_show.png');
var h_start = false;
jQuery(".pro_list").each(function(){
if(this_pat == parseInt($(this).attr('title'))){
h_start = true;
return true;
}
if(h_start == true && parseInt($(this).attr('alt')) > level){
$(this).remove();
return true;
}
if(h_start == true && parseInt($(this).attr('alt')) <= level){
h_start =false;
return false;
}
//.................
});
}else{
$(".list_show_"+this_pat).attr('alt','0');
$(".list_show_"+this_pat+" img").attr('src','<?PHP echo base_url(); ?>images/pro_list_hide.png');
loadSons(this_pat);
}
}
function loadSons(this_pat){
var range = parseInt($(".root_"+this_pat).attr('alt'));
range = range+1;
$.ajax({
type: "get",
dataType: "json",
url: "<?PHP echo site_url(); ?>/fun/get_sons/"+this_pat,
complete :function(){
if(doneArrlen < doArrLen){
loadSons(doArr[doneArrlen]);
doneArrlen++;
}
},
success: function(data){
if(data == '' || data == null){
}else{
var right_video_html = '';
var left_video_html = '';
var out_html = '';
$.each(data, function(i,val){ //each = foreach, i= $key, val = $value
out_html +='<div class="content_box_list pro_list root_'+val.id+' range_'+range+'" alt="'+(range)+'" title="'+val.id+'">';
out_html +='<a href="javascript:opList('+val.id+');" title="展开" alt="1" class="list_show_'+val.id+'"><img src="<?PHP echo base_url(); ?>images/pro_list_show.png" class="map_btn" /></a>';
out_html +='<a href="<?PHP echo site_url(); ?>/fun/del_area/'+val.id+'" title="区域坐标" ><img src="<?PHP echo base_url(); ?>images/map.png" class="map_btn" /></a>';
out_html +='<a href="javascript:dialog(400,210,\'<?PHP echo site_url(); ?>/main/add_pro/'+val.id+'\');" title="添加子商品"><img src="<?PHP echo base_url(); ?>images/add.png" class="add_btn" /></a>';
out_html +='<a href="<?PHP echo site_url(); ?>/fun/del_pro/'+val.id+'" title="删除" ><img src="<?PHP echo base_url(); ?>images/delete.png" class="del_btn" /></a>';
out_html +=' <a href="javascript:dialog(400,210,\'<?PHP echo site_url(); ?>/main/add_pro/'+val.pat+'/'+val.id+'\');">'+val.name+'</a>';
out_html +='</div>';
});
//\
}
$(".root_"+this_pat).after(out_html);
},
error:function(){
}
});
}
$(document).ready(function(){
<?PHP
if($pats != ''){
$pats_a = explode('|',$pats);
$x = 0;
$doarr = '[';
foreach($pats_a as $pats_l){
if($pats_l != '' && $pats_l != '1'){
if($x == 0){
$firstPat = $pats_l;
}else{
$doarr .= $pats_l.',';
}
$x++;
}
}
$doarr = substr($doarr, 0, -1).']';
if($doarr == ']'){
$doarr = '""';
}
echo '
doArr = '.$doarr.';
doArrLen = '.$x.';
doneArrlen = 0;
loadSons('.$firstPat.');
';
}
?>
});
//-->
</script>
</body>
</html>
css
*{
margin:0px;
padding:0px;
border:0 none;
text-decoration:none;
}
html,body{
font-size: 12px;
width:100%;
height:100%;
}
ul{
list-style:none;
}
.cls{
clear:both;
}
.left{
float:left;
}
.right{
float:right;
}
.input_text{
border:1px solid #aaa;
padding:3px;
color:#333;
}
.btn{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border:1px solid #426300;
padding:4px 8px;
background:#669900;
color:#fff;
cursor: pointer;
}
#dialog{
background:#fff;
}
#dialog_body{
padding:10px;
}
.del_btn,.add_btn,.map_btn{
vertical-align:middle;
width:20px;
}
.del_btn:hover{
background:red;
}
.add_btn:hover{
background:green;
}
.map_btn:hover{
background:orange;
}
#dialog_body table tr td{
border-bottom:1px solid #efefef;
padding:10px 0px;
}
.btn:hover{
background:#496e00;
}
#main_1{
overflow:hidden;
height:100%;
float:left;
background: #b0bec7;
width: 20%;
-webkit-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px;
box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px;
}
#main_2{
height:100%;
width:80%;
float:left;
background:#e6eaed;
white-space: nowrap;
word-break: keep-all;
}
#main_2 .content_header{
padding:12px 0px 12px 12px;
background:#e8e8e8;
font-size:14px;
font-weight:bold;
color:#444;
border:1px solid #aaa;
border-left:0 none;
border-right:0 none;
}
.content_box {
padding:15px;
}
.content_box .content_box_title{
background:#b2c1cb;
padding:20px 0px 10px 10px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
border-top-left-radius: 8px;
}
.content_box .content_box_footer{
background:#b2c1cb;
padding:3px;
border:1px solid #b2c1cb;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-bottom-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.content_box .content_box_list{
padding:10px;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}
.content_box .content_box_list a:hover{
text-decoration:underline;
}
.content_box .content_box_list:hover{
background:#fffad6;
}
.content_box .a0{
background:#fff;
}
.content_box .a1{
background:#f0f4f7;
}
.content_box .content_box_list a{
color:#0073C1;
}
.pro_list{
background:#fff;
border-bottom:1px dashed #aaa;
}
#dilog{
display:none;
background:url('../images/loading.gif') no-repeat center center #fff;
position:absolute;
border:10px solid #555;
-webkit-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px;
box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
top:50px;
}
#dilog_in{
position:relative;
}
#dilog .close_dialog{
position:absolute;
right:-40px;
top:-40px;
width:50px;
height:50px;
}
/* range class */
.range_1{padding-left:20px !important;}
.range_2{padding-left:40px !important;}
.range_3{padding-left:60px !important;}
.range_4{padding-left:80px !important;}
.range_5{padding-left:100px !important;}
.range_6{padding-left:120px !important;}
.range_7{padding-left:140px !important;}
.range_8{padding-left:160px !important;}
.range_9{padding-left:180px !important;}
.range_10{padding-left:200px !important;}
.range_11{padding-left:220px !important;}
.range_12{padding-left:240px !important;}
.range_13{padding-left:260px !important;}
.range_14{padding-left:280px !important;}
.range_15{padding-left:300px !important;}
.range_16{padding-left:320px !important;}
.range_17{padding-left:340px !important;}
.range_18{padding-left:360px !important;}
.range_19{padding-left:380px !important;}
.range_20{padding-left:400px !important;}
.range_21{padding-left:420px !important;}
.range_22{padding-left:440px !important;}
.range_23{padding-left:460px !important;}
.range_24{padding-left:480px !important;}
.range_25{padding-left:500px !important;}
.range_26{padding-left:520px !important;}
.range_27{padding-left:540px !important;}
.range_28{padding-left:560px !important;}
.range_29{padding-left:580px !important;}
.range_30{padding-left:600px !important;}
.range_31{padding-left:620px !important;}
.range_32{padding-left:640px !important;}
.range_33{padding-left:660px !important;}
.range_34{padding-left:680px !important;}
.range_35{padding-left:700px !important;}
.range_36{padding-left:720px !important;}
.range_37{padding-left:740px !important;}
.range_38{padding-left:760px !important;}
.range_39{padding-left:780px !important;}
.range_40{padding-left:800px !important;}
.range_41{padding-left:820px !important;}
.range_42{padding-left:840px !important;}
.range_43{padding-left:860px !important;}
.range_44{padding-left:880px !important;}
.range_45{padding-left:900px !important;}
.range_46{padding-left:920px !important;}
.range_47{padding-left:940px !important;}
.range_48{padding-left:960px !important;}
.range_49{padding-left:980px !important;}
.range_50{padding-left:1000px !important;} |
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-4-7 07:50:40
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡