系统后台自适应简单框架

<!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. JMeter与LoadRunner的对比

    1. 界面.安装.协议支持.函数库.成本.开源 2. 都可以实现分布式负载,相对来说LoadRunner更强大一些 3. 都支持在windows和linux环境的负载生成器.控制台方面,Jmeter跨 ...

  2. 使用Data Lake Analytics从OSS清洗数据到AnalyticDB

    前提 必须是同一阿里云region的Data Lake Analytics(DLA)到AnalyticDB的才能进行清洗操作: 开通并初始化了该region的DLA服务: 开通并购买了Analytic ...

  3. JavaScript--模拟百度搜索下拉li

    上效果: 主要思路: 函数indexOf() .join().innerHTML的使用,还有 用完的数组要清空 <!DOCTYPE html> <html> <head ...

  4. C#中的字段，常量，属性与方法

    以前是学C++的,初次学微软的C#头都大了.什么字段,常量,属性,方法......微软把别人的东西拿来糅合在C#里,弄成了一个“大杂烩”.其实,说到底,“字段”不就是“变量”吗,所谓的“方法”不就是“ ...

  5. Django框架登录验证及产生随机验证码的实例

    1:views视图代码 # 登录验证 def login(request): # 使用ajax请求可以使用判断 # if request.is_ajax(): if request.method == ...

  6. SGU 107 987654321 problem【找规律】

    题目链接: http://acm.sgu.ru/problem.php?contest=0&problem=107 题意: 平方后几位为987654321的n位数有多少个 分析: 虽然说是水题 ...

  7. iOS如何才能在招聘中表现得靠谱？

    http://www.cocoachina.com/programmer/20150707/12414.html 近一年内陆续面试了不少人了,从面试者到面试官的转变让我对 iOS 招聘有了更多的感受. ...

  8. Android 监听软键盘搜索键

    现在很多的Android应用都有了数据搜索功能,在以往的设计上,会使用搜索框+搜索按钮来实现搜索功能: 现在呢,越来越流行的是,去除搜索按钮,直接监听软键盘搜索键,当用户输入完搜索关键字后,直接点击软 ...

  9. Laravel 的HTTP控制器

    简介# 除了在路有文件中以闭包的形式定义所有的请求处理逻辑外,还可以使用控制器类来组织此类行为,控制器能够将相关 的请求处理逻辑组成的一个单独的类,控制器被存放在app/Http/Controller ...

  10. js 过滤富文本标签数据

    var str = '<p><code>uni-app</code> 完整支持 <code>Vue</code> 实例的生命周期,同时还新增 ...