JQuery list plugin – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Ahojte potrebujem poradit s problemom nad ktorym si uz dlho lamem hlavu a nedari sa mi to vyriesit. Je mi jasne ze sa to da viac sposobom vyriesit tak za aku kolvek radu som vam vdacny.  [:)]

Zacnem takto: 

Na web potrebujem mat aj pole select (dajme mu name="pole[]") potrebujem to ako pole nakolko vedla selectu bude tlacitko ktore prida rovnaky select aby bolo mozne vybrat viac hodnot. Toto vsetko mam vyriesene. Problem nastal v tom ked som dostal za ulohu ten select nastylovat aj hover efect na option a kedze tak lahko sa to cez CSS neda ovplivnit musel som ten select prerobit na LIST a tu nastava problem. Pouzil som jQuery plugin SimpleDropDownEffects ktory mi z toho selectu spravi list. Pomocou css som ho nastyloval vsetko funguje az do momentu kedy dam pridat dalsi select ten pridavam tymto kodom
 

$('.input2').click(function() {
            original_managed.clone().appendTo( "#clone_managed" );
        });

select sa pekne zobrazi avsak neda sa na neho kliknut ani sa nerozroluje proste jQuery ho nenacita ako zonu kliku stale funguje len ten matersky select Tu prikladam kod z toho pluginu cast ktora by mala ovladat clik som oznacil (teda aspon si myslim ze je to ona) ale neviem ako to upravit aby reagovala aj na ten klik tych clonov.

/**
 * jquery.dropdown.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/…-license.php
 *
 * Copyright 2012, Codrops
 * http://www.codrops.com
 */
;( function( $, window, undefined ) {

   'use strict';

   $.DropDown = function( options, element ) {
      this.$el = $( element );
      this._init( options );
   };

   // the options
   $.DropDown.defaults = {
      speed : 300,
      easing : 'ease',
      gutter : 0,
      // initial stack effect
      stack : true,
      // delay between each option animation
      delay : 0,
      // random angle and positions for the options
      random : false,
      // rotated [right||left||false] : the options will be rotated to thr right side or left side.
      // make sure to tune the transform origin in the stylesheet
      rotated : false,
      // effect to slide in the options. value is the margin to start with
      slidingIn : false,
      onOptionSelect : function(opt) { return false; }
   };

   $.DropDown.prototype = {

      _init : function( options ) {

         // options
         this.options = $.extend( true, {}, $.DropDown.defaults, options );
         this._layout();
         this._initEvents();

      },
      _layout : function() {

         var self = this;
         this.minZIndex = 1000;
         var value = this._transformSelect();
         this.opts = this.listopts.children( 'li' );
         this.optsCount = this.opts.length;
         this.size = { width : this.dd.width(), height : this.dd.height() };
         
         var elName = this.$el.attr( 'name' ), elId = this.$el.attr( 'id' ),
            inputName = elName !== undefined ? elName : elId !== undefined ? elId : 'cd-dropdown-' + ( new Date() ).getTime();

         this.inputEl = $( '<input type="hidden" name="' + inputName + '" value="' + value + '"></input>' ).insertAfter( this.selectlabel );
         
         this.selectlabel.css( 'z-index', this.minZIndex + this.optsCount );
         this._positionOpts();
         if( Modernizr.csstransitions ) {
            setTimeout( function() { self.opts.css( 'transition', 'all ' + self.options.speed + 'ms ' + self.options.easing ); }, 25 );
         }

      },
      _transformSelect : function() {

         var optshtml = '', selectlabel = '', value = -1;
         this.$el.children( 'option' ).each( function() {

            var $this = $( this ),
               val = isNaN( $this.attr( 'value' ) ) ? $this.attr( 'value' ) : Number( $this.attr( 'value' ) ) ,
               classes = $this.attr( 'class' ),
               selected = $this.attr( 'selected' ),
               label = $this.text();

            if( val !== -1 ) {
               optshtml += 
                  classes !== undefined ? 
                     '<li data-value="' + val + '"><span class="' + classes + '">' + label + '</span></li>' :
                     '<li data-value="' + val + '"><span>' + label + '</span></li>';
            }

            if( selected ) {
               selectlabel = label;
               value = val;
            }

         } );

         this.listopts = $( '<ul/>' ).append( optshtml );
         this.selectlabel = $( '<span/>' ).append( selectlabel );
         this.dd = $( '<div class="cd-dropdown"/>' ).append( this.selectlabel, this.listopts ).insertAfter( this.$el );
         this.$el.remove();

         return value;

      },
      _positionOpts : function( anim ) {

         var self = this;

         this.listopts.css( 'height', 'auto' );
         this.opts
            .each( function( i ) {
               $( this ).css( {
                  zIndex : self.minZIndex + self.optsCount - 1 - i,
                  top : self.options.slidingIn ? ( i + 1 ) * ( self.size.height + self.options.gutter ) : 0,
                  left : 0,
                  marginLeft : self.options.slidingIn ? i % 2 === 0 ? self.options.slidingIn : - self.options.slidingIn : 0,
                  opacity : self.options.slidingIn ? 0 : 1,
                  transform : 'none'
               } );
            } );

         if( !this.options.slidingIn ) {
//            this.opts
//               .eq( this.optsCount - 1 )
//               .css( { top : this.options.stack ? 9 : 0, left : this.options.stack ? 4 : 0, width : this.options.stack ? this.size.width - 8 : this.size.width, transform : 'none' } )
//               .end()
//               .eq( this.optsCount - 2 )
//               .css( { top : this.options.stack ? 6 : 0, left : this.options.stack ? 2 : 0, width : this.options.stack ? this.size.width - 4 : this.size.width, transform : 'none' } )
//               .end()
//               .eq( this.optsCount - 3 )
//               .css( { top : this.options.stack ? 3 : 0, left : 0, transform : 'none' } );
         }

      },
      _initEvents : function() {
         
         var self = this;
         
         this.selectlabel.on( 'mousedown.dropdown', function( event ) {
            self.opened ? self.close() : self.open();
            return false;

         } );

// PODLA MNA BY TO MALA BYT TATO CAST

         this.opts.on( 'click.dropdown', function() {
            if( self.opened ) {
               var opt = $( this );
               self.options.onOptionSelect( opt );
               self.inputEl.val( opt.data( 'value' ) );
               self.selectlabel.html( opt.html() );
               self.close();
            }
         } );

      },
      open : function() {
         var self = this;
         this.dd.toggleClass( 'cd-active' );
         this.listopts.css( 'height', ( this.optsCount + 1 ) * ( this.size.height + this.options.gutter ) );
         this.opts.each( function( i ) {

            $( this ).css( {
               opacity : 1,
               top : self.options.rotated ? self.size.height + self.options.gutter : ( i + 1 ) * ( self.size.height/* + self.options.gutter*/ ),
               left : self.options.random ? Math.floor( Math.random() * 11 - 5 ) : 0,
               width : self.size.width,
               marginLeft : 0,
               transform : self.options.random ?
                  'rotate(' + Math.floor( Math.random() * 11 - 5 ) + 'deg)' :
                  self.options.rotated ?
                     self.options.rotated === 'right' ?
                        'rotate(-' + ( i * 5 ) + 'deg)' :
                        'rotate(' + ( i * 5 ) + 'deg)'
                     : 'none',
               transitionDelay : self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? ( i * self.options.delay ) + 'ms' : ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : 0
            } );

         } );
         this.opened = true;

      },
      close : function() {

         var self = this;
         this.dd.toggleClass( 'cd-active' );
         if( this.options.delay && Modernizr.csstransitions ) {
            this.opts.each( function( i ) {
               $( this ).css( { 'transition-delay' : self.options.slidingIn ? ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : ( i * self.options.delay ) + 'ms' } );
            } );
         }
         this._positionOpts( true );
         this.opened = false;

      }

   }

   $.fn.dropdown = function( options ) {
      var instance = $.data( this, 'dropdown' );
      if ( typeof options === 'string' ) {
         var args = Array.prototype.slice.call( arguments, 1 );
         this.each(function() {
            instance[ options ].apply( instance, args );
         });
      }
      else {
         this.each(function() {
            instance ? instance._init() : instance = $.data( this, 'dropdown', new $.DropDown( options, this ) );
         });
      }
      return instance;
   };

} )( jQuery, window );

ked sa mi nedarilo vyriesit tento problem skusil som ist na to inak

predtym ako volam funkciu 

$( '#type-managed-type' ).dropdown( {
   gutter : 5
} );

ktora sluzi prave na to aby zo selectu spravila list som si spravil kopiu povodneho selectu do premennej (teda aspon som si myslel)
tu je cely kod

var original_managed = $( '#overlay_for_managed' );

if ( original_managed !== null ) {
       $( '#type-managed-type' ).dropdown( {
      gutter : 5
    } );
}

Zaroven som testoval ze ak sa zaloha nespravila nespusti sa ani ta zmena na list a potom s tou povodnou zalohou som chcel pridavat dalsie selecty po kliku a zaroven im na klik pridat aj tu funkciu na zmenu na list avsak narazil som na problem ze v tej zaloznej premenej sa nenachadza povodny select ale uz upraveny list tak som z toho jelen ked najskor robim zalohu az potom sa spusta ta funkcia a este sa ani nespusti kym neni zaloha a tym padom ked tam dava ten list vysledok je rovnaky ako pri tom prvom pripade na klik nereaguje a tym padom ostatne selecty su len mrtve nepouzitelne listy...

Hmm tak ak ste to precitali tento sloh az ku koncu tak dakujem  [:D]  a verim ze ma nasmerujete spravne aspon v jednom sposobe a spolu to vyriesime  [:)]  Vopred dakujem za pomoc  [:)]
 

Jquery je desne nepruhledne. Proto ho jeste zadny prohlizec neimplementoval, treba jako node.js. Kdyz to nejde slozite, tak se vrat k javascriptu.

.clone() - pokud to klonuje nod, tak to klonuje i s id. takze bez prespani id/name se k tomu uz nedostanes.

function xxx(id1,id2)
{
var i, obj, str, opt
obj = document.getElementById(id1);
if (!obj) return;
opt = obj.options;
if (!opt || opt.length==0) return;
str = '';
for (i=0;i<opt.length;i++) {str+= '<div value="'+opt.value+'" onclick="">' + opt.text + '<\/div>';}
obj = document.getElementById(id2);
obj.innerHTML = str;
obj.onclick = yyy;
}

function yyy(event)
{
event = event || window.event;
el    = event.target || event.srcElement;
//alert(el.nodeName)
if (el.nodeName=='DIV' ...)
    {
    ...
    }
}

Tam bych mozna dal detekci, zda el.parentNode.id == 'idecko2', abys rozlisil na klik na hlavni div a na divy uvnitr.
Nebo to mozna prestavet na UL/LI. A nebo uplne nejlepe pouzit primo UL/LI. A na LI navazat pres jquery onclick.

Select nejake barveni uz podporuje, aspon Firefox. Nevim, zda vse. Ale jinak je to desne nedomysleny pikacu prvek (sice umi i multiple, oznaceni vice polozek pres ctrl, ale...). Osobne pouzivam radeji radioboxy nebo checkboxy.

#2 peter

Nad tym radiobox a ceckbox som aj ja rozmyslal ale y hladiska ze v selecte bude aj cez 30 poloziek mi to moc nevzhovuje bolo by to moc preplnene. Skusim to v tom javascripte ako si napisal a uvidim ci sa mi to podari rozchodit dam vediet :) Zatial dakujem 

Mam tam i 800 polozek
http://mlich.zam.slu.cz/…uvky-csv.htm

Pomohlo to je to vyriesene vdaka za pomoc :)