jQuery UI Widgets › Forums › Layouts › Splitter › Button onClick Collapse or Expand Top Pane
This topic contains 3 replies, has 2 voices, and was last updated by webnerdgirl 10 years, 8 months ago.
-
Author
-
I have two horizontal panes (header, content). In the content pane I want to put a custom “button” that when clicked will collapse the top (header) pane or if already collapsed expand it. I did see an earlier post that I think does what I need but I have no clue what saving something about the collapsed panels status???? to somewhere means. Is there a sample of actual code that I could look at? Please don’t send me to the events page because that doesn’t tell me anything that makes sense to me as far as how I’m supposed to relate it to button clicking on the api page.
Thank you
Hello webnerdgirl,
Please check out the following example. We hope it is helpful to you.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#mainSplitter').jqxSplitter({ width: 850, height: 400, orientation: 'horizontal', panels: [{ size: 100 }, { size: 300}] }); var state = "expanded"; $("#toggleButton").click(function () { if (state == "expanded") { $('#mainSplitter').jqxSplitter('collapse'); } else { $('#mainSplitter').jqxSplitter('expand'); } }); $('#mainSplitter').on('expanded', function (event) { state = "expanded"; }); $('#mainSplitter').on('collapsed', function (event) { state = "collapsed"; }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="mainSplitter"> <div class="splitter-panel"> Header</div> <div class="splitter-panel"> <button id="toggleButton"> Toggle header</button><br /> Content</div> </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/HAH! Works every time! Any time I’m stuck on a bit of code all it seems to take to shake it loose in my head is to ask for help. Came back to post a “never mind…duh!” and you’d already responded. You guys are great!
I resorted to logic I already knew from my server-side days and tried the “on click” logic applied to a toggle button. Logically it seemed like it should work and it does! Bit cleaner and I didn’t have to figure out how to save state….. although I REALLY appreciate the code and am sure I’ll need it in the future! THANK YOU!!!!
<!DOCTYPE html> <html lang="en"> <head> <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" /> <meta name="description" content="This demonstration shows how to use the jqxSplitter API." /> <title id='Description'>This demonstration shows how to use the jqxSplitter API.</title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { var panels = [{size: 100}, {size: 740, collapsible: false}]; $('#mainSplitter').jqxSplitter({ height: 600, width: 850, panels: panels, orientation: 'horizontal', showSplitBar: false }); $("#jqxButton").jqxToggleButton({ width: '200', toggled: true}); $("#jqxButton").on('click', function () { var toggled = $("#jqxButton").jqxToggleButton('toggled'); if (toggled) { $('#mainSplitter').jqxSplitter('expand'); } else { $('#mainSplitter').jqxSplitter('collapse'); } }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="container" > <div id="mainSplitter"> <div style="background-color:#F5FFF2;"></div> <div style="background-color:#EBF1FF;"> <input style='margin-left: 25px;' type="button" value="Toggled On" id='jqxButton' /> </div> </div> </div> </div> </body> </html>
Just an FYI or if anyone is interested I set the toggle button with a background image even though it doesn’t show that I should be able to.
<input type="button" style='height: 6px; background-image:url(images/blah.png)' value=" " id="jqxButton" />
I’m thinking that I should be able to flip the images in the .on() function someway or the other.
-
AuthorPosts
You must be logged in to reply to this topic.