Extra zoekvenster: verschil tussen versies

Uit MediaWikiGids
Ga naar: navigatie, zoeken
(→‎Code bij gebruik van raw-html)
(→‎Meervoudige zoekvensters)
 
(17 tussenliggende versies door dezelfde gebruiker niet weergegeven)
Regel 20: Regel 20:
 
De vormgeving bij deze voorbeeld-code is gebaseerd op Bootstrap:  
 
De vormgeving bij deze voorbeeld-code is gebaseerd op Bootstrap:  
 
<pre>
 
<pre>
−
<html><form class="" action="/w/index.php" id="searchform">
+
<html><form class="" action="/w/index.php" id="searchform-1">
 
<div class="form-group input-group">
 
<div class="form-group input-group">
 
   <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
 
   <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
Regel 32: Regel 32:
  
 
Het resultaat is als volgt (NB: alleen als <code>$wgRawHtml = true;</code> in LocalSettings.php
 
Het resultaat is als volgt (NB: alleen als <code>$wgRawHtml = true;</code> in LocalSettings.php
−
<html><form class="" action="/w/index.php" id="searchform">
+
<html><form class="" action="/w/index.php" id="searchform-1">
 
<div class="form-group input-group">
 
<div class="form-group input-group">
 
   <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
 
   <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
Regel 41: Regel 41:
 
</div><!-- /input-group -->
 
</div><!-- /input-group -->
 
</form></html>
 
</form></html>
 +
 +
De <code>class="form-group"</code> is/lijkt niet noodzakelijk
 +
 +
De grootte kan aangepast worden met een extra <code>class</code> voor de <code>input-group</code>:
 +
<pre>
 +
...
 +
<div class="input-group input-group-lg" style="width:80%">
 +
...
 +
</pre>
 +
 +
<html><form class="" action="/w/index.php" id="searchform-2">
 +
<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 <code>input-group</code> centreren en de breedte ''responsive'' maken kan door het gebruik maken van <code>.col-</code> classes:
 +
 +
<html><form class="" action="/w/index.php" id="searchform-3">
 +
<div class="input-group input-group-lg col-sm-12 col-md-8 col-md-offset-2">
 +
  <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>
 +
 +
<html><form class="" action="/w/index.php" id="searchform-4">
 +
<div class="input-group input-group-lg col-sm-12 col-md-8 col-md-offset-2">
 +
      <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-success" type=“submit” id="mw-searchButton" ><i class="glyphicon glyphicon-search"></i></button>
 +
      </span>
 +
</div><!-- /input-group -->
 +
</form></html>
 +
 +
Beperkt aanpassen van vormgeving met <code>style</code>-elementen:
 +
 +
<html><form class="" action="/w/index.php" id="searchform-5">
 +
<div class="input-group input-group-lg col-sm-12 col-md-8 col-md-offset-2">
 +
  <span class="input-group-addon" style="border-color: #AC0021; background-color: #BC0031; color: white;"><i class="glyphicon glyphicon-search"></i></span>
 +
  <input id="searchInput" type="search" class="search-query form-control" style="border-color: #BC0031;" 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-primary" style="border-color: #BC0031;" type=“submit” id="mw-searchButton" >OK</button>
 +
      </span>
 +
</div><!-- /input-group -->
 +
</form></html>
 +
 +
=== Meervoudige zoekvensters ===
 +
 +
Meervoudig zoekvenster voor het zoeken op eigenschap (alleen Semantic MediaWiki - bron [https://theaterencyclopedie.nl/wiki/Widget:BS-SMW-zoeken-test8 TheaterEncyclopedie]
 +
 +
<pre>
 +
<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></pre>
 +
 +
Met een <code>select</code> kun je een meerkeuze invulveld realiseren. '''NB:''' Dit is ''geen standaard'' Bootstrap 3. Er is handmatig extra styling toegevoegd.
 +
 +
<html>
 +
<style>
 +
.custom-select {
 +
  display: inline-block;
 +
  width: 100%;
 +
  height: 34px; //calc(2.25rem + 2px); - aangepast door BM
 +
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
 +
  line-height: 1.5;
 +
  color: #495057;
 +
  vertical-align: middle;
 +
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
 +
  background-size: 8px 10px;
 +
  border: 1px solid #ced4da;
 +
  border-radius: 0.25rem;
 +
  -webkit-appearance: none;
 +
  -moz-appearance: none;
 +
  appearance: none;
 +
}
 +
 +
.custom-select:focus {
 +
  border-color: #80bdff;
 +
  outline: 0;
 +
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(128, 189, 255, 0.5);
 +
}
 +
 +
.custom-select:focus::-ms-value {
 +
  color: #495057;
 +
  background-color: #fff;
 +
}
 +
 +
.custom-select[multiple], .custom-select[size]:not([size="1"]) {
 +
  height: auto;
 +
  padding-right: 0.75rem;
 +
  background-image: none;
 +
}
 +
 +
.custom-select:disabled {
 +
  color: #6c757d;
 +
  background-color: #e9ecef;
 +
}
 +
 +
.custom-select::-ms-expand {
 +
  opacity: 0;
 +
}
 +
 +
.custom-select-sm {
 +
  height: calc(1.8125rem + 2px);
 +
  padding-top: 0.375rem;
 +
  padding-bottom: 0.375rem;
 +
  font-size: 75%;
 +
}
 +
 +
.custom-select-lg {
 +
  height: calc(2.875rem + 2px);
 +
  padding-top: 0.375rem;
 +
  padding-bottom: 0.375rem;
 +
  font-size: 125%;
 +
}
 +
</style>
 +
<form class="" action="/w/index.php" id="semanticsearchform">
 +
<div class="input-group col-sm-12 col-md-8 col-md-offset-2">
 +
  <span class="input-group-addon">1</span>
 +
  <input id="semanticsearchInput0" type='hidden' name='title' value='Speciaal:OpEigenschapZoeken'/>
 +
 +
  <select class="custom-select form-control" id="inputGroupSelect02" name="property">
 +
    <option selected disabled>Kies eigenschap...</option>
 +
    <option value="Adlib">Adlib</option>
 +
    <option value="Afbeelding">Afbeelding</option>
 +
    <option value="Beroep">Beroep</option>
 +
    <option value="Bijnaam">Bijnaam</option>
 +
    <option value="DBNL">DBNL</option>
 +
    <option value="Discipline">Discipline</option>
 +
    <option value="Geboortedatum">Geboortedatum</option>
 +
    <option value="Geboorteplaats">Geboorteplaats</option>
 +
    <option value="IMDB">IMDB</option>
 +
    <option value="Naam">Naam</option>
 +
    <option value="Overlijdensdatum">Overlijdensdatum</option>
 +
    <option value="Overlijdensplaats">Overlijdensplaats</option>
 +
    <option value="Sorteernaam">Overlijdensplaats</option>
 +
    <option value="VIAF">VIAF</option>
 +
    <option value="Categorieën">Categorieën</option>
 +
    <option value="Wijzigingsdatum">Wijzigingsdatum</option>
 +
  </select>
 +
 +
  <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]]

Huidige versie van 10 apr 2019 om 16:21

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.

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:

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 kun je een meerkeuze invulveld realiseren. NB: Dit is geen standaard Bootstrap 3. Er is handmatig extra styling toegevoegd.

1 2

Zie ook

Overgenomen van "http://gids.wikiwerkers.nl/w/index.php?title=Extra_zoekvenster&oldid=746"