trick9191
/
wlyy2.0
atdalīts no Amoy2/wlyy2.0


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <title>分类管理</title>
    <link rel="stylesheet" href="../cross/css/cross.css" type="text/css" />
    <link rel="stylesheet" href="../cross/css/cross.ui.css" type="text/css" />
    <link rel="stylesheet" href="../css/health-edu.css" type="text/css" />
</head>
<body>
<div class="p20 w680">
	<div class="mb20">
		<a id="classifyAdd" href="javascript:;" class="c-btn c-btn-blue">新增分类</a>
		<a id="classifyEdit" href="javascript:;" class="c-btn c-btn-green ml10">编辑分类</a>
		<a id="classifySave" href="javascript:;" class="c-btn c-btn-blue ml10 fr">保存分类</a>
	</div>
	<ul class="custom-table" id="category">
<!-- 		<li class="table-th">
			<div class="table-key">一级分类</div>
			<div class="table-info">二级分类</div>
		</li>
		<li>
			<div class="table-key">
				<div class="item">
					<span class="tag">养生</span>
					<span class="tag-edit"><input type="text" value="养生"/><i class="icon icon-tagclose"></i></span>
				</div>
			</div>
			<div class="table-info">
				<div class="item">
					<span class="tag">节气养生</span>
					<span class="tag-edit"><input type="text" value="节气养生"/><i class="icon icon-tagclose"></i></span>
				</div>
				<div class="item">
					<span class="tag">延年益寿</span>
					<span class="tag-edit"><input type="text" value="延年益寿"/><i class="icon icon-tagclose"></i></span>
				</div>
			</div>
		</li>
		<li>
			<div class="table-key">
				<div class="item">
					<span class="tag">育儿</span>
					<span class="tag-edit"><input type="text" value="育儿"/><i class="icon icon-tagclose"></i></span>
				</div>
			</div>
			<div class="table-info">
				<div class="item">
					<span class="tag">婴儿养生</span>
					<span class="tag-edit"><input type="text" value="婴儿养生"/><i class="icon icon-tagclose"></i></span>
				</div>
				<div class="item">
					<span class="tag">幼儿早教</span>
					<span class="tag-edit"><input type="text" value="幼儿早教"/><i class="icon icon-tagclose"></i></span>
				</div>
			</div>
		</li> -->
	</ul>
</div>

<script type="text/javascript" src="../cross/js/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="../cross/js/cross.ui.js"></script>
<script type="text/javascript" src="../widget/placeholder/2.0.7/js/jquery.placeholder.js"></script>
<script type="text/javascript" src="../JkCategory/js/JkCategory.js"></script>
<script type="text/javascript">
	/* $(function(){
		//新增分类
 		var addHtm = '<div class="item has-input">'+
				'<input type="text" class="cus-input" placeholder="请输入分类"/><a href="javascript:;" class="c-btn c-btn-blue btn-save ml10">保存</a>'+
				'</div>';
		var cusTable = $('.custom-table');
		var cusLi = '<li class="addli">'+
						'<div class="table-key">'+
							'<div class="item has-input">'+
								'<input type="text" class="cus-input" placeholder="请输入分类"/><a href="javascript:;" class="c-btn c-btn-blue btn-save ml10">保存</a><p class="error c-hide">请先填写一级分类</p>'+
							'</div>'+
						'</div>'+
						'<div class="table-info">'+
							'<div class="item has-input">'+
								'<input type="text" class="cus-input" placeholder="请输入分类"/><a href="javascript:;" class="c-btn c-btn-blue btn-save ml10">保存</a>'+
							'</div>'+
						'</div>'+
					'</li>';
		$('#classifyAdd').click(function(){
			if(cusTable.hasClass('openadd')){return;}
			if(cusTable.hasClass('openedit')){
				cusTable.removeClass('openedit');
			}
			cusTable.addClass('openadd');
			cusTable.find('li').not('.table-th').find('.table-info').append(addHtm);
			cusTable.append(cusLi);
		});
		//input聚焦
		$(document).on('focus','.cus-input',function(){
			$(this).siblings('.btn-save').show();
			var infoObj = $(this).parents('.table-info');
			infoObj.siblings('.table-key').find('.error').hide();
			if(infoObj.siblings('.table-key').find('.has-input').length != 0){
				infoObj.find('input').attr('disabled','disabled');
				infoObj.siblings('.table-key').find('.error').show();
			}
		}).on('blur','.cus-input',function(){
			$(this).siblings('.btn-save').hide();
		});
		//保存新增分类
		$(document).on('mousedown','.btn-save',function(){
			var val = $(this).siblings('input').val();
			if(val == ''){return;}
			var item = '<div class="item"><span class="tag">'+ val +'</span>'+
						'<span class="tag-edit"><input type="text" value="'+val+'"/><i class="icon icon-tagclose"></i></span>'+'</div>';
			$(this).parents('li').removeClass('addli');
			if($(this).parent().parent().hasClass('table-key')){
				$(this).parent('.item').before(item);
				if($(this).parent('.item').hasClass('has-input')){
					$(this).parents('.table-key').siblings('.table-info').find('input').removeAttr('disabled');
				}
				$(this).parent('.item').remove();
				cusTable.append(cusLi);
				
			}else{
				$(this).parent('.item').before(item);
			}
			$(this).siblings('input').val('');
		});
 		//保存分类
		$('#classifySave').click(function(){
			if(cusTable.hasClass('openadd')){
				cusTable.find('.item.has-input').remove();
				cusTable.removeClass('openadd');
			}
			if(cusTable.find('.addli')){
				cusTable.find('.addli').remove();
			}
			if(cusTable.hasClass('openedit')){
				cusTable.find('.tag-edit').each(function(index,ele){
					var val = $(ele).find('input').val();
					$(ele).siblings('.tag').text(val);
				});
				cusTable.removeClass('openedit');
			}
		}); 
		//编辑分类
		$('#classifyEdit').click(function(){
			if(cusTable.hasClass('openadd')){
				cusTable.removeClass('openadd');
			}
			if(cusTable.find('.addli')){
				cusTable.find('.addli').remove();
			}
			if(cusTable.find('.has-input')){
				cusTable.find('.has-input').remove();
			}
			cusTable.addClass('openedit');
		});
		//删除标签
		$(document).on('click','.tag-edit .icon-tagclose',function(){
			var editItem = $(this).parent().parent();
			var info = editItem.parent();
			if(editItem.parent().hasClass('table-key')){
				editItem.parent().parent('li').remove();
			}else{
				editItem.remove();
				if(info.children().length == 0){
					info.parent('li').remove();
				}
			}
		});
	}); */
 	
</script>
</body>
</html>