Volver al Programación / Codificación foro

Fichas de desplazamiento de jQuery

  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Registrado: Jul 06, 2010
  • Mensajes: 266
  • Status: Online

Nota Enero 15th, 2013, 11:06 am

Antes de buceo en la codificación me preguntaba lo que nadie ha sido a través de un Jquery desplazamiento ejemplo de fichas como los 4 Ex Js avanzado fichashttp://try.sencha.com/extjs/4.0.7/examp ... /tabs-adv/

He encontrado algunos ejemplos de Jquery base pero el cochecito parece al menos en 18 de Firefox. http://www.seyfertdesign.com/jquery/demo.htmlpero también tienen el desplazamiento que Im looking for. Así que si alguien ha visto algo me deja saber. Probablemente voy a empezar hacer mi propio en un par de días. Cuando hago posteare el script aquí.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Enero 15th, 2013, 11:06 am

  • Zealous
  • Guru
  • Guru
  • Avatar de Usuario
  • Registrado: Abr 15, 2011
  • Mensajes: 1195
  • Loc: Sydney
  • Status: Offline

Nota Enero 15th, 2013, 4:15 pm

Estoy seguro puede modificar ese ejemplo para lo que necesita pero a veces, la compatibilidad es una puta.
  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Registrado: Jul 06, 2010
  • Mensajes: 266
  • Status: Online

Nota Enero 16th, 2013, 2:11 pm

Eso es cierto pero la la cuestión es que las fichas utilizan flotador izquierda y cuando el golpe final envuelve las fichas a la línea siguiente. Esta es la funcionalidad básica de la función de pestañas de Jquery ui. ID tiene que resolver ese problema antes que nada.

Así que comencé a trabajar en él hoy y esto es lo que me ocurrió en mi primer paso

Su un poco desordenada y no comentado bien y todavía va a añadir funciones de Im.

Si alguno tiene un script de buena extensión para un widget de interfaz de usuario de jquery amor Id a verla que pasé más tiempo tratando de ampliar la función de crear en las fichas y añadir a las opciones seguí acercando pero siempre habrá algún error extraño que lo sucedió decidí en este

JAVASCRIPT Código: [ Select ]
var tabs = $("#tabs").scrollableTabs();
 
  1. var tabs = $("#tabs").scrollableTabs();
  2.  


Me gustaría poder hacer esto. (Im cerca de llegar a este punto)
JAVASCRIPT Código: [ Select ]
var tabs = $("#tabs").tabs({scrollable:true, scrollSpeed: 40, scollToActive:true});
 
  1. var tabs = $("#tabs").tabs({scrollable:true, scrollSpeed: 40, scollToActive:true});
  2.  


Trabajo bien mal en esta mañana me supongo que fuera del trabajo hace unos 15 minutos. Si alguna idea por favor hágamelo saber.
Attachments:
test.zip

(234.17 KiB) 37 veces

  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Registrado: Jul 06, 2010
  • Mensajes: 266
  • Status: Online

Nota Enero 17th, 2013, 10:33 am

OK así algún tiempo lejos de codificación me hice buena Ive reescrito el script para trabajar de la forma que quiero. Este es el núcleo del guión que todavía estoy agregando a ella.

Aunque no es mi completa el código de registro por lo que se puede probar por otros para ver si hay problemas de Ive perdido hasta ahora

JAVASCRIPT Código: [ Select ]
 
// Basic jQuery UI tabs
var tabs = $("#tabs").tabs();
 
// Basic jQuery UI tabs with scrollable capability
var tabs = $("#tabs").tabs({scrollable:true});
 
// Added features
var tabs = $("#tabs").tabs({scrollable:true, scrollSpeed: 100, easing: 'easeOutBounce', duration: 500});
 
// Features to be added
var tabs = $("#tabs").tabs({scrollToActive});
 
  1.  
  2. // Basic jQuery UI tabs
  3. var tabs = $("#tabs").tabs();
  4.  
  5. // Basic jQuery UI tabs with scrollable capability
  6. var tabs = $("#tabs").tabs({scrollable:true});
  7.  
  8. // Added features
  9. var tabs = $("#tabs").tabs({scrollable:true, scrollSpeed: 100, easing: 'easeOutBounce', duration: 500});
  10.  
  11. // Features to be added
  12. var tabs = $("#tabs").tabs({scrollToActive});
  13.  


