Skip to content

Commit 3f5cbd3

Browse files
valchevvalchev
committed
Make Menu, PanelBar and TabStrip code samples runnable.
1 parent 938c27d commit 3f5cbd3

File tree

3 files changed

+187
-133
lines changed

3 files changed

+187
-133
lines changed

‎api/javascript/ui/menu.md

Lines changed: 82 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -250,35 +250,39 @@ Refer to the example below for a list of the supported properties.
250250

251251
#### Example
252252

253-
$(document).ready(function() {
254-
$("#menu").kendoMenu({
255-
dataSource:
256-
[{
253+
<ul id="menu"></ul>
254+
<script>
255+
var imgUrl = "http://demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png";
256+
$(document).ready(function() {
257+
$("#menu").kendoMenu({
258+
dataSource:
259+
[{
257260
text: "Item 1",
258261
cssClass: "myClass", // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
259262
url: "http://www.kendoui.com" // Link URL if navigation is needed, optional.
260-
},
261-
{
262-
text: "<b>Item 2</b>",
263-
encoded: false, // Allows use of HTML for item text
264-
content: "text" // content within an item
265-
},
266-
{
267-
text: "Item 3",
268-
imageUrl: "http://www.kendoui.com/test.jpg", // Item image URL, optional.
269-
items: [{ // Sub item collection
270-
text: "Sub Item 1"
271-
},
272-
{
273-
text: "Sub Item 2"
274-
}]
275-
},
276-
{
277-
text: "Item 4",
278-
spriteCssClass: "imageClass3" // Item image sprite CSS class, optional.
279-
}]
280-
})
281-
});
263+
},
264+
{
265+
text: "<b>Item 2</b>",
266+
encoded: false, // Allows use of HTML for item text
267+
content: "text" // content within an item
268+
},
269+
{
270+
text: "Item 3",
271+
imageUrl: imgUrl, // Item image URL, optional.
272+
items: [{ // Sub item collection
273+
text: "Sub Item 1"
274+
},
275+
{
276+
text: "Sub Item 2"
277+
}]
278+
},
279+
{
280+
text: "Item 4",
281+
spriteCssClass: "imageClass3" // Item image sprite CSS class, optional.
282+
}]
283+
})
284+
});
285+
</script>
282286

283287
### direction `String`*(default: "default")*
284288

@@ -434,11 +438,13 @@ Appends an item to a **Menu** in the specified referenceItem's sub menu.
434438

435439
<ul id="menu"></ul>
436440
<script>
441+
//initialize the menu widget
442+
$("#menu").kendoMenu()
437443
// get a reference to the menu widget
438444
var menu = $("#menu").data("kendoMenu");
439-
//
440-
menu.append(
441-
[{
445+
446+
menu.append([
447+
{
442448
text: "Item 1",
443449
cssClass: "myClass", // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
444450
url: "http://www.telerik.com" // Link URL if navigation is needed, optional.
@@ -450,20 +456,13 @@ Appends an item to a **Menu** in the specified referenceItem's sub menu.
450456
},
451457
{
452458
text: "Item 3",
453-
imageUrl: "http://www.telerik.com/test.jpg", // Item image URL, optional.
454-
items: [{ // Sub item collection
455-
text: "Sub Item 1"
456-
},
457-
{
458-
text: "Sub Item 2"
459-
}]
459+
items: [{text: "Sub Item 1"},{text: "Sub Item 2"}] //Sub items
460460
},
461461
{
462462
text: "Item 4",
463463
spriteCssClass: "imageClass3" // Item image sprite CSS class, optional.
464-
}],
465-
referenceItem
466-
);
464+
}
465+
]);
467466
</script>
468467

469468
#### Parameters
@@ -503,8 +502,11 @@ Closes a sub-menu of a specified item(s) in a **Menu**.
503502
</li>
504503
</ul>
505504
<script>
505+
//intialize the menu widget
506+
$("#menu").kendoMenu();
506507
// get a reference to the menu widget
507508
var menu = $("#menu").data("kendoMenu");
509+
508510
// close the sub menu of "Item1"
509511
menu.close("#Item1");
510512
</script>
@@ -543,6 +545,7 @@ Prepares the **Menu** for safe removal from DOM. Detaches all event handlers and
543545
</li>
544546
</ul>
545547
<script>
548+
$("#menu").kendoMenu();
546549
var menu = $("#menu").data("kendoMenu");
547550

