zoukankan      html  css  js  c++  java
  • jQuery Resizable笔记

    JQ UI集中有个对窗口大小调整的控件:Resizable,可以按照一定条件拖拉调整窗口尺寸。包括限制最大/最小尺寸,等比调整,栅格调整,同比窗口。现在来看看如何对其进行调用:

    JQ 的UI包里面的示例中有个叫splitpane的实例,演示的就是如何使用这个UI。

    $('div ').resizable({
        alsoResize: false, //2个窗口同比缩放,例如: ‘#id’
        animate: false, //设置动画效果
        animateDuration: “slow”, //动画频率
        animateEasing: “swing”,
        aspectRatio: false,  //设置缩放比例,本窗口比例
        autoHide: false,
        cancel: “:input,option”,
        containment: false, //以父系元素高宽为缩放范围,这个尺寸为父系元素宽(高)-margin值
        delay: 0,  //延时缩放效果 移动多少毫秒后开始缩放  单位毫秒
        distance: 1, //延时缩放效果,移动多少px开始缩放  单位px
        ghost: false,  //复制显示缩放效果
        grid: false, //栅格缩放,单位px
        handles: “e,s,se”,//横向拖动,或竖向拖动
        helper: false, 
        maxHeight: null, //最大高度
        maxWidth: null, //最大宽度
        minHeight: 10, //最小高度
        minWidth: 10, //最小宽度
         zIndex: 1000
    });

    可以从中看到JQ的Resizable这个UI可配置的参数还是很多的,可以根据实际需求进行调整,但并非所有的参数都是必须的。
    值得说明的是:在CSS里面有二个样式比较重要,缺少这二个IE6下就无法移动。

    .ui-resizable-e {
        width: 10px; height: 475px;
        background:#e1e7f2 url(../images/splitpane_handle-ew.gif) no-repeat scroll 75% 50% !important;
        cursor:col-resize !important;
        border-left: #bbb 1px solid;
        padding: 3px;
    }
    .ui-resizable-n {
        height: 10px;
        background:#e1e7f2 url(../images/splitpane_handle-sn.gif) no-repeat scroll 50% 55% !important;
        border-top: #bbb 1px solid;
        padding: 3px;
    }

  • 相关阅读:
    导出Execl
    字符串与整型的转换及判断
    sql 删除重复记录
    日期函数
    C#中Hashtable和HashMap的区别很详细;
    c# Cookie汉字乱码的问题
    C#遍历整个文件夹及子目录的文件代码,.Net技术文章,Asp.net系列教程,Asp.n...
    自定义服务器控件开发之2:文件上传控件
    09所对应的汉字
    ms sql 分割字符串
  • 原文地址:https://www.cnblogs.com/HeroBeast/p/2491987.html
Copyright © 2011-2022 走看看