Sé que la velocidad de desplazamiento y la duración pueden parecer como uno en el mismo. Tal vez pude han utilizado un término diferente.

scrollSpeed - es la cantidad de las fichas se mueven en un solo haga clic en o si el botón se mantiene pulsado la cantidad las fichas mover cada vez que se llama a la función para moverlos
duración - es la cantidad de tiempo para la animación se llevará a cabo.

Si hay un término mejor déjeme por favor saber también quisiera saber si alguien ha encontrado problemas.
Attachments:
ScrollableTabs.zip

(234.95 KiB) 51 veces

  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Registrado: Jul 06, 2010
  • Mensajes: 266
  • Status: Online

Nota Enero 17th, 2013, 11:33 pm

OK aunque Im no en el trabajo no puedo dejar de trabajar en esto. Su demasiado divertido :) por lo que he encontrado algunas cosas que causó algunos problemas y les fija. También parece podría han subido el archivo zip mal tiempo pasado...Oh bien ha sido actualizado desde entonces.

OK, así que es donde estoy. Todas las características que quiero en este momento en se encuentran en el script actualizado ha sido comentado mejor y mucho se ha agregado.

uso
JAVASCRIPT Código: [ Select ]
// Basic jQuery UI tabs
var tabs = $("#tabs").tabs();
 
// Basic jQuery UI tabs with scrollable capability
var tabs = $("#tabs").tabs({scrollable:true});
 
// Added features
var tabs = $("#tabs").tabs({scrollable:true, scrollSpeed: 100, easing: 'easeOutBounce', duration: 500, scrollToActive:true, leftButton: '<button id="left_button" href="#"><span></span></button>', rightButton: '<button id="right_button" href="#"><span></span></button>'});
 
 
  1. // Basic jQuery UI tabs
  2. var tabs = $("#tabs").tabs();
  3.  
  4. // Basic jQuery UI tabs with scrollable capability
  5. var tabs = $("#tabs").tabs({scrollable:true});
  6.  
  7. // Added features
  8. var tabs = $("#tabs").tabs({scrollable:true, scrollSpeed: 100, easing: 'easeOutBounce', duration: 500, scrollToActive:true, leftButton: '<button id="left_button" href="#"><span></span></button>', rightButton: '<button id="right_button" href="#"><span></span></button>'});
  9.  
  10.  


Hay cierta extrañeza que ocurre cuando se tire de la lengüeta de la barra y colocarlo. Activa y vaya que del extremo izquierdo. Mal trabajo en más tarde
Attachments:
ScrollableTabs-v3.zip

(236.62 KiB) 31 veces

  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Registrado: Jul 06, 2010
  • Mensajes: 266
  • Status: Online

Nota Enero 24th, 2013, 10:27 am

Así que para cualquiera que aún siguiendo junto con esto soluciono el extraño comportamiento que fue causado por tirar de la pestaña fuera de la barra.

Cuando configura tipo capacidad en esta secuencia de comandos debe definir tabs.tabs ("opción", "ordenación", true); en la función de parada. Esto le indicará la secuencia de comandos que estamos clasificando y seleccionando no sólo una ficha. Lo hice así para que no necesitaba combinar el widget puede ordenar en el widget de fichas.
JAVASCRIPT Código: [ Select ]
tabs.find(".ui-tabs-nav").sortable({
      //axis: "x",
      stop: function() {
         tabs.tabs("refresh");
         tabs.tabs("option", "sorting", true);
      },
      containment: $("#bar_container")
   });
 
  1. tabs.find(".ui-tabs-nav").sortable({
  2.       //axis: "x",
  3.       stop: function() {
  4.          tabs.tabs("refresh");
  5.          tabs.tabs("option", "sorting", true);
  6.       },
  7.       containment: $("#bar_container")
  8.    });
  9.  


Ive también hizo una nueva función con el único propósito de activar o desactivar los botones de flecha con esta función llegó la función que si teníamos suficientes fichas para desplazarse y retirar las fichas las flechas desactivará si añadimos luego lengüetas o redimensionar la ventana en donde tenemos suficientes fichas para desplazarse permitirá.

También con esto descubrí que mi extensión a la scollPare no función estaba causando demasiados errores de recursividad y me fijo así.

Una cosa que Im no satisfecho en algunas de las ecuaciones que utilizo parecen Hacky tiene que ser una fórmula mejor para esto son las dos ecuaciones en cuestión.
JAVASCRIPT Código: [ Select ]
(element.width() - 1 + element.scrollLeft()) < element[0].scrollWidth
 
