← Back to branch summary

~holger-seelig/cobweb.js/trunk

« back to all changes in this revision

Viewing changes to cobweb.js/lib/jquery-contextMenu/demo/input.html

  • Committer: Holger Seelig
  • Date: 2017-08-22 04:53:24 UTC
  • Revision ID: holger.seelig@yahoo.de-20170822045324-4of4xxgt79669gbt
Switched to npm.

Show diffs side-by-side

added added

removed removed

Lines of Context:
cobweb.js/lib/jquery-contextMenu/demo/input.html
1
 
<!DOCTYPE html>
2
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
3
 
<head>
4
 
    <meta charset="utf-8" />
5
 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6
 
    <title>Input Commands Demo - jQuery contextMenu Plugin</title>
7
 
    <meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />
8
 
 
9
 
    <script src="../jquery-1.8.2.min.js" type="text/javascript"></script>
10
 
    <script src="../dist/jquery.ui.position.min.js" type="text/javascript"></script>
11
 
    <script src="../dist/jquery.contextMenu.min.js" type="text/javascript"></script>
12
 
    <script src="../prettify/prettify.js" type="text/javascript"></script>
13
 
    <script src="../screen.js" type="text/javascript"></script>
14
 
 
15
 
    <link href="../dist/jquery.contextMenu.min.css" rel="stylesheet" type="text/css" />
16
 
    <link href="../screen.css" rel="stylesheet" type="text/css" />
17
 
    <link href="../prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />
18
 
 
19
 
    <script type="text/javascript">
20
 
 
21
 
      var _gaq = _gaq || [];
22
 
      _gaq.push(['_setAccount', 'UA-66438984-1']);
23
 
      _gaq.push(['_trackPageview']);
24
 
 
25
 
      (function() {
26
 
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
27
 
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
28
 
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
29
 
      })();
30
 
 
31
 
    </script>
32
 
</head>
33
 
<body>
34
 
    <a id="github-forkme" href="https://github.com/swisnl/jQuery-contextMenu"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
35
 
    <div id="container">
36
 
    <h1><a href="https://github.com/swisnl/jQuery-contextMenu">jQuery contextMenu</a></h1>
37
 
    
38
 
    <ul class="menu">
39
 
        <li><a href="../index.html">About</a></li>
40
 
        <li class="active"><a href="../demo.html">Demo</a></li>
41
 
        <li><a href="../docs.html">Documentation</a></li>
42
 
        <li><a href="http://www.swis.nl/over-ons/bjorn-brala">Author</a></li>
43
 
    </ul>
44
 
 
45
 
    <h2 id="demo">Demo: Input Commands</h2>
46
 
    <div class="inline-spaces">
47
 
<div class="context-menu-one box menu-1">
48
 
    <strong>right click me</strong>
49
 
</div>
50
 
    </div>
51
 
 
52
 
    <h3 id="code">Example code: Input Commands</h3>
53
 
    <script type="text/javascript" class="showcase">
54
 
$(function(){
55
 
    $.contextMenu({
56
 
        selector: '.context-menu-one', 
57
 
        items: {
58
 
            // <input type="text">
59
 
            name: {
60
 
                name: "Text", 
61
 
                type: 'text', 
62
 
                value: "Hello World", 
63
 
                events: {
64
 
                    keyup: function(e) {
65
 
                        // add some fancy key handling here?
66
 
                        window.console && console.log('key: '+ e.keyCode); 
67
 
                    }
68
 
                }
69
 
            },
70
 
            sep1: "---------",
71
 
            // <input type="checkbox">
72
 
            yesno: {
73
 
                name: "Boolean", 
74
 
                type: 'checkbox', 
75
 
                selected: true
76
 
            },
77
 
            sep2: "---------",
78
 
            // <input type="radio">
79
 
            radio1: {
80
 
                name: "Radio1", 
81
 
                type: 'radio', 
82
 
                radio: 'radio', 
83
 
                value: '1'
84
 
            },
85
 
            radio2: {
86
 
                name: "Radio2", 
87
 
                type: 'radio', 
88
 
                radio: 'radio', 
89
 
                value: '2', 
90
 
                selected: true
91
 
            },
92
 
            radio3: {
93
 
                name: "Radio3", 
94
 
                type: 'radio', 
95
 
                radio: 'radio', 
96
 
                value: '3'
97
 
            },
98
 
            radio4: {
99
 
                name: "Radio3", 
100
 
                type: 'radio', 
101
 
                radio: 'radio', 
102
 
                value: '4', 
103
 
                disabled: true
104
 
            },
105
 
            sep3: "---------",
106
 
            // <select>
107
 
            select: {
108
 
                name: "Select", 
109
 
                type: 'select', 
110
 
                options: {1: 'one', 2: 'two', 3: 'three'}, 
111
 
                selected: 2
112
 
            },
113
 
            // <textarea>
114
 
            area1: {
115
 
                name: "Textarea with height", 
116
 
                type: 'textarea', 
117
 
                value: "Hello World", 
118
 
                height: 40
119
 
            },
120
 
            area2: {
121
 
                name: "Textarea", 
122
 
                type: 'textarea', 
123
 
                value: "Hello World"
124
 
            },
125
 
            sep4: "---------",
126
 
            key: {
127
 
                name: "Something Clickable", 
128
 
                callback: $.noop
129
 
            }
130
 
        }, 
131
 
        events: {
132
 
            show: function(opt) {
133
 
                // this is the trigger element
134
 
                var $this = this;
135
 
                // import states from data store 
136
 
                $.contextMenu.setInputValues(opt, $this.data());
137
 
                // this basically fills the input commands from an object
138
 
                // like {name: "foo", yesno: true, radio: "3", …}
139
 
            }, 
140
 
            hide: function(opt) {
141
 
                // this is the trigger element
142
 
                var $this = this;
143
 
                // export states to data store
144
 
                $.contextMenu.getInputValues(opt, $this.data());
145
 
                // this basically dumps the input commands' values to an object
146
 
                // like {name: "foo", yesno: true, radio: "3", …}
147
 
            }
148
 
        }
149
 
    });
150
 
});
151
 
    </script>
152
 
 
153
 
    <h3 id="html">Example HTML: Input Commands</h3>
154
 
    <div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
155
 
    
156
 
    
157
 
    <h2>jQuery Context Menu Demo Gallery</h2>
158
 
    <ul id="demo-list">
159
 
        <li><a href="../demo.html">Simple Context Menu</a></li>
160
 
        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
161
 
        <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
162
 
        <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
163
 
        <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
164
 
 
165
 
        <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
166
 
        <li><a href="callback.html">Command's action (callbacks)</a></li>
167
 
 
168
 
        <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
169
 
        <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
170
 
        <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
171
 
        <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
172
 
        <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
173
 
 
174
 
        <li><a href="disabled-menu.html">Disabled Menu</a></li>
175
 
        <li><a href="disabled.html">Disabled Command</a></li>
176
 
        <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
177
 
        <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
178
 
 
179
 
        <li><a href="accesskeys.html">Accesskeys</a></li>
180
 
        <li><a href="sub-menus.html">Submenus</a></li>
181
 
 
182
 
        <li class="current"><a href="input.html">Input Commands</a></li>
183
 
        <li><a href="custom-command.html">Custom Command Types</a></li>
184
 
        
185
 
        <li><a href="menu-title.html">Menus with titles</a></li>
186
 
 
187
 
        <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
188
 
        <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
189
 
        <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
190
 
    </ul>
191
 
    </div>
192
 
</body>
193
 
</html>
 
 
b'\\ No newline at end of file'