系统后台自适应简单框架

<!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. Directx11教程(6) 画一个简单的三角形(2)

    原文:Directx11教程(6) 画一个简单的三角形(2)      在上篇教程中,我们实现了在D3D11中画一个简单的三角形,但是,当我们改变窗口大小时候,三角形形状却随着窗口高宽比例改变而改变, ...

  2. React-FlipOver-Counter（日历翻页）

    跟窝一起学习鸭~~ //index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.cs ...

  3. js函数易犯的错误

    1.定义一个js函数时不能写在另一个函数里面. 2.定义一个打开网页自动执行的函数,一定要注意加载的顺序.如果是不是自动执行的,而是等页面加载完后事件触发的,那写在任何地方都没问题. 错误的:

  4. hdu2018 dp

    /* 1~4直接取得: 然后后面的生牛的时候都是前一年的加上一定的数. 从第5年看,第五年出生的牛肯定要加上第四年出生的,然后由于第一个出生的牛开始生小牛,这和 最开始的牛生孩子是一样的,所以+dp[ ...

  5. 复习一下jdbc原始封装

    JDBC连接数据库 •创建一个以JDBC连接数据库的程序,包含7个步骤: 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过java.l ...

  6. 2013年山东省第四届ACM大学生程序设计竞赛E题:Alice and Bob

    题目描述 Alice and Bob like playing games very much.Today, they introduce a new game. There is a polynom ...

  7. AUTO uninstaller 密钥/激活码/破解/注册机 ver 8.9.05 资源下载【转载】

    技术贴:AUTO uninstaller 密钥/激活码/破解/注册机 ver 8.9.05 资源下载 楼主分享几个auto uninstaller密钥破解注册机,可以用于AUTO uninstalle ...

  8. SDUT-3342_数据结构实验之二叉树三：统计叶子数

    数据结构实验之二叉树三:统计叶子数 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 已知二叉树的一个按先序遍历输入的字符 ...

  9. util.date

    package com.sxt.utils.date1; import java.util.Date; /* * util.date */ public class TestDate { public ...

  10. 选用适合的ORACLE优化器

    ORACLE的优化器共有3种: a.  RULE (基于规则)   b. COST (基于成本)  c. CHOOSE (选择性) 设置缺省的优化器,可以通过对init.ora文件中OPTIMIZER ...