Extra zoekvenster: verschil tussen versies

Versie van 9 apr 2019 om 08:38

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

1 Verschillende realisatiemogelijkheden
2 Benodigde code
3 Zie ook

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-1">
<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 input-group centreren en de breedte responsive maken kan door het gebruik maken van .col- classes:

Beperkt aanpassen van vormgeving met style-elementen:

Meervoudige zoekvensters

Meervoudig zoekvenster voor het zoeken op eigenschap (alleen Semantic MediaWiki - bron TheaterEncyclopedie

<form class="navbar-form navbar-right" action="/w/index.php" id="semanticsearchform">
<div class="input-group">
   <span class="input-group-addon">1</span>
   <input id="semanticsearchInput0" type='hidden' name='title' value='Speciaal:OpEigenschapZoeken'/>
   <input id="semanticsearchInput1" type="search" class="search-query form-control" placeholder="Eigenschap" title="Speciaal:EigenschapZoeken" name="property" value="" autocomplete="off"/>
  <span class="input-group-addon">2</span>      
  <input id="semanticsearchInput2" type=“search" class="search-query form-control" placeholder="Selectiewaarde" name="value" value="" autocomplete="off"/>
      <span class="input-group-btn">
        <button class="btn btn-default" type="submit" id="smw-searchButton" >OK</button>
      </span>
</div><!-- /input-group -->
</form>

Met een select

Zie ook

Extra zoekvenster met behulp van GCSE
Extra zoekvenster voor DuckDuckGo

@@ Regel 111: / Regel 111: @@
 </div><!-- /input-group -->
 </form></pre>
+Met een <code>select</code>
+<html><form class="navbar-form navbar-right" action="/w/index.php" id="semanticsearchform">
+<div class="input-group">
+   <span class="input-group-addon">1</span>
+   <input id="semanticsearchInput0" type='hidden' name='title' value='Speciaal:OpEigenschapZoeken'/>
+   <select class="search-query form-control" id="inputGroupSelect02" name="property">
+    <option selected>Kiezen...</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+   <!--<input id="semanticsearchInput1" type="search" class="search-query form-control" placeholder="Eigenschap" title="Speciaal:EigenschapZoeken" name="property" value="" autocomplete="off"/>-->
+  <span class="input-group-addon">2</span>
+  <input id="semanticsearchInput2" type=“search" class="search-query form-control" placeholder="Selectiewaarde" name="value" value="" autocomplete="off"/>
+      <span class="input-group-btn">
+        <button class="btn btn-default" type="submit" id="smw-searchButton" >OK</button>
+      </span>
+</div><!-- /input-group -->
+</form></html>
 == Zie ook ==
 * Extra [[Google Custom Search Engine|zoekvenster met behulp van GCSE]]
 * Extra [[DuckDuckGo zoekformulier|zoekvenster voor DuckDuckGo]]