【PrimeFaces】PrimeFaces元件 CSS客製化 - Part5：其他元件範例

tags: PrimeFaces CSS

SelectOneMenu

• 調整字型大小
  1. xhtml

  <p:column filterBy="#{invoiceList.invoiceStatus}" styleClass="selectLabelWidth">
      <f:facet name="filter">
  	<p:selectOneMenu onchange="PF('invoicesWidget').filter()" styleClass="selectLabelFont selectLabelWidth"	panelStyleClass="selectItemFont">
  	    <f:selectItem itemLabel="选择" />
  		<f:selectItems value="#{invoiceListAction.invoiceFilterOptionEntity.invoiceStatuses}" />
  	</p:selectOneMenu>
      </f:facet>
  </p:column>
  

  2. css

  .selectLabelFont .ui-selectonemenu-label {
      font-size: smaller !important;
  }
  .selectItemFont {
      font-size: smaller !important;
  }
  

CommandLink

• 調整 link 各種狀態的color

    /* 未連結 */
    linkColor:link{ color: #000000;}
    /* 已連結過 */
    linkColor:visited{ color: #FF0000;}
    /* 滑鼠移至連結 */
    linkColor:hover{ color: #00FF00;}
    /* 選擇的連結 */
    linkColor:active{ color: #0000FF;}
  

BlockUI

• 用div、img客製化BlockUI，以下為範例code
  1. xhtml，專案須包含 jquery-3.1.1.min.js

  <link rel="stylesheet" type="text/css" href="/InvoiceProc-portlet/css/blockUI.css"></link>
  <script type="text/javascript">
      $("body").css("overflow", "hidden");
      var blockUI = document.createElement("div");
  	blockUI.setAttribute("id", "blockUI");
  	blockUI.innerHTML = '<div id="innerDiv"><img src="/InvoiceProc-portlet/images/loading.gif"/>请稍候，资料载入中...</div>'
  	document.body.appendChild(blockUI);
      $(document).ready(function() {
  	$("#blockUI").remove();
  	$("body").css("overflow", "auto");
      });
  </script>
  

  2. css

  #blockUI {
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      width: 100%;
      height: 100%;
      background-color: rgba(45, 89, 114, 0.3);
  }
  #innerDiv {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -110px;
      text-align: center;
      padding: 1em;
      border: 1px solid #a8a8a8;
      background: #ffffff;
      color: #4f4f4f;
      border-radius: 3px;
      box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.8);
  }
  

Reference

1. PrimeFaces 5.3 官方文件：https://www.primefaces.org/docs/guide/primefaces_user_guide_5_3.pdf
2. jQuery 3.1.1：https://blog.jquery.com/2016/09/22/jquery-3-1-1-released/