(settings.bar_width < $('#tabs_container').width() - 5) ? $('#tabs_container').width() - 5
 
  1. (element.width() - 1 + element.scrollLeft()) < element[0].scrollWidth
  2.  
  3. (settings.bar_width < $('#tabs_container').width() - 5) ? $('#tabs_container').width() - 5
  4.  


Si alguien puede ayudar a obtener estos no parecen estar tan hackeado que sería genial. Ver el debajo de funciones para el uso

JAVASCRIPT Código: [ Select ]
      // This function will be used to scroll the the tabs.
      move_bar: function(element, left, that) {
         
         // Check to see if we are going to scroll left
         if(left) {
           
            // Check to see if the scroll left is greater than 0
            if(element.scrollLeft() > 0) {
           
               // Start the scrolling
               element.animate({ scrollLeft : "-=" + that.options.scrollSpeed }, {queue: true, easing: that.options.easing, duration: that.options.duration, complete: function(){
                 
                  // Check to see if we are currenly scrolling
                  if(settings.scrolling) {
                     
                     // We are still scrolling so call the function again
                     that.move_bar(element, left, that);
                     
                  }
                 
                  // Disable the buttons
                  that._disable_buttons(element);
                 
               }});
           
            } else {
               
               // Disable the buttons
               that._disable_buttons(element);
               
            }
           
         } else {
           
            // Check to see if the Scroll if at the max
            if((element.width() - 1 + element.scrollLeft()) < element[0].scrollWidth) {
           
               // Start the scrolling
               element.animate({ scrollLeft : "+=" + that.options.scrollSpeed }, {queue: true, easing: that.options.easing, duration: that.options.duration, complete: function(){
                 
                  // Check to see if we are currenly scrolling
                  if(settings.scrolling) {
                     
                     // We are still scrolling so call the function again
                     that.move_bar(element, left, that);
                     
                  }
                 
                  // Disable the buttons
                  that._disable_buttons(element);
                 
               }});
           
            } else {
               
               // Disable the buttons
               that._disable_buttons(element);
               
            }
         
         }
         
      },
     
      // This function will diable the arrows buttons if needed
      _disable_buttons: function(element) {
         
         // Remove the disabled states
         $("#left_button").removeAttr("disabled").removeClass("ui-state-disabled");
         $("#right_button").removeAttr("disabled").removeClass("ui-state-disabled");
         
         // Check to see if we are at the begining of the scrolling element
         if(element.scrollLeft() == 0) {
           
            // Set to the max scroll
            element.scrollLeft(0);
           
            // Disable the left button
            $("#left_button").attr("disabled", "disabled").addClass("ui-state-disabled");
               
         }
         
         // Check to see if we are at the end of the scrolling element
         if((element.width() - 1 + element.scrollLeft()) >= element[0].scrollWidth) {
           
            // Set to the max scroll
            element.scrollLeft(element[0].scrollWidth);
           
            // Disable the right button
            $("#right_button").attr("disabled", "disabled").addClass("ui-state-disabled");
           
         }
         
         // Check to see if there is even an ability to scroll
         if(element.width() == element[0].scrollWidth) {
           
            // Disable the left and right button
            $("#left_button").attr("disabled", "disabled").addClass("ui-state-disabled");
            $("#right_button").attr("disabled", "disabled").addClass("ui-state-disabled");
           
         }
         
      },
     
      // This function will set the ULs width
      _get_bar_width: function() {
         
         // Rest the bar width
         settings.bar_width = 0;
         
         // Loop through the UL LI tags
         this.element.find(".ui-tabs-nav:first li").each(function() {
           
            // Add the outWidth of the LI to the bar_width varible
            settings.bar_width += $(this).outerWidth(true);
           
         });
         
         // This line fixes any wrapping issue that are caused by the first two tabs
         settings.bar_width = (settings.bar_width < $('#tabs_container').width() - 5) ? $('#tabs_container').width() - 5 : settings.bar_width;
         
         // Return the width
         return settings.bar_width;
         
      }
 
  1.       // This function will be used to scroll the the tabs.
  2.       move_bar: function(element, left, that) {
  3.          
  4.          // Check to see if we are going to scroll left
  5.          if(left) {
  6.            
  7.             // Check to see if the scroll left is greater than 0
  8.             if(element.scrollLeft() > 0) {
  9.            
  10.                // Start the scrolling
  11.                element.animate({ scrollLeft : "-=" + that.options.scrollSpeed }, {queue: true, easing: that.options.easing, duration: that.options.duration, complete: function(){
  12.                  
  13.                   // Check to see if we are currenly scrolling
  14.                   if(settings.scrolling) {
  15.                      
  16.                      // We are still scrolling so call the function again
  17.                      that.move_bar(element, left, that);
  18.                      
  19.                   }
  20.                  
  21.                   // Disable the buttons
  22.                   that._disable_buttons(element);
  23.                  
  24.                }});
  25.            
  26.             } else {
  27.                
  28.                // Disable the buttons
  29.                that._disable_buttons(element);
  30.                
  31.             }
  32.            
  33.          } else {
  34.            
  35.             // Check to see if the Scroll if at the max
  36.             if((element.width() - 1 + element.scrollLeft()) < element[0].scrollWidth) {
  37.            
  38.                // Start the scrolling
  39.                element.animate({ scrollLeft : "+=" + that.options.scrollSpeed }, {queue: true, easing: that.options.easing, duration: that.options.duration, complete: function(){
  40.                  
  41.                   // Check to see if we are currenly scrolling
  42.                   if(settings.scrolling) {
  43.                      
  44.                      // We are still scrolling so call the function again
  45.                      that.move_bar(element, left, that);
  46.                      
  47.                   }
  48.                  
  49.                   // Disable the buttons
  50.                   that._disable_buttons(element);
  51.                  
  52.                }});
  53.            
  54.             } else {
  55.                
  56.                // Disable the buttons
  57.                that._disable_buttons(element);
  58.                
  59.             }
  60.          
  61.          }
  62.          
  63.       },
  64.      
  65.       // This function will diable the arrows buttons if needed
  66.       _disable_buttons: function(element) {
  67.          
  68.          // Remove the disabled states
  69.          $("#left_button").removeAttr("disabled").removeClass("ui-state-disabled");
  70.          $("#right_button").removeAttr("disabled").removeClass("ui-state-disabled");
  71.          
  72.          // Check to see if we are at the begining of the scrolling element
  73.          if(element.scrollLeft() == 0) {
  74.            
  75.             // Set to the max scroll
  76.             element.scrollLeft(0);
  77.            
  78.             // Disable the left button
  79.             $("#left_button").attr("disabled", "disabled").addClass("ui-state-disabled");
  80.                
  81.          }
  82.          
  83.          // Check to see if we are at the end of the scrolling element
  84.          if((element.width() - 1 + element.scrollLeft()) >= element[0].scrollWidth) {
  85.            
  86.             // Set to the max scroll
  87.             element.scrollLeft(element[0].scrollWidth);
  88.            
  89.             // Disable the right button
  90.             $("#right_button").attr("disabled", "disabled").addClass("ui-state-disabled");
  91.            
  92.          }
  93.          
  94.          // Check to see if there is even an ability to scroll
  95.          if(element.width() == element[0].scrollWidth) {
  96.            
  97.             // Disable the left and right button
  98.             $("#left_button").attr("disabled", "disabled").addClass("ui-state-disabled");
  99.             $("#right_button").attr("disabled", "disabled").addClass("ui-state-disabled");
  100.            
  101.          }
  102.          
  103.       },
  104.      
  105.       // This function will set the ULs width
  106.       _get_bar_width: function() {
  107.          
  108.          // Rest the bar width
  109.          settings.bar_width = 0;
  110.          
  111.          // Loop through the UL LI tags
  112.          this.element.find(".ui-tabs-nav:first li").each(function() {
  113.            
  114.             // Add the outWidth of the LI to the bar_width varible
  115.             settings.bar_width += $(this).outerWidth(true);
  116.            
  117.          });
  118.          
  119.          // This line fixes any wrapping issue that are caused by the first two tabs
  120.          settings.bar_width = (settings.bar_width < $('#tabs_container').width() - 5) ? $('#tabs_container').width() - 5 : settings.bar_width;
  121.          
  122.          // Return the width
  123.          return settings.bar_width;
  124.          
  125.       }
  126.  
Attachments:
ScrollableTabs-v4.zip

(238.09 KiB) 82 veces

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 6 mensajes
  • Usuarios navegando por este Foro: ScottG y 226 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC