Zend Framework 2 Trình đơn điều hướng Twitter Tích hợp Bootstrap

Question

Tôi hiện đang xây dựng một trình đơn từ cơ sở dữ liệu và mã hoạt động tốt. Tuy nhiên tôi bây giờ muốn phong cách trình đơn với các bootstrap twitter và đây là nơi tôi đang gặp vấn đề. Có ai biết một cách để tích hợp menu zend framework 2 nav với các bootstrap twitter? Nếu có ai quan tâm đến menu được tạo ra như sau.

<ul class="nav"> 
<li> 
    <a href="/view-page/home">Home</a> 
    <ul> 
     <li> 
      <a href="/view-page/coupons">Coupons</a> 
      <ul> 
       <li> 
        <a href="/view-page/printable-coupons">Printable Coupons</a> 
        <ul> 
         <li> 
          <a href="/view-page/cut-these-coupons">Cut these here coupons</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</li> 
<li class="active"> 
    <a href="/view-page/about-us">About Us</a> 
</li> 
</ul> 

Answer 1

Bạn có thể sử dụng partials để tạo điều hướng theo yêu cầu của mình.

Để hiển thị menu của bạn bên trong mẫu của bạn:

<?php $partial = array('application/navigation/topnav.phtml', 'default') ?> 
<?php $this->navigation('navigation')->menu()->setPartial($partial) ?> 
<?php echo $this->navigation('navigation')->menu()->render() ?> 

chuyển hướng của bạn một phần nên có một cái gì đó như thế này:

application/hướng/topnav.phtml

<ul class="nav"> 
    <?php $count = 0 ?> 
    <?php foreach ($this->container as $page): ?> 
     <?php /* @var $page Zend\Navigation\Page\Mvc */ ?> 
     <?php // when using partials we need to manually check for ACL conditions ?> 
     <?php if(! $page->isVisible() || !$this->navigation()->accept($page)) continue; ?> 
     <?php $hasChildren = $page->hasPages() ?> 
     <?php if(! $hasChildren): ?> 
     <li <?php if($page->isActive()) echo 'class="active"'?>> 
      <a class="nav-header" href="<?php echo $page->getHref() ?>"> 
       <?php echo $this->translate($page->getLabel()) ?> 
      </a> 
     </li> 
     <?php else: ?> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
       <span><?php echo $this->translate($page->getLabel()) ?></span> 
      </a> 

      <ul class="dropdown-menu" id="page_<?php echo $count ?>"> 
      <?php foreach($page->getPages() as $child): ?> 
       <?php // when using partials we need to manually check for ACL conditions ?> 
       <?php if(! $child->isVisible() || !$this->navigation()->accept($child)) continue; ?> 
       <li> 
        <a href="<?php echo $child->getHref() ?>"> 
         <?php echo $this->translate($child->getLabel()) ?> 
        </a> 
       </li> 
      <?php endforeach ?> 
      </ul> 
     </li> 
     <?php endif ?> 
     <?php $count++ ?> 
    <?php endforeach ?> 
</ul> 

Rõ ràng đó là một đơn giản ví dụ và sẽ không chăm sóc một số lượng tùy ý các cấp điều hướng, và bạn sẽ cần phải thêm vào một số tên lớp bổ sung, vv để làm cho nó làm việc perfec tly với Bootstrap nhưng bạn có được ý tưởng.

Answer 2

Hãy thử mã dưới đây; chuyển hướng của bạn một phần nên có một cái gì đó như thế này:

application/phần/topnav.phtml

<div class="navbar navbar-inverse navbar-fixed-bottom"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <ul class="nav" id="menu">  
     <?php $count = 0; ?> 
     <?php foreach ($this->container as $page): ?> 
      <?php //var_dump($page); exit;?> 
      <?php /* @var $page Zend\Navigation\Page\Mvc */ ?> 
      <?php // when using partials we need to manually check for ACL conditions ?> 
      <?php if(! $page->isVisible() || !$this->navigation()->accept($page)) continue; ?> 
      <?php $hasChildren = $page->hasPages() ?> 
      <?php if(! $hasChildren): ?> 
      <li> 
       <a class="nav-header" href="<?php echo $page->getHref() ?>"> 
        <?php echo $this->translate($page->getLabel()) ?> 
       </a> 
      </li> 
      <?php else: ?> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#page_<?php echo $count; ?>"> 
        <span><?php echo $this->translate($page->getLabel()) ?></span> 
       </a> 
       <ul class="dropdown-menu" id="page_<?php echo $count; ?>"> 
       <?php foreach($page->getPages() as $child): ?> 
        <?php // when using partials we need to manually check for ACL conditions ?> 
        <?php if(! $child->isVisible() || !$this->navigation()->accept($child)) continue; ?> 
        <li> 
         <a href="<?php echo $child->getHref() ?>"> 
          <?php echo $this->translate($child->getLabel()) ?> 
         </a> 
        </li> 
       <?php endforeach ?> 
       </ul> 
      <?php endif ?> 
      <?php $count++; ?> 
     <?php endforeach ?> 
     </ul> 
     <form class="navbar-search pull-right" action=""> 
      <input type="text" class="search-query span2" placeholder="Search"> 
     </form> 
     </div><!-- /.nav-collapse --> 
    </div><!-- /.container --> 
    </div><!-- /.navbar-inner --> 
</div><!-- /.navbar --> 

Để hiển thị menu của bạn bên trong mẫu của bạn:

<div class="nav-collapse"> 
     <?php 
      echo $this->navigation('navigation') 
      ->menu() 
      ->setMinDepth(0) 
      ->setMaxDepth(0) 
      ->setUlClass('nav') 
      ->setPartial(array('partial/topnav.phtml', 'Application')); 
     ?> 
    </div> 

Answer 3

Đối với mới Bootstrap 3, sử dụng này như là một phần xem;

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="<?php echo $this->url('home') ?>"><img src="<?php echo $this->basePath('img/logo.png') ?>" alt="Title App"/>&nbsp;TitleText</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <?php foreach ($this->container as $page) { ?> 
      <?php /* @var $page Zend\Navigation\Page\Mvc */ ?> 
      <?php // when using partials we need to manually check for ACL conditions ?> 
      <?php if (!$page->isVisible() || !$this->navigation()->accept($page)) { continue; } ?> 
      <?php $hasChildren = $page->hasPages(); ?> 
      <?php if (!$hasChildren) { ?> 
       <li> 
        <a href="<?php echo $page->getHref() ?>"> 
         <?php echo $this->translate($page->getLabel()) ?> 
        </a> 
       </li> 
      <?php } else { ?> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><?php echo $this->translate($page->getLabel()) ?> <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <?php foreach ($page->getPages() as $child) { ?> 
         <?php // when using partials we need to manually check for ACL conditions ?> 
         <?php if(!$child->isVisible() || !$this->navigation()->accept($child)) { continue; } ?> 
         <li> 
          <a href="<?php echo $child->getHref() ?>"> 
           <?php echo $this->translate($child->getLabel()) ?> 
          </a> 
         </li> 
        <?php } ?> 
       </ul> 
      </li> 
      <?php } ?> 
     <?php } ?> 
    </ul> 
    </div> 
</div> 
</nav> 

Answer 4

Để tích hợp giao diện với zend nav-bar thay đổi này:

<ul class="nav">

cho việc này:

<ul class="nav navbar-nav">