How to Change Menu open Behaviour - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: behaviour, draggable, jqxMenu, Menu, minimized

This topic contains 5 replies, has 2 voices, and was last updated by Nadezhda 10 years, 5 months ago.

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

Author

How to Change Menu open Behaviour Posts

September 30, 2014 at 10:40 am How to Change Menu open Behaviour #60355

Participant

Hi,

I Tried the “Minimized Menu” sample. How to change the open behaviour of the menu. If I click the “Minimize” icon. The menu is coming from left to right. But I want to open from up to down depends upon the Icon.

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmenu/minimized.htm?arctic

September 30, 2014 at 11:28 am How to Change Menu open Behaviour #60359

Nadezhda

Participant

Hello Dinez,

Unfortunately, there is no different behaviour for “Minimized Menu”.

Best Regards,
Nadezhda

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

September 30, 2014 at 11:35 am How to Change Menu open Behaviour #60361

Kavya D

Participant

Hi Nadezhda,

Okay fine. Thank you. Any Draggable samples in angularjs? I want a draggable <DIV> in angularjs.

October 1, 2014 at 7:29 am How to Change Menu open Behaviour #60414

Nadezhda

Participant

Hi Dinez,

Here is an example with draggable div:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope) {
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-drag-drop style="width: 100px; height: 100px; background-color: Orange;"></jqx-drag-drop>
    </div>
</body>
</html>

I hope it would be helpful.

Best Regards,
Nadezhda

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

October 8, 2014 at 5:03 am How to Change Menu open Behaviour #60784

Kavya D

Participant

Hi Nadezhda,

Can I implement Sortable div in this? If I am having no of DIVs. How to make it, draggable within particular div and sortable?

October 8, 2014 at 10:23 am How to Change Menu open Behaviour #60805

Nadezhda

Participant

Hi Dinesh S Krishnan,

You can make draggable div within particular div with “restricter” property. Sortable div is not supported.

Here is an example with jqxListBox and draggable items that can be useful:

<!DOCTYPE html>
<html lang="en">
<head>    
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [
                { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/numberinput.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxNumberInput</span></div>", title: 'jqxNumberInput' },
                { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/progressbar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxProgressBar</span></div>", title: 'jqxProgressBar' },
                { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/calendar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxCalendar</span></div>", title: 'jqxCalendar' },
                { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/button.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxButton</span></div>", title: 'jqxButton' },
                { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/dropdownlist.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxDropDownList</span></div>", title: 'jqxDropDownList' },
                { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/listbox.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxListBox</span></div>", title: 'jqxListBox' },
                { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/tooltip.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxTooltip</span></div>", title: 'jqxTooltip' },
                { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/scrollbar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxScrollBar</span></div>", title: 'jqxScrollBar' },
                { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/datetimeinput.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxDateTimeInput</span></div>", title: 'jqxDateTimeInput' },
                { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/expander.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxExpander</span></div>", title: 'jqxExpander' },
                { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../../images/menu.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxMenu</span></div>", title: 'jqxMenu' },
            ];

            // Create a jqxListBox
            $("#jqxWidget").jqxListBox({ source: source, width: 200, autoHeight: true, allowDrag: true, allowDrop: true });
        });
    </script>
</head>
<body>
    <div id='content'>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.