548551
// detach events
@@ -573,6 +576,7 @@ initialization by setting the **disabled="disabled"** on the desired menu item h
573576
</li>
574577
</ul>
575578
<script>
579+
$("#menu").kendoMenu();
576580
// get a reference to the menu widget
577581
var menu = $("#menu").data("kendoMenu");
578582
// disable the li menu item with the id "secondItem"
@@ -616,6 +620,7 @@ Inserts an item into a **Menu** after the specified referenceItem.
616620
</li>
617621
</ul>
618622
<script>
623+
$("#menu").kendoMenu();
619624
// get a reference to the menu widget
620625
var menu = $("#menu").data("kendoMenu");
621626
//
@@ -631,7 +636,6 @@ Inserts an item into a **Menu** after the specified referenceItem.
631636
},
632637
{
633638
text: "Item 3",
634-
imageUrl: "http://www.telerik.com/test.jpg", // Item image URL, optional.
635639
items: [{ // Sub item collection
636640
text: "Sub Item 1"
637641
},
@@ -684,6 +688,7 @@ Inserts an item into a **Menu** before the specified referenceItem.
684688
</li>
685689
</ul>
686690
<script>
691+
$("#menu").kendoMenu();
687692
// get a reference to the menu widget
688693
var menu = $("#menu").data("kendoMenu");
689694
//
@@ -752,6 +757,7 @@ Opens a sub-menu of a specified item(s) in a **Menu**.
752757
</li>
753758
</ul>
754759
<script>
760+
$("#menu").kendoMenu();
755761
// get a reference to the menu widget
756762
var menu = $("#menu").data("kendoMenu");
757763
// open the sub menu of "Item1"
@@ -791,6 +797,7 @@ Removes a specified item(s) from a **Menu**.
791797
</li>
792798
</ul>
793799
<script>
800+
$("#menu").kendoMenu();
794801
// get a reference to the menu widget
795802
var menu = $("#menu").data("kendoMenu");
796803
// remove the item with the id "Item1"
@@ -864,12 +871,13 @@ The closed item
864871
</li>
865872
</ul>
866873
<script>
867-
// get a reference to the menu widget
868-
var menu = $("#menu").data("kendoMenu");
869-
// bind to the close event
870-
menu.bind("close", function(e) {
871-
// handle event
872-
});
874+
$("#menu").kendoMenu();
875+
// get a reference to the menu widget
876+
var menu = $("#menu").data("kendoMenu");
877+
// bind to the close event
878+
menu.bind("close", function(e) {
879+
// handle event
880+
});
873881
</script>
874882

875883
### open
@@ -927,12 +935,13 @@ The opened item
927935
</li>
928936
</ul>
929937
<script>
930-
// get a reference to the menu widget
931-
var menu = $("#menu").data("kendoMenu");
932-
// bind to the open event
933-
menu.bind("open", function(e) {
934-
// handle event
935-
});
938+
$("#menu").kendoMenu();
939+
// get a reference to the menu widget
940+
var menu = $("#menu").data("kendoMenu");
941+
// bind to the open event
942+
menu.bind("open", function(e) {
943+
// handle event
944+
});
936945
</script>
937946

938947
### activate
@@ -990,12 +999,13 @@ The activated item
990999
</li>
9911000
</ul>
9921001
<script>
993-
// get a reference to the menu widget
994-
var menu = $("#menu").data("kendoMenu");
995-
// bind to the activate event
996-
menu.bind("activate", function(e) {
997-
// handle event
998-
});
1002+
$("#menu").kendoMenu();
1003+
// get a reference to the menu widget
1004+
var menu = $("#menu").data("kendoMenu");
1005+
// bind to the activate event
1006+
menu.bind("activate", function(e) {
1007+
// handle event
1008+
});
9991009
</script>
10001010

10011011
### deactivate
@@ -1053,12 +1063,13 @@ The deactivated item
10531063
</li>
10541064
</ul>
10551065
<script>
1056-
// get a reference to the menu widget
1057-
var menu = $("#menu").data("kendoMenu");
1058-
// bind to the deactivate event
1059-
menu.bind("deactivate", function(e) {
1060-
// handle event
1061-
});
1066+
$("#menu").kendoMenu();
1067+
// get a reference to the menu widget
1068+
var menu = $("#menu").data("kendoMenu");
1069+
// bind to the deactivate event
1070+
menu.bind("deactivate", function(e) {
1071+
// handle event
1072+
});
10621073
</script>
10631074

10641075
### select
@@ -1116,11 +1127,12 @@ The selected item
11161127
</li>
11171128
</ul>
11181129
<script>
1119-
// get a reference to the menu widget
1120-
var menu = $("#menu").data("kendoMenu");
1121-
// bind to the select event
1122-
menu.bind("select", function(e) {
1123-
// handle event
1124-
});
1130+
$("#menu").kendoMenu();
1131+
// get a reference to the menu widget
1132+
var menu = $("#menu").data("kendoMenu");
1133+
// bind to the select event
1134+
menu.bind("select", function(e) {
1135+
// handle event
1136+
});
11251137
</script>
11261138

0 commit comments

Comments
 (0)