無定製化狀態時

使用自定義元素mf-search-box

代碼

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"></mf-search-box>

渲染結果

通常把搜索窗口放在網站頁面右上角的典型示例

代碼

添加CSS

  <style>
  .my-search-box {
    width: 300px;
  }
  .my-search-box .mf_finder_searchBox_submit {
    padding: 0;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   <a target="_blank" href="../../doc/tw/SearchBox_tw.html#prop_options-hidden">options-hidden
   <a target="_blank" href="../../doc/tw/SearchBox_tw.html#prop_doctype-hidden">doctype-hidden
   <a target="_blank" href="../../doc/tw/SearchBox_tw.html#prop_ignore-search-result">ignore-search-result
   <a target="_blank" href="../../doc/tw/SearchBox_tw.html#prop_placeholder">placeholder="站內搜索"
   <a target="_blank" href="../../doc/tw/SearchBox_tw.html#prop_submit-text">submit-text=""
   ></mf-search-box>

渲染結果

接收到搜索結果時，忽略數據而不反映在表單上

使用屬性 ignore-search-result

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-ignore-search-result .mf_finder_searchBox_query_input {
    background-color: pink;
    color: black;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-ignore-search-result"
   ignore-search-result
   ></mf-search-box>

渲染結果

在搜索字詞輸入區域中自定義佔位符

使用屬性 placeholder

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-placeholder .mf_finder_searchBox_query_input {
    background-color: pink;
    color: black;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-placeholder"
   placeholder="輸入搜索詞"
   ></mf-search-box>

渲染結果

在索尋字詞輸入區域中自定義title屬性

使用屬性 input-title

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-input-title .mf_finder_searchBox_query_input {
    background-color: pink;
    color: black;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-input-title"
   placeholder="把鼠标悬停在這裏"
   input-title="這是索尋字詞輸入區域"
   ></mf-search-box>

渲染結果

隱藏類別選擇UI

使用屬性 category-hidden

代碼

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   category-hidden
   ></mf-search-box>

渲染結果

隱藏搜索結果排序順序的選擇UI

使用屬性 sort-hidden

代碼

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   sort-hidden
   ></mf-search-box>

渲染結果

隱藏選擇每頁顯示最大項目數量的UI

使用屬性 pagemax-hidden

代碼

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   pagemax-hidden
   ></mf-search-box>

渲染結果

隱藏選擇圖像大小的UI

使用屬性 imgsize-hidden

代碼

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   imgsize-hidden
   ></mf-search-box>

渲染結果

同時隱藏用於選擇類別，搜索結果排序順序，每頁顯示項目數量和圖像大小的UI

利用屬性 options-hidden

代碼

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   options-hidden
   ></mf-search-box>

渲染結果

隱藏文檔類型選擇UI

利用屬性 doctype-hidden

代碼

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   doctype-hidden
   ></mf-search-box>

渲染結果

使用屬性“submit-text”自定義搜索按鈕的文本

利用屬性 submit-text

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-submit-text .mf_finder_searchBox_submit span {
    background-color: pink;
    color: black;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-submit-text"
   submit-text="搜索"
   ></mf-search-box>

渲染結果

為文檔類型選擇框中的選項”ALL”自定義顯示文字

利用屬性 doctype-all-text

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-doctype-all-text .mf_finder_searchBox_doctype_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-doctype-all-text"
   doctype-all-text="全部"
   ></mf-search-box>

渲染結果

為分類選擇框中的“All ”選項自定義顯示文字

利用屬性 category-all-text

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-category-all-text .mf_finder_searchBox_category_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-category-all-text"
   category-all-text="所有類別"
   ></mf-search-box>

渲染結果

自定義搜索結果排序選擇框的顯示文字

使用屬性 sort-text-csv

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-sort-text-csv .mf_finder_searchBox_sort_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-sort-text-csv"
   sort-text-csv="最優匹配,最近更新"
   ></mf-search-box>

渲染結果

自定義每頁最大顯示結果數量選項值

使用屬性 pagemax-csv

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-pagemax-csv .mf_finder_searchBox_pagemax_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-pagemax-csv"
   pagemax-csv="10,50,100"
   ></mf-search-box>

渲染結果

自定義圖像大小選擇框的顯示文字

使用屬性 imgsize-text-csv

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-imgsize-text-csv .mf_finder_searchBox_imgsize_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-imgsize-text-csv"
   imgsize-text-csv="不顯示圖片,小圖片,中圖片,大圖片"
   ></mf-search-box>

渲染結果

使用屬性 use-links

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-use-links .mf_finder_searchBox_links {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-use-links"
   use-links
   ></mf-search-box>

渲染結果

使用鏈接時顯示語言設置

如果使用屬屬性 use-links 作為鏈接顯示， 則可以通過將屬性lang設置為自定義元素的上部元素(也可以在body標籤設置)
或自定義元素本身來切換鏈接的顯示語言

代碼

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   use-links
   lang="zh-tw"
   ></mf-search-box>

渲染結果

搜索條件選擇UI使用選擇框的切換按鈕顯示

使用屬性 use-toggle切換。

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-use-toggle .mf_finder_searchBox_selects .mf_finder_searchBox_toggle * {
    background-color: pink;
  }
  .my-use-toggle .mf_finder_searchBox_selects .mf_finder_searchBox_misc {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-use-toggle"
   use-toggle
   ></mf-search-box>

渲染結果

検索結果