系统后台自适应简单框架

<!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. htmlhomework2

    <!DOCTYPE html> register register username: password: birth: gender: male female

  2. day39-Spring 11-Spring的AOP：基于AspectJ的XML配置方式

    package cn.itcast.spring3.demo2; import org.aspectj.lang.ProceedingJoinPoint; /** * 切面类 * @author zh ...

  3. qbao

    # -*- coding: utf-8 -*- import Image, cStringIO, webbrowser, re, time, math import urllib, urllib2, ...

  4. TCPThree_C杯 Day1

    题解 或 正规题解 已经很详细,不再赘述. 跟着wjx打代码,不怕卡题. 忘开long long智障错误第四次左偏树

  5. MVC设计之从零打造到实际操作（总汇）

    我们为什么要自己搭建一个MVC架构的框架? 1.为了更快的开发效率 2.为了更高的运行效率 3.为了更好的证明自己 在别的框架中,有些方法我们使用起来可能会比较麻烦,我们可以在自己的框架中写一些自己想 ...

  6. docker-其它命令

    [root@iZ943kh74qgZ soft]# docker Usage: docker COMMAND A self-sufficient runtime for containers Opti ...

  7. TP3.2的URL重写省略index.php问题

    1. 在tp3框架的配置文件里,明确指定了路由的格式,这个配置位于thinkPHP文件夹下的conf文件夹里的convention.php中,修改以下字段 'URL_MODEL' => 2, # ...

  8. 十年磨一剑，王坚自研的MaxCompute如何解决世界级算力难题

    摘要: 2009年这项关于大数据的技术长征开始.王坚带队,目标是自研大数据计算平台MaxCompute统一阿里巴巴内部的数据和大数据计算体系. 大数据时代,随着企业数据规模的急剧增长,传统软件已无法承 ...

  9. js原生复习2.0

    // 1.闭包的作用// 实现共有变量,函数累加器的实现// 可以做缓存以及储存结构// 可以实现封装,实现属性私有化// 模块开发,防止全局污染// var name = 123;// var in ...

  10. python 字典推导式