MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus Dokumentation
Wechseln zu:Navigation, Suche
Zeile 1: Zeile 1:
−
var testtree = [
+
$(function(){
−
  {
+
    $("#simple-treeview").dxTreeView({
−
     text: "Parent 1",
+
        items: products,
−
     nodes: [
+
        width: 300,
−
      {
+
        onItemClick: function(e) {
−
        text: "Child 1",
+
            var item = e.itemData;
−
         nodes: [
+
            if(item.price) {
−
          {
+
                $("#product-details").removeClass("hidden");
−
             text: "Google",
+
                $("#product-details > img").attr("src", item.image);
−
             href: "https://www.google.com"
+
                $("#product-details > .price").text("$" + item.price);
−
          },
+
                $("#product-details > .name").text(item.text);
−
          {
+
            } else {
−
             text: "Twitter",
+
                $("#product-details").addClass("hidden");
−
             href: "https://www.twitter.com"
+
            }
−
          }
+
        }
−
         ]
+
    }).dxTreeView("instance");
−
      },
+
});
−
      {
+
 
−
         text: "Facebook",
+
var products = [{
−
         href: "https://www.facebook.com"
+
    id: "1",
−
      }
+
     text: "Stores",
−
     ]
+
     expanded: true,
−
  },
+
    items: [{
−
  {
+
        id: "1_1",
−
     text: "Google",
+
        text: "Super Mart of the West",
−
    href: "https://www.google.com"
+
        expanded: true,
−
  },
+
        items: [{
−
  {
+
            id: "1_1_1",
−
    text: "Twitter",
+
            text: "Video Players",
−
    href: "https://www.twitter.com",
+
            items: [{
−
    tags: ["link"]
+
                id: "1_1_1_1",
−
  }
+
                text: "HD Video Player",
−
];
+
                price: 220,
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/1.png"
 +
            }, {
 +
                id: "1_1_1_2",
 +
                text: "SuperHD Video Player",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/2.png",
 +
                price: 270
 +
            }]
 +
         }, {
 +
            id: "1_1_2",
 +
            text: "Televisions",
 +
            expanded: true,
 +
            items: [{
 +
                id: "1_1_2_1",
 +
                text: "SuperLCD 42",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/7.png",
 +
                price: 1200
 +
            }, {
 +
                id: "1_1_2_2",
 +
                text: "SuperLED 42",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/5.png",
 +
                price: 1450
 +
             }, {
 +
                id: "1_1_2_3",
 +
                text: "SuperLED 50",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/4.png",
 +
                price: 1600
 +
             }, {
 +
                id: "1_1_2_4",
 +
                text: "SuperLCD 55",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/6.png",
 +
                price: 1350
 +
            }, {
 +
                id: "1_1_2_5",
 +
                text: "SuperLCD 70",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/9.png",
 +
                price: 4000
 +
            }]
 +
        }, {
 +
            id: "1_1_3",
 +
             text: "Monitors",
 +
             expanded: true,
 +
            items: [{
 +
                id: "1_1_3_1",
 +
                text: "19\"",
 +
                expanded: true,
 +
                items: [{
 +
                    id: "1_1_3_1_1",
 +
                    text: "DesktopLCD 19",
 +
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/10.png",
 +
                    price: 160
 +
                }]
 +
            }, {
 +
                id: "1_1_3_2",
 +
                text: "21\"",
 +
                items: [{
 +
                    id: "1_1_3_2_1",
 +
                    text: "DesktopLCD 21",
 +
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/12.png",
 +
                    price: 170
 +
                }, {
 +
                    id: "1_1_3_2_2",
 +
                    text: "DesktopLED 21",
 +
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/13.png",
 +
                    price: 175
 +
                }]
 +
            }]
 +
        }, {
 +
            id: "1_1_4",
 +
            text: "Projectors",
 +
            items: [{
 +
                id: "1_1_4_1",
 +
                text: "Projector Plus",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/14.png",
 +
                price: 550
 +
            }, {
 +
                id: "1_1_4_2",
 +
                text: "Projector PlusHD",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/15.png",
 +
                price: 750
 +
            }]
 +
         }]
 +
 
 +
    }, {
 +
        id: "1_2",
 +
        text: "Braeburn",
 +
        items: [{
 +
            id: "1_2_1",
 +
            text: "Video Players",
 +
            items: [{
 +
                id: "1_2_1_1",
 +
                text: "HD Video Player",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/1.png",
 +
                price: 240
 +
            }, {
 +
                id: "1_2_1_2",
 +
                text: "SuperHD Video Player",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/2.png",
 +
                price: 300
 +
            }]
 +
         }, {
 +
            id: "1_2_2",
 +
            text: "Televisions",
 +
            items: [{
 +
                id: "1_2_2_1",
 +
                text: "SuperPlasma 50",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/3.png",
 +
                price: 1800
 +
            }, {
 +
                id: "1_2_2_2",
 +
                text: "SuperPlasma 65",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/8.png",
 +
                price: 3500
 +
            }]
 +
         }, {
 +
            id: "1_2_3",
 +
            text: "Monitors",
 +
            items: [{
 +
                id: "1_2_3_1",
 +
                text: "19\"",
 +
                items: [{
 +
                    id: "1_2_3_1_1",
 +
                    text: "DesktopLCD 19",
 +
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/10.png",
 +
                    price: 170
 +
                }]
 +
            }, {
 +
                id: "1_2_3_2",
 +
                text: "21\"",
 +
                items: [{
 +
                    id: "1_2_3_2_1",
 +
                    text: "DesktopLCD 21",
 +
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/12.png",
 +
                    price: 180
 +
                }, {
 +
                    id: "1_2_3_2_2",
 +
                    text: "DesktopLED 21",
 +
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/13.png",
 +
                    price: 190
 +
                }]
 +
            }]
 +
        }]
 +
 
 +
     }, {
 +
        id: "1_3",
 +
        text: "E-Mart",
 +
        items: [{
 +
            id: "1_3_1",
 +
            text: "Video Players",
 +
            items: [{
 +
                id: "1_3_1_1",
 +
                text: "HD Video Player",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/1.png",
 +
                price: 220
 +
            }, {
 +
                id: "1_3_1_2",
 +
                text: "SuperHD Video Player",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/2.png",
 +
                price: 275
 +
            }]
 +
        }, {
 +
            id: "1_3_3",
 +
            text: "Monitors",
 +
            items: [{
 +
                id: "1_3_3_1",
 +
                text: "19\"",
 +
                items: [{
 +
                    id: "1_3_3_1_1",
 +
                    text: "DesktopLCD 19",
 +
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/10.png",
 +
                    price: 165
 +
                }]
 +
            }, {
 +
                id: "1_3_3_2",
 +
                text: "21\"",
 +
                items: [{
 +
                    id: "1_3_3_2_1",
 +
                    text: "DesktopLCD 21",
 +
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/12.png",
 +
                    price: 175
 +
                }]
 +
            }]
 +
        }]
 +
     }, {
 +
        id: "1_4",
 +
        text: "Walters",
 +
        items: [{
 +
            id: "1_4_1",
 +
            text: "Video Players",
 +
            items: [{
 +
                id: "1_4_1_1",
 +
                text: "HD Video Player",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/1.png",
 +
                price: 210
 +
            }, {
 +
                id: "1_4_1_2",
 +
                text: "SuperHD Video Player",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/2.png",
 +
                price: 250
 +
            }]
 +
        }, {
 +
            id: "1_4_2",
 +
            text: "Televisions",
 +
            items: [{
 +
                id: "1_4_2_1",
 +
                text: "SuperLCD 42",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/7.png",
 +
                price: 1100
 +
            }, {
 +
                id: "1_4_2_2",
 +
                text: "SuperLED 42",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/5.png",
 +
                price: 1400
 +
            }, {
 +
                id: "1_4_2_3",
 +
                text: "SuperLED 50",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/4.png",
 +
                price: 1500
 +
            }, {
 +
                id: "1_4_2_4",
 +
                text: "SuperLCD 55",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/6.png",
 +
                price: 1300
 +
            }, {
 +
                id: "1_4_2_5",
 +
                text: "SuperLCD 70",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/9.png",
 +
                price: 4000
 +
            }, {
 +
                id: "1_4_2_6",
 +
                text: "SuperPlasma 50",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/3.png",
 +
                price: 1700
 +
            }]
 +
        }, {
 +
            id: "1_4_3",
 +
            text: "Monitors",
 +
            items: [{
 +
                id: "1_4_3_1",
 +
                text: "19\"",
 +
                items: [{
 +
                    id: "1_4_3_1_1",
 +
                    text: "DesktopLCD 19",
 +
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/10.png",
 +
                    price: 160
 +
                }]
 +
            }, {
 +
                id: "1_4_3_2",
 +
                text: "21\"",
 +
                items: [{
 +
                    id: "1_4_3_2_1",
 +
                    text: "DesktopLCD 21",
 +
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/12.png",
 +
                    price: 170
 +
                }, {
 +
                    id: "1_4_3_2_2",
 +
                    text: "DesktopLED 21",
 +
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/13.png",
 +
                    price: 180
 +
                }]
 +
            }]
 +
        }, {
 +
            id: "1_4_4",
 +
            text: "Projectors",
 +
            items: [{
 +
                id: "1_4_4_1",
 +
                text: "Projector Plus",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/14.png",
 +
                price: 550
 +
            }, {
 +
                id: "1_4_4_2",
 +
                text: "Projector PlusHD",
 +
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/15.png",
 +
                price: 750
 +
            }]
 +
        }]
 +
 
 +
    }]
 +
}];
 +
 
  
 
