Foros del Web » Programando para Internet » Javascript » Frameworks JS »

[SOLUCIONADO] Copiar con ZeroClioboard

Estas en el tema de Copiar con ZeroClioboard en el foro de Frameworks JS en Foros del Web. Ayuda!!!! he buscado mucho en internet pero no logro simplificar la implementacion del scrilpt ZeroClioboard, al decir simplificar me refiero tambien a entenderla... es necesario ...
  #1 (permalink)  
Antiguo 01/07/2013, 11:14
Avatar de jibran  
Fecha de Ingreso: mayo-2011
Ubicación: Estado de Mexico
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 0
Copiar con ZeroClioboard

Ayuda!!!!

he buscado mucho en internet pero no logro simplificar la implementacion del scrilpt ZeroClioboard, al decir simplificar me refiero tambien a entenderla...

es necesario utilizar el boton???

y si solo quiero que el texto se copie en el evento onBlur() de una caja de texto???

no entiendo la funcion de copiado alguien me la puede explicar???

sera bien recibido codigo!!!!
  #2 (permalink)  
Antiguo 01/07/2013, 14:17
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 12 años, 2 meses
Puntos: 1532
Respuesta: Copiar con ZeroClioboard

según la documentación: https://github.com/zeroclipboard/Zer...nstructions.md la función setText() podría bastar, intenta y comenta
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 02/07/2013, 14:09
Avatar de jibran  
Fecha de Ingreso: mayo-2011
Ubicación: Estado de Mexico
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Copiar con ZeroClioboard

Gracias por responder...

Creo que tengo un problema que va mas aya.. ya he desarrollado casi todos los ejemplos de las primeras 3 hojas de resultados de google y nada...

decidi descargar un ejemplo ya hecho y zaz tampoco funciono lo de copiar el texto al portapapeles sin embargo si borraba el contenido previemnte copiado...

asi que descargue un buen de ejemplos y zaz no funcionaron hacina lo mismo!!!!

bueno trabajo sobre Ubuntu 12.04

Utilizo netbeans!!!!

MI version de Adobe Flash es 11... superior a 11

Que me recomiendan??? ya probe los ejemplos descargados sobre Windows y tampoco funcionan!!!!
  #4 (permalink)  
Antiguo 03/07/2013, 10:40
Avatar de jibran  
Fecha de Ingreso: mayo-2011
Ubicación: Estado de Mexico
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Copiar con ZeroClioboard

ya lo resolvi gracias si utilice ZeroClipboard!!!

EL problema era....

Que el contenido disponible en las paginas no sirve en especififico la el script ZeroClipboar.js,

ni siquiera se encuntra disponible en google code... pero por fortuna al leer el script me percate de que habian cosas que faltaban para que pudiera creaser un lemento ZeroCLip con mediante el contructur new ZeroClip....


El scrip queda como sigue

tambien dejo el html ejemplo


Código HTML:
Ver original
  1.     <title>Zero Clipboard Test JB or die</title>
  2.     <style type="text/css">
  3.         body { font-family:arial,sans-serif; font-size:9pt; }
  4.        
  5.         .my_clip_button { width:150px; text-align:center; border:1px solid black; background-color:#ccc; margin:10px; padding:10px; cursor:default; font-size:9pt; }
  6.         .my_clip_button.hover { background-color:#eee; }
  7.         .my_clip_button.active { background-color:#aaa; }
  8.     </style>
  9.     <script type="text/javascript" src="ZeroClipboard.js"></script>
  10.     <script language="JavaScript">
  11.         var clip = null;
  12.        
  13.         function $(id) { return document.getElementById(id); }
  14.        
  15.         function init() {
  16.                      alert("after init ");
  17.             clip = new ZeroClipboard.Client();
  18.                         alert("after init an created class");
  19.             clip.setHandCursor( true );
  20.            
  21.             clip.addEventListener("load", function (client) {
  22.                 debugstr("Flash movie loaded and ready.");
  23.             });
  24.            
  25.             clip.addEventListener('mouseOver', function (client) {
  26.                 // update the text on mouse over
  27.                 clip.setText( $('fe_text').value );
  28.             });
  29.            
  30.             clip.addEventListener('complete', function (client, text) {
  31.                 debugstr("Copied text to clipboard: " + text );
  32.             });
  33.            
  34.             clip.glue( 'd_clip_button', 'd_clip_container' );
  35.         }
  36.        
  37.         function debugstr(msg) {
  38.             var p = document.createElement('p');
  39.             p.innerHTML = msg;
  40.             $('d_debug').appendChild(p);
  41.         }
  42.     </script>
  43. </head>
  44. <body onLoad="init()">
  45.     <h1>Zero Clipboard Test jb or die</h1>
  46.     <p><script>document.write("Your browser: " + navigator.userAgent);</script></p>
  47.     <table width="100%">
  48.         <tr>
  49.             <td width="50%" valign="top">
  50.                 <!-- Upload Form -->
  51.                 <table>
  52.                     <tr>
  53.                         <td align="right"><b>Text:</b></td>
  54.                         <td align="left"><textarea id="fe_text" cols=50 rows=5 onChange="clip.setText(this.value)">Copy me!</textarea></td>
  55.                     </tr>
  56.                 </table>
  57.                 <br/>
  58.                 <div id="d_clip_container" style="position:relative">
  59.                     <div id="d_clip_button" class="my_clip_button"><b>Copy To Clipboard...</b></div>
  60.                 </div>
  61.             </td>
  62.             <td width="50%" valign="top">
  63.                 <!-- Debug Console -->
  64.                 <div id="d_debug" style="border:1px solid #aaa; padding: 10px; font-size:9pt;">
  65.                     <h3>Debug Console:</h3>
  66.                 </div>
  67.             </td>
  68.         </tr>
  69.     </table>
  70.    
  71.     <br/><br/>
  72.     You can paste text here if you want, to make sure it worked:<br/>
  73.     <textarea id="testarea" cols=50 rows=10></textarea><br/>
  74.     <input type=button value="Clear Test Area" onClick="$('testarea').value = '';"/>
  75. </body>
  76. </html>
  #5 (permalink)  
Antiguo 03/07/2013, 10:41
Avatar de jibran  
Fecha de Ingreso: mayo-2011
Ubicación: Estado de Mexico
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Copiar con ZeroClioboard

el js ..



Código Javascript:
Ver original
  1. // Simple Set Clipboard System
  2. // Author: Joseph Huckaby
  3.  
  4. var ZeroClipboard = {
  5.    
  6.     version: "1.0.7",
  7.     clients: {}, // registered upload clients on page, indexed by id
  8.     moviePath: 'ZeroClipboard.swf', // URL to movie
  9.     nextId: 1, // ID of next movie
  10.    
  11.     $: function(thingy) {
  12.         // simple DOM lookup utility function
  13.         if (typeof(thingy) == 'string') thingy = document.getElementById(thingy);
  14.         if (!thingy.addClass) {
  15.             // extend element with a few useful methods
  16.             thingy.hide = function() { this.style.display = 'none'; };
  17.             thingy.show = function() { this.style.display = ''; };
  18.             thingy.addClass = function(name) { this.removeClass(name); this.className += ' ' + name; };
  19.             thingy.removeClass = function(name) {
  20.                 var classes = this.className.split(/\s+/);
  21.                 var idx = -1;
  22.                 for (var k = 0; k < classes.length; k++) {
  23.                     if (classes[k] == name) { idx = k; k = classes.length; }
  24.                 }
  25.                 if (idx > -1) {
  26.                     classes.splice( idx, 1 );
  27.                     this.className = classes.join(' ');
  28.                 }
  29.                 return this;
  30.             };
  31.             thingy.hasClass = function(name) {
  32.                 return !!this.className.match( new RegExp("\\s*" + name + "\\s*") );
  33.             };
  34.         }
  35.         return thingy;
  36.     },
  37.    
  38.     setMoviePath: function(path) {
  39.         // set path to ZeroClipboard.swf
  40.         this.moviePath = path;
  41.     },
  42.    
  43.     dispatch: function(id, eventName, args) {
  44.         // receive event from flash movie, send to client      
  45.         var client = this.clients[id];
  46.         if (client) {
  47.             client.receiveEvent(eventName, args);
  48.         }
  49.     },
  50.    
  51.     register: function(id, client) {
  52.         // register new client to receive events
  53.         this.clients[id] = client;
  54.     },
  55.    
  56.     getDOMObjectPosition: function(obj, stopObj) {
  57.         // get absolute coordinates for dom element
  58.         var info = {
  59.             left: 0,
  60.             top: 0,
  61.             width: obj.width ? obj.width : obj.offsetWidth,
  62.             height: obj.height ? obj.height : obj.offsetHeight
  63.         };
  64.  
  65.         while (obj && (obj != stopObj)) {
  66.             info.left += obj.offsetLeft;
  67.             info.top += obj.offsetTop;
  68.             obj = obj.offsetParent;
  69.         }
  70.  
  71.         return info;
  72.     },
  73.    
  74.     Client: function(elem) {
  75.         // constructor for new simple upload client
  76.         this.handlers = {};
  77.        
  78.         // unique ID
  79.         this.id = ZeroClipboard.nextId++;
  80.         this.movieId = 'ZeroClipboardMovie_' + this.id;
  81.        
  82.         // register client with singleton to receive flash events
  83.         ZeroClipboard.register(this.id, this);
  84.        
  85.         // create movie
  86.         if (elem) this.glue(elem);
  87.     }
  88. };
  89.  
  90. ZeroClipboard.Client.prototype = {
  91.    
  92.     id: 0, // unique ID for us
  93.     ready: false, // whether movie is ready to receive events or not
  94.     movie: null, // reference to movie object
  95.     clipText: '', // text to copy to clipboard
  96.     handCursorEnabled: true, // whether to show hand cursor, or default pointer cursor
  97.     cssEffects: true, // enable CSS mouse effects on dom container
  98.     handlers: null, // user event handlers
  99.    
  100.     glue: function(elem, appendElem, stylesToAdd) {
  101.         // glue to DOM element
  102.         // elem can be ID or actual DOM element object
  103.         this.domElement = ZeroClipboard.$(elem);
  104.        
  105.         // float just above object, or zIndex 99 if dom element isn't set
  106.         var zIndex = 99;
  107.         if (this.domElement.style.zIndex) {
  108.             zIndex = parseInt(this.domElement.style.zIndex, 10) + 1;
  109.         }
  110.        
  111.         if (typeof(appendElem) == 'string') {
  112.             appendElem = ZeroClipboard.$(appendElem);
  113.         }
  114.         else if (typeof(appendElem) == 'undefined') {
  115.             appendElem = document.getElementsByTagName('body')[0];
  116.         }
  117.        
  118.         // find X/Y position of domElement
  119.         var box = ZeroClipboard.getDOMObjectPosition(this.domElement, appendElem);
  120.        
  121.         // create floating DIV above element
  122.         this.div = document.createElement('div');
  123.         var style = this.div.style;
  124.         style.position = 'absolute';
  125.         style.left = '' + box.left + 'px';
  126.         style.top = '' + box.top + 'px';
  127.         style.width = '' + box.width + 'px';
  128.         style.height = '' + box.height + 'px';
  129.         style.zIndex = zIndex;
  130.        
  131.         if (typeof(stylesToAdd) == 'object') {
  132.             for (addedStyle in stylesToAdd) {
  133.                 style[addedStyle] = stylesToAdd[addedStyle];
  134.             }
  135.         }
  136.        
  137.         // style.backgroundColor = '#f00'; // debug
  138.        
  139.         appendElem.appendChild(this.div);
  140.        
  141.         this.div.innerHTML = this.getHTML( box.width, box.height );
  142.     },
  143.    
  144.     getHTML: function(width, height) {
  145.         // return HTML for movie
  146.         var html = '';
  147.         var flashvars = 'id=' + this.id +
  148.             '&width=' + width +
  149.             '&height=' + height;
  150.            
  151.         if (navigator.userAgent.match(/MSIE/)) {
  152.             // IE gets an OBJECT tag
  153.             var protocol = location.href.match(/^https/i) ? 'https://' : 'http://';
  154.             html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+protocol+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+width+'" height="'+height+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashvars+'"/><param name="wmode" value="transparent"/></object>';
  155.         }
  156.         else {
  157.             // all other browsers get an EMBED tag
  158.             html += '<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+width+'" height="'+height+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'" wmode="transparent" />';
  159.         }
  160.         return html;
  161.     },
  162.    
  163.     hide: function() {
  164.         // temporarily hide floater offscreen
  165.         if (this.div) {
  166.             this.div.style.left = '-2000px';
  167.         }
  168.     },
  169.    
  170.     show: function() {
  171.         // show ourselves after a call to hide()
  172.         this.reposition();
  173.     },
  174.    
  175.     destroy: function() {
  176.         // destroy control and floater
  177.         if (this.domElement && this.div) {
  178.             this.hide();
  179.             this.div.innerHTML = '';
  180.            
  181.             var body = document.getElementsByTagName('body')[0];
  182.             try { body.removeChild( this.div ); } catch(e) {;}
  183.            
  184.             this.domElement = null;
  185.             this.div = null;
  186.         }
  187.     },
  188.    
  189.     reposition: function(elem) {
  190.         // reposition our floating div, optionally to new container
  191.         // warning: container CANNOT change size, only position
  192.         if (elem) {
  193.             this.domElement = ZeroClipboard.$(elem);
  194.             if (!this.domElement) this.hide();
  195.         }
  196.        
  197.         if (this.domElement && this.div) {
  198.             var box = ZeroClipboard.getDOMObjectPosition(this.domElement);
  199.             var style = this.div.style;
  200.             style.left = '' + box.left + 'px';
  201.             style.top = '' + box.top + 'px';
  202.         }
  203.     },
  204.    
  205.     setText: function(newText) {
  206.         // set text to be copied to clipboard
  207.         this.clipText = newText;
  208.         if (this.ready) this.movie.setText(newText);
  209.     },
  210.    
  211.     addEventListener: function(eventName, func) {
  212.         // add user event listener for event
  213.         // event types: load, queueStart, fileStart, fileComplete, queueComplete, progress, error, cancel
  214.         eventName = eventName.toString().toLowerCase().replace(/^on/, '');
  215.         if (!this.handlers[eventName]) this.handlers[eventName] = [];
  216.         this.handlers[eventName].push(func);
  217.     },
  218.    
  219.     setHandCursor: function(enabled) {
  220.         // enable hand cursor (true), or default arrow cursor (false)
  221.         this.handCursorEnabled = enabled;
  222.         if (this.ready) this.movie.setHandCursor(enabled);
  223.     },
  224.    
  225.     setCSSEffects: function(enabled) {
  226.         // enable or disable CSS effects on DOM container
  227.         this.cssEffects = !!enabled;
  228.     },
  229.    
  230.     receiveEvent: function(eventName, args) {
  231.         // receive event from flash
  232.         eventName = eventName.toString().toLowerCase().replace(/^on/, '');
  233.                
  234.         // special behavior for certain events
  235.         switch (eventName) {
  236.             case 'load':
  237.                 // movie claims it is ready, but in IE this isn't always the case...
  238.                 // bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function
  239.                 this.movie = document.getElementById(this.movieId);
  240.                 if (!this.movie) {
  241.                     var self = this;
  242.                     setTimeout( function() { self.receiveEvent('load', null); }, 1 );
  243.                     return;
  244.                 }
  245.                
  246.                 // firefox on pc needs a "kick" in order to set these in certain cases
  247.                 if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) {
  248.                     var self = this;
  249.                     setTimeout( function() { self.receiveEvent('load', null); }, 100 );
  250.                     this.ready = true;
  251.                     return;
  252.                 }
  253.                
  254.                 this.ready = true;
  255.                 this.movie.setText( this.clipText );
  256.                 this.movie.setHandCursor( this.handCursorEnabled );
  257.                 break;
  258.            
  259.             case 'mouseover':
  260.                 if (this.domElement && this.cssEffects) {
  261.                     this.domElement.addClass('hover');
  262.                     if (this.recoverActive) this.domElement.addClass('active');
  263.                 }
  264.                 break;
  265.            
  266.             case 'mouseout':
  267.                 if (this.domElement && this.cssEffects) {
  268.                     this.recoverActive = false;
  269.                     if (this.domElement.hasClass('active')) {
  270.                         this.domElement.removeClass('active');
  271.                         this.recoverActive = true;
  272.                     }
  273.                     this.domElement.removeClass('hover');
  274.                 }
  275.                 break;
  276.            
  277.             case 'mousedown':
  278.                 if (this.domElement && this.cssEffects) {
  279.                     this.domElement.addClass('active');
  280.                 }
  281.                 break;
  282.            
  283.             case 'mouseup':
  284.                 if (this.domElement && this.cssEffects) {
  285.                     this.domElement.removeClass('active');
  286.                     this.recoverActive = false;
  287.                 }
  288.                 break;
  289.         } // switch eventName
  290.        
  291.         if (this.handlers[eventName]) {
  292.             for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) {
  293.                 var func = this.handlers[eventName][idx];
  294.            
  295.                 if (typeof(func) == 'function') {
  296.                     // actual function reference
  297.                     func(this, args);
  298.                 }
  299.                 else if ((typeof(func) == 'object') && (func.length == 2)) {
  300.                     // PHP style object + method, i.e. [myObject, 'myMethod']
  301.                     func[0][ func[1] ](this, args);
  302.                 }
  303.                 else if (typeof(func) == 'string') {
  304.                     // name of function
  305.                     window[func](this, args);
  306.                 }
  307.             } // foreach event handler defined
  308.         } // user defined handler for event
  309.     }
  310.    
  311. };

Etiquetas: funcion, javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:06.