系统后台自适应简单框架

<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>系统后台自适应简单框架</title>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<style type="text/css">

    html { *background-image:url(about:blank); *background-attachment:fixed;border: none; margin: 0px; padding: 0px;}

    body{ font-size: 12px; width: 100%;margin: 0px; padding: 0px;}

    /*清除浮动 S*/

    .clearfix { #zoom:1; }

    .clearfix:after { content:'.'; height:0; line-height:0; display:block; clear:both; visibility:hidden; }

    /*清除浮动 E*/

    #header{ width: 100%; min-height: 100px; background:  #ececec; background-color: #ececec;}

    #center{ width: 100%;min-height: 300px; position: relative; margin: 10px auto; }

    #center .leftCom{ width: 200px;  position: absolute; left: 0; border: 1px solid #ddd; border-left: 0 none; min-height: 300px; z-index: 1;}

    #center .leftColseOpen{ position: absolute;z-index: 2;cursor: pointer;}

    #center .rightCom{ width: 100%;position: absolute;border: 1px solid #f00;right: 10px; min-height: 300px; }

    #footer{ width: 100%;min-height: 50px;background-color: #f60; position: fixed; bottom: 0;}

</style>

</head>

<body>

<div id="header"></div>

<div id="center" class="clearfix">

    <div class="leftCom"></div>

    <div class="leftColseOpen">关闭</div>

    <div class="rightCom"></div>

</div>

<div id="footer"></div>

<script type="text/javascript">

    var main=(function(){

        function windFun(){

            var widH=$(window).height(),

            headH=$("#header").height(),

            footH=$("#footer").height(),

            mainH=widH-headH-footH-20,

            widW=$(window).width(),

            leftW=$(".leftCom").width(),

            mainW=widW-leftW-30;

            $(".leftCom,.rightCom").css("height",mainH);

            $(".rightCom").css({"width":mainW,"left":leftW+10});

            $(".leftColseOpen").css({"top":mainH/2,"left":leftW});

        }

        function colseOpenClick(){

            $(".leftColseOpen").toggle(function(){

                $(".leftCom").css({"display":"none","width":0});

                $(this).text("打开");

                windFun();

            },function(){

                $(".leftCom").css({"display":"block","width":200});

                $(this).text("关闭");

                windFun();

            })

        }

        return{

            windFunm:function(){windFun();},

            colseOpenClickn:function(){colseOpenClick();}

        }

    })();

    $(function(){

        main.windFunm();

        $(window).resize(function(){

            main.windFunm();

        })

        main.colseOpenClickn();

    })

</script>

</body>

</html>

jquery超级简单的后台系统自适应框架的更多相关文章

  1. 中小后台系统UI框架--EasyUI

    后台开发人员不擅长前端UI界面,而小型软件公司没有专职美工岗位,开发人员只能借助开源UI框架,复用已有组件,完成用户操作界面.EasyUI是基于jQuery的UI插件集合体,可帮助开发者轻松构建网页. ...

  2. 使用Axure设计中，大型的后台系统原型总结

    使用Axure设计中,大型的后台系统原型总结 2018年4月16日luodonggan 在产品原型设计中,经常会涉及到后台系统原型的设计,如何设计出更规范标准的后台系统原型,是很多产品同行们都会遇到的 ...

  3. 【JQuery Easy UI】后台管理系统的简单布局分享

    重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...

  4. 基于ThinkPHP框架的简单的后台管理系统

    版权声明:本文为博主原创文章,未经博主允许不得转载. 基于ThinkPHP框架的简单的后台管理系统 一个简单的后台管理系统,可能还不全面,可以自己改,有登录功能 实例如图:    

  5. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  6. 简单的.NET后台定时服务框架

    后台服务只要是有一定经验的开发人员都接触过,其中离不开服务创建,调度逻辑处理,业务逻辑编写等环节.往往我们在新建一个后台服务项目的时候都会去拷贝以前的代码,再写一些线程等方式去完成,然后又去处理服务的 ...

  7. HTML入门（三）后台系统显示页面_框架标签

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 超级简单的jQuery纯手写五星评分效果

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  9. Koa2+MySQL+VUE+ElementIUI搭建简单的后台管理小系统

    如题,前端入坑许久,还是写个小东西出来吧 想要搭建自己的一个后台管理,实现简单的增删改查,看起来很简单 其实是真的简单,没有想的那么难,我也就写了一个月吧, 当然是假的,其实也就每天一两个小时,花了大 ...

随机推荐

  1. Leetcode728.Self Dividing Numbers自除数

    自除数 是指可以被它包含的每一位数除尽的数. 例如,128 是一个自除数,因为 128 % 1 == 0,128 % 2 == 0,128 % 8 == 0. 还有,自除数不允许包含 0 . 给定上边 ...

  2. Notepad++搜索中的正则应用

    假设要查找文件中所有tppabs="*****" 类型的代码 tppabs="http://www.******.com/templates/Alen/Css/Main. ...

  3. 【Leetcode堆】数据流中的第K大元素（703）

    题目 设计一个找到数据流中第K大元素的类(class).注意是排序后的第K大元素,不是第K个不同的元素. 你的 KthLargest 类需要一个同时接收整数 k 和整数数组nums 的构造器,它包含数 ...

  4. 2017 ACM-ICPC 亚洲区(南宁赛区)网络赛 M. Frequent Subsets Problem【状态压缩】

    2017 ACM-ICPC 亚洲区(南宁赛区)网络赛  M. Frequent Subsets Problem 题意:给定N和α还有M个U={1,2,3,...N}的子集,求子集X个数,X满足:X是U ...

  5. mybatis分页插件pageHelper简单实用

    工作的框架spring springmvc mybatis3 首先使用分页插件必须先引入maven依赖,在pom.xml中添加如下 <!-- 分页助手 --> <dependency ...

  6. React Native中pointerEvent属性

    在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件.这是因为绝对定位只是说这个组件的位置由它父组件的边框决定. 绝对定位的组件可以被认 ...

  7. BCompare 4 key SN 亲测可用

    支持BCompare 4.2.3 32位,亲测可用 w4G-in5u3SH75RoB3VZIX8htiZgw4ELilwvPcHAIQWfwfXv5n0IHDp5hv 1BM3+H1XygMtiE0- ...

  8. iptables 过滤条件(Matches)

    iptables可让你设置多种过滤条件,但是某些条件需要核心有提供相关功能才行.Iptables本身內建一般性的Internet Protocol (IP) 过滤条件,也就是說,即时沒载入任何扩充模组 ...

  9. phpstudy一直使用php5.6版本一直“”“报错应用程序无法正常启动0xc000007b”，亲测可行

    http://www.php.cn/xiazai/gongju/1351 vc9和vc11-vc14运行库 2018-01-26 来源/作者:php中文网 «» 下载次数:7808 工具简介: php ...

  10. X-WAF 安装配置指南

    X-WAF 是一款方便易用的云WAF,使用反向代理的方式介入Web服务器和访问者之间,不需要像 modSecurity 和 Naxsin 那样作为nginx的模块,需要进行编译安装 X-WAF使用 O ...