function initTree(treeData) {
 
function initTree(treeData) {

Version vom 15. Dezember 2020, 19:15 Uhr

$(function(){
    $("#simple-treeview").dxTreeView({ 
        items: products,
        width: 300,
        onItemClick: function(e) {
            var item = e.itemData;
            if(item.price) {
                $("#product-details").removeClass("hidden");
                $("#product-details > img").attr("src", item.image);
                $("#product-details > .price").text("$" + item.price);
                $("#product-details > .name").text(item.text);
            } else {
                $("#product-details").addClass("hidden");
            }
        }
    }).dxTreeView("instance");
});

var products = [{
    id: "1",
    text: "Stores",
    expanded: true,
    items: [{
        id: "1_1",
        text: "Super Mart of the West",
        expanded: true,
        items: [{
            id: "1_1_1",
            text: "Video Players",
            items: [{
                id: "1_1_1_1",
                text: "HD Video Player",
                price: 220,
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/1.png"
            }, {
                id: "1_1_1_2",
                text: "SuperHD Video Player",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/2.png",
                price: 270
            }]
        }, {
            id: "1_1_2",
            text: "Televisions",
            expanded: true,
            items: [{
                id: "1_1_2_1",
                text: "SuperLCD 42",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/7.png",
                price: 1200
            }, {
                id: "1_1_2_2",
                text: "SuperLED 42",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/5.png",
                price: 1450
            }, {
                id: "1_1_2_3",
                text: "SuperLED 50",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/4.png",
                price: 1600
            }, {
                id: "1_1_2_4",
                text: "SuperLCD 55",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/6.png",
                price: 1350
            }, {
                id: "1_1_2_5",
                text: "SuperLCD 70",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/9.png",
                price: 4000
            }]
        }, {
            id: "1_1_3",
            text: "Monitors",
            expanded: true,
            items: [{
                id: "1_1_3_1",
                text: "19\"",
                expanded: true,
                items: [{
                    id: "1_1_3_1_1",
                    text: "DesktopLCD 19",
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/10.png",
                    price: 160
                }]
            }, {
                id: "1_1_3_2",
                text: "21\"",
                items: [{
                    id: "1_1_3_2_1",
                    text: "DesktopLCD 21",
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/12.png",
                    price: 170
                }, {
                    id: "1_1_3_2_2",
                    text: "DesktopLED 21",
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/13.png",
                    price: 175
                }]
            }]
        }, {
            id: "1_1_4",
            text: "Projectors",
            items: [{
                id: "1_1_4_1",
                text: "Projector Plus",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/14.png",
                price: 550
            }, {
                id: "1_1_4_2",
                text: "Projector PlusHD",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/15.png",
                price: 750
            }]
        }]

    }, {
        id: "1_2",
        text: "Braeburn",
        items: [{
            id: "1_2_1",
            text: "Video Players",
            items: [{
                id: "1_2_1_1",
                text: "HD Video Player",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/1.png",
                price: 240
            }, {
                id: "1_2_1_2",
                text: "SuperHD Video Player",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/2.png",
                price: 300
            }]
        }, {
            id: "1_2_2",
            text: "Televisions",
            items: [{
                id: "1_2_2_1",
                text: "SuperPlasma 50",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/3.png",
                price: 1800
            }, {
                id: "1_2_2_2",
                text: "SuperPlasma 65",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/8.png",
                price: 3500
            }]
        }, {
            id: "1_2_3",
            text: "Monitors",
            items: [{
                id: "1_2_3_1",
                text: "19\"",
                items: [{
                    id: "1_2_3_1_1",
                    text: "DesktopLCD 19",
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/10.png",
                    price: 170
                }]
            }, {
                id: "1_2_3_2",
                text: "21\"",
                items: [{
                    id: "1_2_3_2_1",
                    text: "DesktopLCD 21",
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/12.png",
                    price: 180
                }, {
                    id: "1_2_3_2_2",
                    text: "DesktopLED 21",
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/13.png",
                    price: 190
                }]
            }]
        }]

    }, {
        id: "1_3",
        text: "E-Mart",
        items: [{
            id: "1_3_1",
            text: "Video Players",
            items: [{
                id: "1_3_1_1",
                text: "HD Video Player",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/1.png",
                price: 220
            }, {
                id: "1_3_1_2",
                text: "SuperHD Video Player",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/2.png",
                price: 275
            }]
        }, {
            id: "1_3_3",
            text: "Monitors",
            items: [{
                id: "1_3_3_1",
                text: "19\"",
                items: [{
                    id: "1_3_3_1_1",
                    text: "DesktopLCD 19",
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/10.png",
                    price: 165
                }]
            }, {
                id: "1_3_3_2",
                text: "21\"",
                items: [{
                    id: "1_3_3_2_1",
                    text: "DesktopLCD 21",
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/12.png",
                    price: 175
                }]
            }]
        }]
    }, {
        id: "1_4",
        text: "Walters",
        items: [{
            id: "1_4_1",
            text: "Video Players",
            items: [{
                id: "1_4_1_1",
                text: "HD Video Player",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/1.png",
                price: 210
            }, {
                id: "1_4_1_2",
                text: "SuperHD Video Player",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/2.png",
                price: 250
            }]
        }, {
            id: "1_4_2",
            text: "Televisions",
            items: [{
                id: "1_4_2_1",
                text: "SuperLCD 42",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/7.png",
                price: 1100
            }, {
                id: "1_4_2_2",
                text: "SuperLED 42",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/5.png",
                price: 1400
            }, {
                id: "1_4_2_3",
                text: "SuperLED 50",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/4.png",
                price: 1500
            }, {
                id: "1_4_2_4",
                text: "SuperLCD 55",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/6.png",
                price: 1300
            }, {
                id: "1_4_2_5",
                text: "SuperLCD 70",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/9.png",
                price: 4000
            }, {
                id: "1_4_2_6",
                text: "SuperPlasma 50",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/3.png",
                price: 1700
            }]
        }, {
            id: "1_4_3",
            text: "Monitors",
            items: [{
                id: "1_4_3_1",
                text: "19\"",
                items: [{
                    id: "1_4_3_1_1",
                    text: "DesktopLCD 19",
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/10.png",
                    price: 160
                }]
            }, {
                id: "1_4_3_2",
                text: "21\"",
                items: [{
                    id: "1_4_3_2_1",
                    text: "DesktopLCD 21",
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/12.png",
                    price: 170
                }, {
                    id: "1_4_3_2_2",
                    text: "DesktopLED 21",
                    image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/13.png",
                    price: 180
                }]
            }]
        }, {
            id: "1_4_4",
            text: "Projectors",
            items: [{
                id: "1_4_4_1",
                text: "Projector Plus",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/14.png",
                price: 550
            }, {
                id: "1_4_4_2",
                text: "Projector PlusHD",
                image: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/15.png",
                price: 750
            }]
        }]

    }]
}];


function initTree(treeData) {
    $('#tree').treeview({
        data: treeData,
        enableLinks: true
    });
    
    // collapses all nodes
    $('#tree').treeview('collapseAll', { silent: true });
}

initTree(tree);




$.fn.extend({
    treed: function (o) {
      
      var openedClass = 'glyphicon-minus-sign';
      var closedClass = 'glyphicon-plus-sign';
      
      if (typeof o != 'undefined'){
        if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
        }
        if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
        }
      };
      
        //initialize each of the top levels
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this); //li with children ul
            branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(openedClass + " " + closedClass);
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();
        });
        //fire event from the dynamically added icon
      tree.find('.branch .indicator').each(function(){
        $(this).on('click', function () {
            $(this).closest('li').click();
        });
      });
        //fire event to open branch if the li contains an anchor instead of text
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        //fire event to open branch if the li contains a button instead of text
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
    }
});

//Initialization of treeviews

$('#tree2').treed({openedClass:'glyphicon-folder-open', closedClass:'glyphicon-folder-close'});
Abgerufen von „https://wiki.tandler.com/index.php?title=MediaWiki:Common.js&oldid=3010“