jQuery后台框架搭建

最新推荐文章于 2022-05-13 23:27:18 发布

ItJavawfc

最新推荐文章于 2022-05-13 23:27:18 发布

阅读量1.6k

点赞数

文章标签： jQuery后台框架搭建

本文链接：https://blog.csdn.net/ItJavawfc/article/details/36696497

版权

界面UI效果：

coding：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>后台管理</title>
  <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
  <script type="text/javascript">
    $(function(){

     //----------------------------TOP开始-----------------------------------
	   $.extend({//扩展插件
	     init:function(){
		         $('#top').height(100)
				          .css('background-color','#c0c0c0')
				          .css('font','oblique 42px 黑体')
				          .css('color','blue')
				          .animate({'textIndent':'950px'})
				          .text('今天是个好日子');
                 $.showLeft();
		 },
		 showLeft:function (){
				$('#top').animate({'textIndent':'950px'},2500,$.showRight);
		},

		showRight:function(){
			$('#top').animate({'textIndent':'0px'},2500,$.showLeft);
		}
	   
	   });
	   $.init();

     //----------------------------TOP结束-----------------------------------

     //----------------------------LEFT开始-----------------------------------
      $('#left').width(150)
	            .height(600)
	            .css('border','1px solid #333')
                .css('background-color','#456')
				.css('color','#fff')
				.css('padding','15px 20px');
     

	  $('#left h3 +ul').css('display','none')//隐藏每个ul 
	                   .css('list-style-type','none')//去掉前面的圆点
					   .css('padding-left','15px')

 

      $('#left h3').hover(//鼠标滑动效果
	                   function(){
						   $(this).css('background-color','#c0c0c0');
					   },function(){
						   $(this).css('background-color','#456');
					   })
					 .click(function(){//鼠标点击则展现下级菜单
                         $(this).next()
						        .slideToggle(500);
					  });


     $('#left ul li').css('cursor','hand')
	                 .attr('title',function(i,v){
						  return '你'+$(this).text()+'么?';
					 });
     //----------------------------LEFT结束-----------------------------------

	 $('#right,#left').css('float','left')//形成框架

	});
  </script>
 </head>

 <body>
   <div id="top"></div>
   <div id="left">
<!-- ------------------------------- -->
    <h3>系统管理</h3>
    <ul>
		<li>密码修改</li>
		<li>新增用户</li>
		<li>修改资料</li>
		<li>修改角色</li>
	</ul>

<!-- ------------------------------- -->

 	<h3>订单管理</h3>
	<ul>
		<li><a href='tablelist.html' target='ggz'>订单列表</a></li>
		<li>修改订单</li>
		<li>新增订单</li>
		<li>删除订单</li>
	</ul>

<!-- ----------------------------------->
   </div>

   <div id="right">
     <iframe id='ggz' name='ggz' width='1000' height='600px'></iframe>
   </div>
 </body>
</html>