CODEWITHSUNDEEP
javascriptyui
amrit_neo
amrit_neo

Reputation: 1759

YUI menu change page content not whole page

I have divided html page into :

<body>
    <div class="menu_container">
        <!-- added menu here -->
    </div>
    <div class="content">
        <!-- body content here -->
    </div>
</body>

I want to change the content of "content" div when I select menu item. ie depending on menu item selection div content should change, like what happens in Tabviews. How can I do so?

Upvotes: 0

Views: 209

Answers (2)

juandopazo
juandopazo

Reputation: 6329

The latest versions of YUI include the concept of Pjax which uses History and Ajax to update the page. It's really easy to set up and it'll keep your URLs working. Check out the User Guide: http://yuilibrary.com/yui/docs/pjax/.

You only need to add the yui3-pjax class to each menu that updates the page, apply the Menu plugin, plug the Pjax plugin and have your server return the right HTML content.

<div id="menu-1" class="yui3-menu">
  <div class="yui3-menu-content">
    <ul>
      <li class="yui3-menuitem">
        <a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
      </li>
    </ul>
  </div>
</div>
<div id="content">
  <!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
  Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
  Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>

Upvotes: 1

olan
olan

Reputation: 3638

This should do the trick:

Y.one('.menu_container').on('click', function(e) {
  Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});

Depending on the selector used instead of menu_container, you can update the content accordingly.

EDIT: In fact, delegate is probably better for your needs:

Y.one('.menu_container').delegate('click', onClick, '.menu-item');

http://jsfiddle.net/olan/w2jfh/

Upvotes: 0

Related Questions