文档章节

html 可拖动宽度的div方法

孟飞阳
 孟飞阳
发布于 2017/09/12 12:55
字数 178
阅读 48
收藏 0
Css

效果演示:http://www.gbtags.com/gb/rtreplayerpreview/569.htm

HTML:

<h4>鼠标移动到矩形分割线</h4>

<div class="wrap">
    <div class="resizable resizable1"></div>
    <div class="resizable resizable2"></div>
</div>

<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.gbtags.com/jqueryui/1.10.4/jquery-ui.min.js"></script>

JS:

$(function () 
{
    $(".resizable1").resizable(
    {
        autoHide: true,
        handles: 'e',
        resize: function(e, ui) 
        {
            var parent = ui.element.parent();
            var remainingSpace = parent.width() - ui.element.outerWidth(),
                divTwo = ui.element.next(),
                divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parent.width()*100+"%";
                divTwo.width(divTwoWidth);
        },
        stop: function(e, ui) 
        {
            var parent = ui.element.parent();
            ui.element.css(
            {
                width: ui.element.width()/parent.width()*100+"%",
            });
        }
    });
});
    

CSS:

@import url('http://cdn.gbtags.com/jqueryui/1.10.4/css/jquery-ui.min.css');

*{
  font-family: 'microsoft yahei',Arial,sans-serif;
}

.wrap {
    width: 100%;
    border: 1px solid #999;
    font-size: 0;
}

h4{
  font-weight: normal;
}

.resizable {
    width: 50%;
    height: 120px;
    padding: 0.5em;
    background-color: orange;
    display: inline-block;
}

.resizable2 {
    background-color: #08a3ca;
}

.ui-resizable-e { 
    cursor: e-resize; 
    width: 16px; 
    right: -5px; 
    top: 0; 
    bottom: 0; 
    background-color: #666;
}

 

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 206
博文 972
码字总数 544644
作品 5
朝阳
个人站长
私信 提问
jQuery刻度尺滚动滑块插件

jQuery刻度尺滚动滑块插件 需要用到一个刻度尺插件,网上找来找去都是那几种,所以用jQuery自己写了一个。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta n......

皇上洗碗
2016/12/28
83
0
HTML5 如何实现拖放'N'拖放

在网络开发人员需要掌握的所有技术中,看起来最容易造成混淆和潜在问题的是拖拽。 这不是一项新技术,它已存在多年,但许多开发人员仍然执着于基于jQuery的旧方法,以牵连复杂(有时很慢且不...

3487690675
04/17
0
0
Element源码分析系列10 - Slider(滑块)

简介 滑块组件总体来说还是比较简单的,但是还是涉及到了很多原生的js知识,下图是一个最基本的滑块组件 可以看出主要分为滑块轨道部分和滑块按钮这2大部分,而滑块轨道已滑过的蓝色部分也是...

超级索尼子
08/31
0
0
ExtJS 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Vie...

声明:本文案例讲解摘自资料,部分资料收集自他人博客。 通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewp...

郏高阳
2012/05/13
0
0
Element源码分析系列7-InputNumber(数字输入框)

简介 数字输入框,如下图,就是一个有着加减按钮的input而已,多用于购物车商品数目添加减少,这个输入框组件初看上去应该不是很难,但是Element的具体实现却有很多值得学习的地方,看完源码...

超级索尼子
08/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部