Drag bars - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: jqxsplitter, splitbar, splitter, text

This topic contains 4 replies, has 2 voices, and was last updated by Excell 12 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Drag bars Posts

September 25, 2012 at 8:22 pm Drag bars #8450

Excell

Member

Hi All

Is it possible to put text into the drag handles

Thanks for any help in advance

September 26, 2012 at 5:31 am Drag bars #8491

Dimitar

Participant

Hello Excell,

Here is an example showing two ways of adding text to jqxSplitter’s splitbar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="This page demonstrates splitter's events" />
    <title id='Description'>Horizontal Splitter </title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            $('#mainSplitter').jqxSplitter({ width: 600, height: 400, orientation: 'horizontal', theme: theme, panels: [{ size: 100 }, { size: 300}], splitBarSize: '15px' });
            // this code adds text to the central button of the splitbar
            $("#mainSplitter .jqx-splitter-collapse-button-horizontal").text("Text 1");
            // this code adds text to the splitbar but removes the central button
            // $("#mainSplitter .jqx-splitter-splitbar-horizontal").text("Text 2");
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="mainSplitter">
            <div class="splitter-panel">
                Panel 1</div>
            <div class="splitter-panel">
                Panel 2</div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

September 26, 2012 at 6:50 am Drag bars #8494

Excell

Member

Dimitar

Thats fantastic

The only thing is i have 4 panels and want different text on each one is that possible

Kind Regards

Excell

September 26, 2012 at 7:40 am Drag bars #8495

Dimitar

Participant

Hi Excell,

Here is the updated example with four panels:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="This page demonstrates splitter's events" />
    <title id='Description'>Horizontal Splitter </title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            $('#mainSplitter').jqxSplitter({ width: 600, height: 400, orientation: 'horizontal', theme: theme, panels: [{ size: '25%' }, { size: '25%' }, { size: '25%' }, { size: '25%'}], splitBarSize: '15px' });
            // this code adds text to the central button of the splitbar
            $("#mainSplitter .jqx-splitter-collapse-button-horizontal:eq(0)").text("Text 1");
            $("#mainSplitter .jqx-splitter-collapse-button-horizontal:eq(1)").text("Text 2");
            $("#mainSplitter .jqx-splitter-collapse-button-horizontal:eq(2)").text("Text 3");
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="mainSplitter">
            <div class="splitter-panel">
                Panel 1</div>
            <div class="splitter-panel">
                Panel 2</div>
            <div class="splitter-panel">
                Panel 3</div>
            <div class="splitter-panel">
                Panel 4</div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

September 26, 2012 at 8:35 am Drag bars #8499

Excell

Member

Thats Perfect

Thank you very much

I have just started experimenting with these widgets and from what I have seen so far they are fantastic

Kind Regards

Excell

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.