Friday, 23 August 2013

Side Bar in Yii Framework

Introduction:

In this post I will show you how to put sidebar in Yii framework Web application.

This Sidebar can be displayed on the left or right side of the browser. This slides in on mouse over on the sidebar and slides out automatically when user mouse leaves the sidebar.

Already we have leftsidebar and rightsidebar extensions in Yii framework. But these can be used to display sidebar on either left side or right side of the browser.

But this extension will avoid the use of two different extensions for displaying sidebars on left and right side of browser.

This sidebar can be used to display menu or some other useful things in your application.

 Download and Usage Details:

     You can download this extension at http://www.yiiframework.com/extension/sidebar/ . For Further Comments Please comment below.

      Extract folder to your protected/extensions/ folder.

Example Usage:

You have to specify 'position' to be left or right. If you don't specify it will display in right side. 



in Your view file



$this->beginWidget('application.extensions.sidebar.Sidebar',
array('title' => 'Menu', 'collapsed' => true, 
'position'=>'left'));

//here you display a cmenu or gridview or any other 
thing as per your needs.
//or you can simply display contents form variable like below

echo $var;
$this->endWidget();






If you don't specify 'position', Then a right sidebar will be displayed by default. So, if you want a right sidebar then you don't need to specify position in the widget.

Result:

Like below a sidebar will b shown either left or right side of your browser based on 'position'.

 Arrow mark as in rightsidebar extension:

You can able to display an arrow mark in your sidebar by just doing some modification the extension. For this do the below steps.

In Sidebar/sidebar.php change the below things

Step 1: Change This,
echo '<div class="title">' ;
        echo  CHtml::encode($this->title);
 echo '</div>';

To,


echo '<div class="title">' ;
        echo CHtml::encode($this->title);
        echo CHtml::ajaxLink('&gt;&gt;', '', false, array('id' => 
 'toggle_left_menu'));     
        echo '</div>';



Step 2: Change This, 
echo '<div class="title">' ;
  echo  CHtml::encode($this->title);
        echo '</div>';

To,

echo '<div class="title">' ;
        echo CHtml::encode($this->title);
        echo CHtml::ajaxLink('&gt;&gt;', '', false, array('id' => 
 'toggle_right_menu'));
        echo '</div>';
 
and in js folder, 

Step 3: In leftsidebar.js line 64 change Pin and Hide.
Step: 4 And finally in rightsidebar.css line 61 change float to right.

That is it. Now a arrow mark will be displayed in the sidebar. You can click on the arrow mark to display and again click to hide the sidebars.

I think it is useful to someone.


11 comments:

  1. Replies
    1. The development of artificial intelligence (AI) has propelled more programming architects, information scientists, and different experts to investigate the plausibility of a vocation in machine learning. Notwithstanding, a few newcomers will in general spotlight a lot on hypothesis and insufficient on commonsense application. machine learning projects for final year In case you will succeed, you have to begin building machine learning projects in the near future.

      Projects assist you with improving your applied ML skills rapidly while allowing you to investigate an intriguing point. Furthermore, you can include projects into your portfolio, making it simpler to get a vocation, discover cool profession openings, and Final Year Project Centers in Chennai even arrange a more significant compensation.

      Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account.

      The Nodejs Projects Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  2. If you Like this and if you feel any Further improvements please Comment below. I know this extension still needs some more things.

    ReplyDelete
  3. great extension works perfectly
    However I would like to change its position and put it a bit higher in my page how can I do it please ?

    ReplyDelete
  4. Nice blog. Thanks for providing such nice information to Yii Developer.

    ReplyDelete
  5. Nice blog...Very useful information is providing by ur blog. Great beginning php tutorials Very clear and helpful for beginners.

    ReplyDelete
  6. interesting blog. It would be great if you can provide more details about it. Thanks you

    Online Web Development Courses

    ReplyDelete
  7. Great blog. All posts have something to learn. Your work nd is very good ai appreciate you and hoping for some more informative posts.keep writing.
    Web development Company in India Company | Web development Company Bangalore
    Web development Company in Bangalore | Responsive Web development

    ReplyDelete
  8. The information that you have shared was really very useful and looks great to see.Thanks for sharing the information with us.
    Web development company in bangalore
    Web design company bangalore

    ReplyDelete
  9. Nice post.Thank you so much for sharing.Yiioverflow is a web development company.We have well expert team in Angular JS, Ionic, Yii Framework, Node JS, Laravel, PHP, MySQL, and WordPress.If you want a developer visit.. https://yiioverflow.com/

    ReplyDelete
  10. What an amazing job done by the writer.
    mason soiza

    ReplyDelete