系统后台自适应简单框架

<!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. AtCoder Beginner Contest 079 D - Wall【Warshall Floyd algorithm】

    AtCoder Beginner Contest 079 D - Wall Warshall Floyd 最短路....先枚举 k #include<iostream> #include& ...

  2. iOS 警告收录及科学快速的消除方法

    http://www.cocoachina.com/ios/20150914/13287.html 作者:董铂然 授权本站转载. 前言:现在你维护的项目有多少警告?看着几百条警告觉得心里烦么?你真的觉 ...

  3. 2019-7-4-win10-uwp-处理用户点击关闭按钮

    title author date CreateTime categories win10 uwp 处理用户点击关闭按钮 lindexi 2019-07-04 09:28:57 +0800 2019- ...

  4. BZOJ 4034 洛谷3178 树上操作题解

    一个很裸的树链剖分模板.注意一下数据范围,有的地方要开longlong,这就是唯一的陷阱了. # include<iostream> # include<cstdio> # i ...

  5. 用div漂浮快实现与表单无关的多文件上传功能。

    我项目有这个需求,多文件上传,而且要及时显示到表单上,这样的话就不能与表单相关. 由于我对前端不熟,我就实现了这么一个功能,通过button触发一个div漂浮块,然后多文件上传,之后通过js把文件名显 ...

  6. 2019-9-18-WPF-笔刷绑定不上可能的原因

    title author date CreateTime categories WPF 笔刷绑定不上可能的原因 lindexi 2019-09-18 09:46:14 +0800 2019-9-18 ...

  7. QT 获取系统时间

    1.导入QTime #include <QTime> 2.定义QTime 对象接受当前时间 QTime t=QTime::currentTime(); t就是系统时间. 3.将t转化为st ...

  8. 阿里云亮相2019联通合作伙伴大会，边缘计算等3款云产品助力5G时代产业数字化转型

    4月23日,2019中国联通合作伙伴大会在上海正式开幕,本次大会以“合作不设限,共筑新生态”为主题,涉及5G.边缘计算.云计算.物联网.新媒体.人工智能.互联网化等各领域超过600家合作伙伴与3万名各 ...

  9. @atcoder - AGC035D@ Add and Remove

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 N 张排成一行的卡片,第 i 张卡片上面写着 Ai. 重复 ...

  10. LeetCode80 Remove Duplicates from Sorted Array II

    题目: Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? (Mediu ...