首页 > 代码库 > EasyUI布局实战

EasyUI布局实战

2024-08-02 09:56:26   228人阅读


           最近在忙着画原型图，学习的时间就更少了，但是可以尝试下提高效率。


            前几天，师姐让我做一个可以伸缩的侧边栏，当时觉得这不就是JS里面的那个Demo么，然后就去改原型图了，之后学了一点儿EasyUI,打开师姐给我的代码后，发现他们的页面是用EasyUI做的布局，这就比单纯的JS简单多了，以前要一大段代码，现在只需两行，搞定一个向上的侧边栏。


            

        



       

效果如下：



                   

                 




          之后，又找了个完整页面布局的Demo敲了下，感觉EasyUI真的好简单，又好用。下面给出Layout的全部代码：



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>layout</title>

	<script language="JavaScript" type="text/javascript" src=http://www.mamicode.com/"../jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset="utf-8"></script>  					        >

          
    布局完成之后，效果如下：

       
      
             



           在实际应用中，我们的页面当然不是这么简单的啦，但是don‘t worry,整体布局有了，我们还可以复用很多元件：

         




               看到这些，是不是感觉自己像贾琳师哥说的那样，终于进入了”青铜时代“~~~~

         在这个阶段，我们只需学会复用就行，等哪天这些框架不能再满足你的要求时，go and  make one~







EasyUI布局实战


联系
我们