Rezultate 1 la 4 din 4

Subiect: Expand /Collapse menu sa ramana activ dupa click.. help

Afișare hibrid

  1. #1
    Avatarul lui stefanp
    stefanp este deconectat Membru SeoPedia
    Reputatie:
    24
    Data înscrierii
    16th April 2013
    Locaţie
    Bucuresti
    Vârstă
    35
    Posturi
    82
    Putere Rep
    24


    Unhappy Expand /Collapse menu sa ramana activ dupa click.. help

    Salut,

    Am rugamintea daca ma poate ajuta cineva in legatura cu un plugin de wordpress, mai exact un meniu din sidebar care are functia de Expand /Collapse ... tree nav etc.

    Problema este ca acesta nu ramane deschis si activ dupa ce ai dat click pe una din pagini, sincer nu stiu cum sa rezolv acest lucru si sper sa ma ajutati.

    Aici gasiti meniul cu problema, cel cu titlu proiecte: din pacate nu am voie sa postez link aici pentru ca nu am 30 zile de cand sunt membru, scrieti eventual sykadesign. ro ca sa vedeti meniul in actiune.

    Am sa pun mai jos continutul pluginului, este structurat astfel:

    ../css/style.css
    ../css/rtl.css
    ../js/codes.js
    wpp-tree.php


    1.wpp-tree.php

    Cod PHP:
    jQuery(document).ready(function(){


        
    jQuery('#wb_tree ul li').has('#wb_tree ul.sub-menu').prepend('<span>+</span>');
        
    jQuery('#wb_tree ul ul').hide();
        
        
    jQuery('#wb_tree span').click(
        function(){
        
           
        }).
    toggle(
           function(){
                  
    jQuery(this).text('-');
                  
                  var 
    parent jQuery(this).parent();
                  
    jQuery(parent).find('>ul').slideToggle();
           },
           function(){
                  
    jQuery(this).text('+');
                  var 
    parent jQuery(this).parent();
                  
    jQuery(parent).find('>ul').slideToggle();
           }
        );
        
        
    jQuery("li:contains('+')").css("background-image""none")


    }); 
    2. ../js/codes.js

    Cod:
    jQuery(document).ready(function(){
    
    
    	jQuery('#wb_tree ul li').has('#wb_tree ul.sub-menu').prepend('<span>+</span>');
    	jQuery('#wb_tree ul ul').hide();
    	
        jQuery('#wb_tree span').click(
        function(){
        
    	   
        }).toggle(
           function(){
           	   jQuery(this).text('-');
           	   
           	   var parent = jQuery(this).parent();
           	   jQuery(parent).find('>ul').slideToggle();
           },
           function(){
           	   jQuery(this).text('+');
           	   var parent = jQuery(this).parent();
           	   jQuery(parent).find('>ul').slideToggle();
           }
        );
        
        jQuery("li:contains('+')").css("background-image", "none")
    
    
    });
    3. ../css/rtl.css

    Cod:
    #wb_tree span{
       margin-left: 3px;
    }
    #wb_tree ul li{
       margin-right: 10px;
    }
    #wb_tree ul ul{
       margin-right: 10px;
    }
    #wb_tree ul ul li{
       background-position: right;
       padding-right: 5px;
    }
    4. ../css/style.css

    Cod:
    #wb_tree span{
       border: 1px solid #d7d7d7;
       padding: 0 3px;
       margin-right: 3px;
       cursor: pointer;
       color:#595959;
    }
    #wb_tree ul{
    	list-style: none;
    }
    #wb_tree ul li{
       margin-left: 0px; font-size:13px; font-weight:bold;
    }
    #wb_tree ul ul{
       margin-left: 10px;
    }
    #wb_tree ul ul li{
       background-image: url(li-b.png);
       background-repeat: no-repeat;
       background-position: left;
       padding-left: 10px;
       margin-left: 0px; font-size:12px; font-weight:normal;
    }
    Multumesc

  2. #2
    Avatarul lui Andrey
    Andrey este deconectat Junior SeoPedia
    Reputatie:
    0
    Data înscrierii
    22nd April 2013
    Posturi
    4
    Putere Rep
    0


    Implicit

    Salut.

    Nu lucrez cu wordpress și nu prea te pot ajuta având în vedere că e vorba de un cms.

    Mă rog, ideea e că acel cod javascript nu este decât animația / efectul meniului.

    Scripturile de genul ăsta se fac în doua moduri.

    1. Prin accesarea unui link care are o valoare în get sau un formular cu post care îți schimbă pagina și setează un cookie sau o sesiune utilizatorului.

    2. Metoda modernă se face folosind ajax cu aceeași salvare pentru un cookie sau o sesiune. Astfel meniul rămâne strâns sau nu prin verificarea cookie-ului.

    Metoda folosită ar trebui să fie prin ajax având în vedere că există o animatie și un fișier php, dar tu n-ai pus tot codul javascript.

    Ca să nu mai zic de cel php care e de fapt javascript.

    Tu trebuie să verifici cum se ajunge la scriptul php. Dacă se ajunge la codul php prin apăsarea butonului atunci verifici ce conține codul și dacă se salvează ceva - undeva.
    Ultima modificare făcută de Andrey; 25th April 2013 la 00:17.

  3. #3
    Avatarul lui stefanp
    stefanp este deconectat Membru SeoPedia
    Reputatie:
    24
    Data înscrierii
    16th April 2013
    Locaţie
    Bucuresti
    Vârstă
    35
    Posturi
    82
    Putere Rep
    24


    Implicit

    Salut, mersi pentru raspuns, nu stiu de ce nu s-a postat tot codul.. il mai postez odata poate imi poti da totusi un sfat de start, un link ceva de unde sa ma documentez.

    wpp-tree.php
    Cod PHP:
    <?php


        
    ///////////////////////////////////////// Style & JS  /////////////////////////////////////////

    function wb_treev_js_to_head()
    {
        echo 
    '<link rel="stylesheet" href="'.get_settings('siteurl').'/wp-content/plugins/wp-parsi-navigation-trees/css/style.css" type="text/css" media="screen" />'."\n";
        echo 
    '<script type="text/javascript" src="'.get_settings('siteurl').'/wp-content/plugins/wp-parsi-navigation-trees/js/codes.js"></script>'."\n";
        
    }
    add_action('wp_head''wb_treev_js_to_head');


    ///////////////////////////////////////// Main Class  /////////////////////////////////////////

    //error_reporting(E_ALL);
    add_action("widgets_init", array('Widget_Tree_Nav''register'));
    register_activation_hook__FILE__, array('Widget_Tree_Nav''activate'));
    register_deactivation_hook__FILE__, array('Widget_Tree_Nav''deactivate'));
    class 
    Widget_Tree_Nav {
        
        
        
        
      function 
    activate(){
        
    $data = array( 'treev_option' => '');
        if ( ! 
    get_option('widget_tree_nav')){
          
    add_option('widget_tree_nav' $data);
        } else {
          
    update_option('widget_tree_nav' $data);
        }
      }
      
      
      
    /////////////////////
      
    function deactivate(){
        
    delete_option('widget_tree_nav');
      }
      
      
    /////////////////////
    function control(){
      
    $data get_option('widget_tree_nav');


          global 
    $wpdb$table_prefix;
          
    $nav_menu_term_id $wpdb->get_col("SELECT term_id FROM {$table_prefix}term_taxonomy WHERE taxonomy = 'nav_menu'");
          
          echo 
    '<select name="widget_nav_option">';
          foreach(
    $nav_menu_term_id as $n_m_term_id){
               
    $nav_menu_name    $wpdb->get_col("SELECT name FROM {$table_prefix}terms WHERE term_id = $n_m_term_id");
               
               foreach(
    $nav_menu_name as $n_m_name){
                    if (
    $data['treev_option'] == $n_m_term_id){ $selected ' selected="selected"'; } else {$selected '';}
                    
    $nav_dlist "<option value=".$n_m_term_id."".$selected.">".$n_m_name."</option>";
                    echo 
    $nav_dlist;
               }
    //foreach child
          
          
    }//foreach
          
    echo '</select>';
      
    ?>
      
      <?php
       
    if (isset($_POST['widget_nav_option'])){
        
    $data['treev_option'] = attribute_escape($_POST['widget_nav_option']);
        
    update_option('widget_tree_nav'$data);
      }
    }


      
    /////////////////////
      
    function widget($args){
          
    $data get_option('widget_tree_nav');
        echo 
    '<div id="wb_tree">';
         
    wp_nav_menu( array ('menu' => $data['treev_option']) );
        echo 
    '</div>';
      }
      
      
    /////////////////////
      
    function register(){
        
    register_sidebar_widget('WPP-Tree', array('Widget_Tree_Nav''widget'));
        
    register_widget_control('WPP-Tree', array('Widget_Tree_Nav''control'));
      }
    }


    ?>

    codes.js
    Cod:
    jQuery(document).ready(function(){
    
    
    	jQuery('#wb_tree ul li').has('#wb_tree ul.sub-menu').prepend('<span>+</span>');
    	jQuery('#wb_tree ul ul').hide();
    	
        jQuery('#wb_tree span').click(
        function(){
        
    	   
        }).toggle(
           function(){
           	   jQuery(this).text('-');
           	   
           	   var parent = jQuery(this).parent();
           	   jQuery(parent).find('>ul').slideToggle();
           },
           function(){
           	   jQuery(this).text('+');
           	   var parent = jQuery(this).parent();
           	   jQuery(parent).find('>ul').slideToggle();
           }
        );
        
        jQuery("li:contains('+')").css("background-image", "none")
    
    
    });

    style.css
    Cod:
    #wb_tree span{
       border: 1px solid #d7d7d7;
       padding: 0 3px;
       margin-right: 3px;
       cursor: pointer;
       color:#595959;
    }
    #wb_tree ul{
    	list-style: none;
    }
    #wb_tree ul li{
       margin-left: 0px; font-size:13px; font-weight:bold;
    }
    #wb_tree ul ul{
       margin-left: 10px;
    }
    #wb_tree ul ul li{
       background-image: url(li-b.png);
       background-repeat: no-repeat;
       background-position: left;
       padding-left: 10px;
       margin-left: 0px; font-size:12px; font-weight:normal;
    }

  4. #4
    Avatarul lui Netul
    Netul este deconectat Ambasador
    Reputatie:
    49
    Data înscrierii
    5th January 2006
    Locaţie
    Iasi
    Vârstă
    47
    Posturi
    1.068
    Putere Rep
    49


    Implicit

    Fisier js

    Cod:
    function SDMenu(id) {
    	if (!document.getElementById || !document.getElementsByTagName)
    		return false;
    	this.menu = document.getElementById(id);
    	this.submenus = this.menu.getElementsByTagName("div");
    	this.remember = true;
    	this.speed = 3;
    	this.markCurrent = true;
    	this.oneSmOnly = false;
    }
    SDMenu.prototype.init = function() {
    	var mainInstance = this;
    	for (var i = 0; i < this.submenus.length; i++)
    		this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
    			mainInstance.toggleMenu(this.parentNode);
    		};
    	if (this.markCurrent) {
    		var links = this.menu.getElementsByTagName("a");
    		for (var i = 0; i < links.length; i++)
    			if (links[i].href == document.location.href) {
    				links[i].className = "current";
    				break;
    			}
    	}
    	if (this.remember) {
    		var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
    		var match = regex.exec(document.cookie);
    		if (match) {
    			var states = match[1].split("");
    			for (var i = 0; i < states.length; i++)
    				this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
    		}
    	}
    };
    SDMenu.prototype.toggleMenu = function(submenu) {
    	if (submenu.className == "collapsed")
    		this.expandMenu(submenu);
    	else
    		this.collapseMenu(submenu);
    };
    SDMenu.prototype.expandMenu = function(submenu) {
    	var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
    	var links = submenu.getElementsByTagName("a");
    	for (var i = 0; i < links.length; i++)
    		fullHeight += links[i].offsetHeight;
    	var moveBy = Math.round(this.speed * links.length);
    	
    	var mainInstance = this;
    	var intId = setInterval(function() {
    		var curHeight = submenu.offsetHeight;
    		var newHeight = curHeight + moveBy;
    		if (newHeight < fullHeight)
    			submenu.style.height = newHeight + "px";
    		else {
    			clearInterval(intId);
    			submenu.style.height = "";
    			submenu.className = "";
    			mainInstance.memorize();
    		}
    	}, 30);
    	this.collapseOthers(submenu);
    };
    SDMenu.prototype.collapseMenu = function(submenu) {
    	var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
    	var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
    	var mainInstance = this;
    	var intId = setInterval(function() {
    		var curHeight = submenu.offsetHeight;
    		var newHeight = curHeight - moveBy;
    		if (newHeight > minHeight)
    			submenu.style.height = newHeight + "px";
    		else {
    			clearInterval(intId);
    			submenu.style.height = "";
    			submenu.className = "collapsed";
    			mainInstance.memorize();
    		}
    	}, 30);
    };
    SDMenu.prototype.collapseOthers = function(submenu) {
    	if (this.oneSmOnly) {
    		for (var i = 0; i < this.submenus.length; i++)
    			if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
    				this.collapseMenu(this.submenus[i]);
    	}
    };
    SDMenu.prototype.expandAll = function() {
    	var oldOneSmOnly = this.oneSmOnly;
    	this.oneSmOnly = false;
    	for (var i = 0; i < this.submenus.length; i++)
    		if (this.submenus[i].className == "collapsed")
    			this.expandMenu(this.submenus[i]);
    	this.oneSmOnly = oldOneSmOnly;
    };
    SDMenu.prototype.collapseAll = function() {
    	for (var i = 0; i < this.submenus.length; i++)
    		if (this.submenus[i].className != "collapsed")
    			this.collapseMenu(this.submenus[i]);
    };
    SDMenu.prototype.memorize = function() {
    	if (this.remember) {
    		var states = new Array();
    		for (var i = 0; i < this.submenus.length; i++)
    			states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
    		var d = new Date();
    		d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
    		document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
    	}
    };

    Pagina cu meniul

    In <head></head>

    <script type="text/javascript">
    // <![CDATA[
    var myMenu;
    window.onload = function() {
    myMenu = new SDMenu("my_menu");
    myMenu.init();
    };
    // ]]>
    </script>


    Cod meniu:

    Cod:
    <div style="float: left" id="my_menu" class="sdmenu">
    
    	<div>
        	<span>Submeniu 1</span>
    		<a href="http://forum.seopedia.ro/client-side/..."><span>Link 1</span></a>
        	        <a href="http://forum.seopedia.ro/client-side/..."><span>Link 2</span></a>
                    .......
    	</div>
    
    	<div>
        	<span>Submeniu 2</span>
    		<a href="http://forum.seopedia.ro/client-side/..."><span>Link 1</span></a>
        	        <a href="http://forum.seopedia.ro/client-side/..."><span>Link 2</span></a>
                    .......
    	</div>
    </div>

    Se pastreaza memorate (in cookie) meniurile / submeniurile deschise chiar si dupa inchiderea browserului

Informații subiect

Utilizatori care navighează în acest subiect

Momentan este/sunt 1 utilizator(i) care navighează în acest subiect. (0 membrii și 1 vizitatori)

Thread-uri Similare

  1. www.yahoo.ro e activ :)
    De Sorin Frumuseanu în forumul Yahoo!
    Răspunsuri: 36
    Ultimul Post: 17th October 2011, 09:58
  2. CSS - Cum sa colorez linkul activ ?
    De evolution în forumul Client side
    Răspunsuri: 8
    Ultimul Post: 12th May 2010, 01:10
  3. Cumpar forum activ
    De marcos29 în forumul Website-uri
    Răspunsuri: 0
    Ultimul Post: 14th January 2010, 23:57
  4. Menu din pagini in Wordpress
    De Prometeu în forumul Server side
    Răspunsuri: 2
    Ultimul Post: 17th March 2009, 11:28
  5. Cum fac niste divuri sa ramana pe pozitie fixa ?
    De goguaremere în forumul Studii de caz
    Răspunsuri: 1
    Ultimul Post: 4th May 2008, 22:56

Etichete pentru acest subiect

Permisiuni postare

  • Nu puteţi posta subiecte noi.
  • Nu puteţi răspunde la subiecte
  • Nu puteţi adăuga ataşamente
  • Nu puteţi modifica posturile proprii
  •