Extra zoekvenster: verschil tussen versies
Uit MediaWikiGids
(→Code bij gebruik van raw-html) |
|||
| Regel 53: | Regel 53: | ||
<html><form class="" action="/w/index.php" id="searchform"> | <html><form class="" action="/w/index.php" id="searchform"> | ||
<div class="input-group input-group-lg" style="width: 80%;"> | <div class="input-group input-group-lg" style="width: 80%;"> | ||
| + | <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> | ||
| + | <input id="searchInput" type="search" class="search-query form-control" type="search" accesskey="f" title="Speciaal:Zoeken [ctrl-option-f]" placeholder="Zoeken" name="search" value="" autocomplete="off"> | ||
| + | <span class="input-group-btn"> | ||
| + | <button class="btn btn-default" type=“submit” id="mw-searchButton" >OK</button> | ||
| + | </span> | ||
| + | </div><!-- /input-group --> | ||
| + | </form></html> | ||
| + | |||
| + | De breedte ''responsive'' maken kan door het gebruik maken van <code>.col-</code> classes: | ||
| + | |||
| + | <html><form class="" action="/w/index.php" id="searchform"> | ||
| + | <div class="col-md-2"></div> | ||
| + | <div class="input-group input-group-lg col-sm-12 col-md-8"> | ||
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> | <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> | ||
<input id="searchInput" type="search" class="search-query form-control" type="search" accesskey="f" title="Speciaal:Zoeken [ctrl-option-f]" placeholder="Zoeken" name="search" value="" autocomplete="off"> | <input id="searchInput" type="search" class="search-query form-control" type="search" accesskey="f" title="Speciaal:Zoeken [ctrl-option-f]" placeholder="Zoeken" name="search" value="" autocomplete="off"> | ||
Versie van 25 mrt 2019 om 15:59
De meeste skins voor MediaWiki voorzien in een zoekvenster. Toch is een veel voorkomende vraag naar zoekvensters op flexibele plaatsen in de wikitekst zelf. Standaard voorziet MediaWiki niet in deze behoefte.
Inhoud
Verschillende realisatiemogelijkheden
Er is een drietal verschillende mogelijkheden om een extra zoekvenster te maken:
- Via de extensie Inputbox
- Met behulp van de extensie Widgets
- Met behulp van de extensie waarmee "raw html" mogelijk wordt gemaakt.
Benodigde code
Code bij gebruik van widget
Zie enkele operationele voorbeelden:
- Standaard zoeken widget op de TheaterEncyclopedie
- Semantisch zoeken widget op de TheaterEncyclopedie
Code bij gebruik van raw-html
De vormgeving bij deze voorbeeld-code is gebaseerd op Bootstrap:
<html><form class="" action="/w/index.php" id="searchform">
<div class="form-group input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
<input id="searchInput" type="search" class="search-query form-control" type="search" accesskey="f" title="Speciaal:Zoeken [ctrl-option-f]" placeholder="Zoeken" name="search" value="" autocomplete="off">
<span class="input-group-btn">
<button class="btn btn-default" type=“submit” id="mw-searchButton" >OK</button>
</span>
</div><!-- /input-group -->
</form></html>
Het resultaat is als volgt (NB: alleen als $wgRawHtml = true; in LocalSettings.php
De class="form-group" is/lijkt niet noodzakelijk
De grootte kan aangepast worden met een extra class voor de input-group:
... <div class="input-group input-group-lg" style="width:80%"> ...
De breedte responsive maken kan door het gebruik maken van .col- classes: