Edurep:Widget: verschil tussen versies
Naar navigatie springen
Naar zoeken springen
k |
(meer) |
||
| Regel 1: | Regel 1: | ||
| − | Het implementeren van de Edurep Widget op een website is vrij eenvoudig. Het enige wat vereist is, is het invoegen van een klein stukje |
+ | Het implementeren van de Edurep Widget op een website is vrij eenvoudig. Het enige wat vereist is, is het invoegen van een klein stukje JavaScript. |
| + | == Inbedden in HTML == |
||
| ⚫ | |||
| + | De JavaScript wordt in het onderstaande voorbeeld ingebed in een HTML pagina. In de configuratie kunnen een aantal velden worden ingevuld: |
||
| + | * title: de titel komt bovenaan de widget te staan |
||
| + | * description: een korte beschrijving over waar de widget naar zoekt |
||
| + | * border: teken een lijn om de widget |
||
| + | * bordered: laat witruimte tussen de rand en de content van de widget |
||
| + | * showExport: laat de uitvoer functionaliteit zien |
||
| + | |||
| + | {| |
||
| ⚫ | |||
<html> |
<html> |
||
<body> |
<body> |
||
| Regel 9: | Regel 18: | ||
EdurepWidget.config = { |
EdurepWidget.config = { |
||
widget:{ |
widget:{ |
||
| − | title: "de Edurep Widget", |
+ | title: "de Edurep Widget", |
description: "Zoek hier naar digitaal lesmateriaal", |
description: "Zoek hier naar digitaal lesmateriaal", |
||
bordered: true, |
bordered: true, |
||
| Regel 17: | Regel 26: | ||
}; |
}; |
||
</script> |
</script> |
||
| − | |||
<div style="width:280px"> |
<div style="width:280px"> |
||
| − | <div id="eduwidget"></div> |
+ | <div id="eduwidget"></div> |
</div> |
</div> |
||
</body> |
</body> |
||
</html> |
</html> |
||
</syntaxhighlight> |
</syntaxhighlight> |
||
| + | | valign="top"| [[File:Edurepwidget.png]] |
||
| + | |} |
||
| + | == Filters == |
||
| + | Het is ook mogelijk om voorgedefineerde filters mee te geven in de aanroep van de widget. |
||
| + | <syntaxhighlight lang="javascript"> |
||
| + | var EdurepWidget={}; |
||
| + | EdurepWidget.config = { |
||
| + | widget:{ |
||
| + | title: "", |
||
| + | description: "Zoek hier naar gratis digitaal lesmateriaal voor het MBO", |
||
| + | bordered: true, |
||
| + | border: true, |
||
| + | showExport: false |
||
| + | }, |
||
| + | filters:[ |
||
| + | { |
||
| + | name: 'lom.classification.educationallevel.id', |
||
| + | values: [ |
||
| + | { |
||
| + | label:'MBO', |
||
| + | value:'caa97efc-a713-41ea-a845-1534ca65eac9' |
||
| + | } |
||
| + | ] |
||
| + | }, |
||
| + | { |
||
| + | name: 'lom.rights.cost', |
||
| + | values: [{label: 'Gratis', value: 'no'}] |
||
| + | } |
||
| + | ] |
||
| + | }; |
||
| + | </syntaxhighlight> |
||
[[Categorie:Edurep]] |
[[Categorie:Edurep]] |
||
Versie van 24 sep 2013 16:37
Het implementeren van de Edurep Widget op een website is vrij eenvoudig. Het enige wat vereist is, is het invoegen van een klein stukje JavaScript.
Inbedden in HTML
De JavaScript wordt in het onderstaande voorbeeld ingebed in een HTML pagina. In de configuratie kunnen een aantal velden worden ingevuld:
- title: de titel komt bovenaan de widget te staan
- description: een korte beschrijving over waar de widget naar zoekt
- border: teken een lijn om de widget
- bordered: laat witruimte tussen de rand en de content van de widget
- showExport: laat de uitvoer functionaliteit zien
<html>
<body>
<script type="text/javascript" src="//widget.edurep.nl/latest/js/init.js"></script>
<script type="text/javascript">
var EdurepWidget={};
EdurepWidget.config = {
widget:{
title: "de Edurep Widget",
description: "Zoek hier naar digitaal lesmateriaal",
bordered: true,
border: true,
showExport: false
}
};
</script>
<div style="width:280px">
<div id="eduwidget"></div>
</div>
</body>
</html>
|
|
Filters
Het is ook mogelijk om voorgedefineerde filters mee te geven in de aanroep van de widget.
var EdurepWidget={};
EdurepWidget.config = {
widget:{
title: "",
description: "Zoek hier naar gratis digitaal lesmateriaal voor het MBO",
bordered: true,
border: true,
showExport: false
},
filters:[
{
name: 'lom.classification.educationallevel.id',
values: [
{
label:'MBO',
value:'caa97efc-a713-41ea-a845-1534ca65eac9'
}
]
},
{
name: 'lom.rights.cost',
values: [{label: 'Gratis', value: 'no'}]
}
]
};