jquery ui, de tamaño variable, a la izquierda parte inferior de la manija para cambiar el tamaño de

Estoy usando jquery-ui-tamaño variable plugin en mi proyecto.

Por defecto al hacer un Objeto DOM de jquery-ui-puede cambiar de tamaño el tamaño ajustable de la manija aparecerá en la esquina inferior derecha, tengo la necesidad de re-ajustable de la manija en la esquina inferior izquierda.

— EDIT —

Una cosa más, no se debe volver a considerable el uso del borde derecho, pero debe ser redimensionable utilizando el borde izquierdo.

jquery ui, de tamaño variable, a la izquierda parte inferior de la manija para cambiar el tamaño de

OriginalEl autor Imran Naqvi | 2011-07-29

5 Kommentare

  1. 34

    Debe utilizar el handles

    supported: { n, e, s, w, ne, se, sw, nw }. 

    Esto creará las Asas en el lado que usted especificó. Los valores predeterminados son

    'e, s, se'

    Ejemplos de código

    Inicializar un tamaño variable con las manijas de la opción especificada.

    $( ".selector" ).resizable({ handles: 'n, e, s, w' });

    Obtener o establecer el mango opción, después de init.

    //getter
    var handles = $( ".selector" ).resizable( "option", "handles" );
    //setter
    $( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );
    +1, Gracias @Ahmed por tu respuesta, creo que va a trabajar. Por favor, déjame intentarlo.

    OriginalEl autor Talha Ahmed Khan

  2. 9

    Adicionales a Ahmed respuesta:
    jQueryUI no incluye un icono para el sw-manejar y también no se aplica un icono de la clase para el sw-manejar. Usted puede usar un poco de CSS para agregar un icono:

    #resizable .ui-resizable-sw{background:url(path/to/custom_icon.gif) no-repeat;}
    +1, Gracias @Dr. Molle, me imaginé que fuera ya.

    OriginalEl autor Dr.Molle

  3. 6

    A hacer re-dimensionamiento de todas las partes de código siguiente puede utilizarse también

         var resizeOpts = { 
          handles: "all" ,autoHide:true
        }; 
    $( ".selector" ).resizable(resizeOpts);

    y que se oculte automáticamente, igual a true significa que el agarre icono se oculte automáticamente cuando el puntero del ratón se toma lejos de objeto dom.

    OriginalEl autor Ali Nouman

  4. 3

    Yo estaba buscando este SW solución. Lo que tenía que hacer para que funcione es agregar la interfaz de usuario, el icono de clases a la creación div sólo después de la llamada de tamaño variable().

    $( "#wproof" ).resizable({handles: "w, sw, s"});
    $('.ui-resizable-sw').addClass('ui-icon ui-icon-gripsmall-diagonal-sw');

    A continuación, definir el icono tomando en imágenes/ui-icons_222222_256x240.png
    Se trata de un pequeño 9X9 área en la parte inferior. Hacer una .archivo png de la misma ( con un giro ! ) y agregar el estilo a la clase dada :

    <style>
    .ui-icon-gripsmall-diagonal-sw { 
        background-image: url(your 9x9 icon.png); }
    .ui-resizable-sw {
        bottom: 1px;
        left: 1px;
    }
    </style>

    La parte inferior y a la izquierda se establecen en -5px en jquery-ui css

    OriginalEl autor adamreith

  5. 0

    Parece que el estándar de la propiedad cursor es lo que es utilizado por la interfaz de usuario de CSS

    .ui-resizable-sw {
    cursor: sw-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0;
    }

    También parece que el cursor no se muestra y de tamaño variable, no está habilitado para el lado del elemento que se utiliza para el posicionamiento – por ejemplo: un div posicionado utilizando left:20px top:20px no permiten cambio de tamaño en los lados izquierdo y superior

    Esto lo descubrí después de agregar todos los maneja, pero entonces todos ellos nunca apareció !
    Actualización: al Parecer hay algún problema dentro de mi aplicación que está causando el problema. Las pruebas en JSFiddle todos los identificadores de hacer el trabajo como se esperaba utilizando la misma versión de JQuery…..argggggg

    OriginalEl autor alQemist

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea