JQuery list plugin – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

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

 

arno
~ Anonymní uživatel
20 příspěvků
7. 11. 2016   #1
-
0
-

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  [:)]
 

Nahlásit jako SPAM
IP: 195.160.182.–
peter
~ Anonymní uživatel
3619 příspěvků
7. 11. 2016   #2
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:26c:1815:4a...–
arno
~ Anonymní uživatel
20 příspěvků
7. 11. 2016   #3
-
0
-

#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 

Nahlásit jako SPAM
IP: 92.52.57.–
peter
~ Anonymní uživatel
3619 příspěvků
8. 11. 2016   #4
-
0
-
Nahlásit jako SPAM
IP: 2001:718:2601:26c:5078:27...–
arno
~ Anonymní uživatel
20 příspěvků
8. 11. 2016   #5
-
0
-

Pomohlo to je to vyriesene vdaka za pomoc :)

Nahlásit jako SPAM
IP: 195.160.182.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 9 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý