JQuery veya Animasyon ile Meteor Etkileşim Genel

Temel olarak, Meteor'da bir uygulama yapıyorum ve position: fixed; ve left : -300px'da sol navbarım var ve left : 300px'a kaydırmak istiyorum, ancak nasıl yapılacağı hakkında hiçbir fikriniz yok. Meteor'da bir geçişi canlandırın (bir şekilde jquery'deki slayt geçişi). Bir şeyin temel JQuery yönünü anlıyorum, ama bir sebepten dolayı, betiğin Meteor.isClient yönünün altına koyduğumda işe yaramıyor. Unutmayın, Ben Meteor için oldukça yeni, dahil javascript kodu çok takdir edilecektir.JQuery veya Animasyon ile Meteor Etkileşim Genel

Geçerli kod şu şekildedir.

HTML

<body> 
    <div class='topmenu'> 
     <div class='menubutton'> 
      <span class="icon-bar1"></span> 
      <span class="icon-bar2"></span> 
      <span class="icon-bar3"></span> 
      <!--Needs to be fixed so that we only need to use one icon-bar class!!!--> 
     </div> 
     <div class='BanditDiv'> 
      <h1 class='BanditName'>Bandit</h1> 
     </div> 
    </div> 
    <div class='leftnav'> 
     <div class='sitenav'> 
      <a class='internalnav' href="#">Home</a> 
      <a class='internalnav' href="#">Musicians</a> 
      <a class='internalnav' href="#">Recording Space</a> 
     </div> 
    </div> 
    <div class='main'> 
    </div> 
</body>

CSS

body{ 
    margin: 0px 0px 0px 0px;  
} 

.navitem:hover{ 
    background-color: #000066; 
} 

.main{ 
    background-color: rgb(128,128,128); 
    height: 200vh; 
    width: 100vw; 
    margin: 0px 0px 0px 0px; 
    overflow-x:hidden; 
} 

.topmenu{ 
    position: fixed; 
    z-index: 10; 
    top: 0px; 
    width: 100vw; 
    height: 50px; 
    background: white; 
    border-bottom: 2px lightgray solid; 
} 

.BanditDiv{ 
    position: fixed; 
    top: 0px; 
    height: 50px; 
    width: 30vw; 
    margin-left: 35vw; 
    float: center; 
} 

.BanditName{ 
    text-align: center; 
    font: 400 25px/1.3 'Berkshire Swash', Helvetica, sans-serif; 
    color: #000066; 
} 

.menubutton{ 
    position: fixed; 
    top: 5px; 
    left: 5px; 
    height: 40px; 
    width: 40px; 
    border: 1px #cccccc solid; 
    background-color: white; 
    border-radius: 5px; 
} 

.menubutton:focus{ 
    outline: 0; 
} 

.icon-bar1 { 
    position: fixed; 
    top: 15px; 
    left: 10px; 
    margin: 0px 0px 0px 0px; 
    display: block; 
    width: 30px; 
    height: 2px; 
    background-color: #cccccc; 
    border-radius: 1px; 
} 

.icon-bar2 { 
    position: fixed; 
    top: 25px; 
    left: 10px; 
    margin: 0px 0px 0px 0px; 
    display: block; 
    width: 30px; 
    height: 2px; 
    background-color: #cccccc; 
    border-radius: 1px; 
} 

.icon-bar3 { 
    position: fixed; 
    top: 35px; 
    left: 10px; 
    margin: 0px 0px 0px 0px; 
    display: block; 
    width: 30px; 
    height: 2px; 
    background-color: #cccccc; 
    border-radius: 1px; 
} 

.leftnav{ 
    position: fixed; 
    top: 0px; 
    left: -300px; 
    width: 300px; 
    height: 100vh; 
    z-index: 9001; 
    background-color: yellow; 
}

kaynak

2016-01-28 Stephan Ng

JS'niz şu anda nasıl görünüyor ve kodunuz şu anda nasıl davranıyor? –

Aslında işe koyuldum! Açısal veya şablonları kullanmadığım için yapılmış gibi görünüyor. Endişe için teşekkürler olsa! –

Eğer işe aldıysanız, lütfen kendi cevabınızı yayınlayın. Sorunuz o kadar açık ki, insanlar bu konuyu merak ediyorlar. –

Yani bu işe gibiydi çözümü için geldi budur. Meteor.isClient içinde bir açısal modül oluşturdum ve iyi çalışıyor gibi görünüyor.

if (Meteor.isClient) { 
    angular.module('sidebar',['angular-meteor']); 

    angular.module('sidebar').controller('SidebarCtrl', ['$scope', 
    function ($scope) { 
     function Menu (callback){ 
     $('.menubutton').on('click', function(){ 
      $('.leftnav').css({"box-shadow" : "2px 2px 2px #888888"}); 
      $('.leftnav').animate({left : "0px"}, 500, function(){ 
      $('.main').click(function() { 
       $('.leftnav').animate({left: "-302px"}, 500); 
       $('.leftnav').css({"box-shadow" : "none"}); 
      }); 
      $('.leftnav').click(function(event){ 
       event.stopPropagation(); 
      }); 
      }); 
     });  
     } 
     Menu(); 
    }]); 
}

kaynak

2016-01-29 23:57:22

JQuery veya Animasyon ile Meteor Etkileşim Genel

cevap

İlgili konular