跳至內容

OpenClinica 使用者手冊/使用 jQuery 進行樣式設定

Add links
來自華夏公益教科書

有時，OpenClinica 生成的頁面可能不像您想要的那樣。我們可以使用對 CRF 進行樣式設定中的配方對輸入元素周圍的標題和描述性文字進行樣式設定。如果我們想對輸入元素本身進行樣式設定，我們需要做更多工作。透過在 Excel 中定義的專案中新增類名，並混合使用來自 jQuery 庫的一點 javascript，我們可以對文字框、文字區域和選擇欄位等輸入元素進行樣式設定。OpenClinica 3.1 在每個 CRF 頁面上載入 jQuery 庫。在早期版本的 OpenClinica 中，jQuery 沒有載入，因此我們必須“手動”執行此操作。如果您想了解更多關於 jQuery 的資訊，請關注以下連結 http://docs.jquery.com/Main_Page

相容性

[編輯 | 編輯原始碼]

OpenClinica 並未在所有瀏覽器版本中進行測試，使用 jQuery 進行樣式設定將無法與大多數未經測試的瀏覽器配合使用。請參閱下表以檢視可以使用哪些瀏覽器。

瀏覽器 相容？
Internet Explorer 7 是
Internet Explorer 8 是
Internet Explorer 9 是
Firefox >= v3.0 是
Google Chrome 否
Opera 否
Safari 否

非重複組中的專案

[編輯 | 編輯原始碼]

我們將從一個針對“普通”專案的指令碼開始，即非重複組中的專案

<script>
/* 
    Purpose: to style input items on the entry screen with CSS 
    Instructions:
    Add this script  to your CRF Design Excel sheet once.
    A good place would be the left item text of the first item 
    For every item that you want to style put a span or div element around the left or right item text, 
    add a class name to this element. 
    Example: <span class="MyClassForTextInput">Description of the field</span> (Again: this is added to left_item_text 
    or right_item_text in the Excel sheet)
    For every class you have defined add a function call to the styleItem function in this script, below the function definition.
    Example: styleItem('.MyClassForTextInput','input',{'width':'100px','padding-left':'15px'});
    Add the CSS styling you need through the CSS map parameter of the function. See below for the parameter descriptions.
	
    Remark: since jQuery is not loaded during CRF preview, you can only see the results in the saved CRF version during data entry/review.
*/
    jQuery(document).ready(function($) { 
        function styleItem(pClassSelector, pElementType, pCSSMap) {
	/*
	    This function adds styling to an input item.
	    Parameters:
	        pClassSelector: String. The name of the class of the item defined in the left or right item text. 
	   			    Include the dot (.) in the class name. 
                                    Example: '.MyClassForTextInput'
	        pElementType:   String. The html type of the response-type item that need styling, 
	   	                    mostly this is 'input', for 'single-select' and 'multi-select' the type is 'select', for textarea it is 'textarea'
	    			    Example: 'select'
                pCSSMap:        Dictionary. CSS key/value pairs to style the element. Written as: {'key':'value','key2':'value2',...}
	                            Example: {'width':'50px','background-color':'red'}
        */
	    // find and apply styling to the input element
	    $(pClassSelector).parent().parent().find(pElementType).css(pCSSMap);
	}
		
	/* example calls to styleItem */ 
	//styleItem('.MyClassForTextInput','input',{'width':'100px','padding-left':'15px'});
	//styleItem('.MyClassForSelectInput','select',{'width':'80px','font-size':'120%','color':'orange'});
	//add your functions calls on the next line

    });
</script>

實際操作

[編輯 | 編輯原始碼]

在實際操作中，您不需要所有包含的註釋，只需這些行

<script src="includes/jmesa/jquery.min.js">// for OC versions before 3.1.4, use jquery-1.3.2.min.js !</script>
<script type="text/javascript">
    jQuery(document).ready(function($) { 
        function styleItem(pClassSelector, pElementType, pCSSMap) {
            $(pClassSelector).parent().parent().find(pElementType).css(pCSSMap);
        }
        styleItem('.class1','input',{'width':'80px','background-color':'red'});
        styleItem('.class2','input',{'width':'40px','background-color':'green'});
        styleItem('.class3','textarea',{'width':'40px','height':'40px','background-color':'#F3F2E8'});
        styleItem('.class4','select',{'background-color':'#A14141'});
   });
</script>

即可。以styleItem開頭的行是我們自己新增的行，用於定義我們希望為元素定義的樣式。指令碼的其餘部分不得修改。


我們將把這個指令碼放在第一個專案的 LEFT_ITEM_TEXT 中。之後，您仍然可以放置所有您希望放在那裡的文字。看看以styleItem開頭的四行。在這裡我們定義了四個要在表單中使用的類。class1 和 class2 只是名稱，但是 input 是我們可以應用這些樣式的元素型別。然後是一個列表，其中包含樣式的組成部分，您可以無限地新增到其中。在示例中，僅使用寬度和背景顏色。然後 class3 用於文字區域。最後，class4 可與單選或多選下拉選單配合使用。

應用樣式

[編輯 | 編輯原始碼]

該函式已到位，因此我們想將其應用於輸入，我們透過在 LEFT_ITEM_TEXT 或 RIGHT_ITEM_TEXT 中放置一個具有 class1 類的跨度來執行此操作

the CRF
CRF

這是結果

the result
結果

如您所見，第一個類在第 7 行再次使用，這是可能的，因為這也是一個輸入。反之亦然：您無法對輸入和文字區域使用相同的樣式，如果希望它們都具有 40 畫素的寬度，則必須定義兩個類。

它是如何工作的？

[編輯 | 編輯原始碼]

指令碼的工作原理如下。LEFT_ITEM 或 RIGHT_ITEM_TEXT 中的跨度是表格的一部分。在這個表格中，還有我們想要應用樣式的輸入。首先，我們引用跨度的父元素，即 [td]。該元素的父元素是 [tr]。現在我們可以透過型別遍歷此 [tr] 的所有元素，使用 find(pElementType)，當然，我們正在尋找輸入，並且只有一個。

重複組中的專案

[編輯 | 編輯原始碼]

對於重複組中的專案，情況略有不同。看看記錄的函式。

<script>
/* 
    Purpose: to style input items in grouped items on the entry screen with CSS 
    Instructions: 
    Add this script  to your CRF Design Excel sheet once.
    A good place would be the left item text of the first item of the group. This becomes the column header in the screen.
    Warning: Don't put this script in right_item_text of a grouped item because that will not be rendered to the screen.
    For every column that you want to style put a span or div element around the left_item_text. Again: right_item_text is useless here.  
    Add a class name to this element. 
    Example: <span class="MyClassForFirstColumn">Description of the first column</span> (Again: this is added to left_item_text)
    For every class you have defined add a function call to the styleGroupColumnN function in this script, below the function definition.
    Example:styleGroupColumnN('.MyClassForFirstColumn','1','input',{'width':'20px','color':'white','font-weight':'120%','background-color':'blue'});
    Add the CSS styling you need through the CSS map parameter of the function. See below for the parameter descriptions
    
    Remark: since jQuery is not loaded during CRF preview, you can only see the results in the saved CRF version during data entry/review.
*/
    jQuery(document).ready(function($) { 
	function styleGroupColumnN(pClassSelector, pN, pElementType, pCSSMap) {
	    /*
                This function adds styling to an input items in a group.
	        Parameters:
	        pClassSelector: String. The name of the class of the item defined in the left item text. 
	    	    			Include the dot (.) in the class name. Example: '.MyClassForFirstColumn'
	        pN:		The ordinal number of the column to be styled. The first column is '1', the second '2' and so on.
	    				Example: '1'
	        pElementType: 	String. The html type of the response-type item that need styling, 
	    				mostly this is 'input', for 'single-select' and 'multi-select' the type is 'select', for textarea it is 'textarea'
	    				Example: 'select'
                pCSSMap:	Dictionary. CSS key/value pairs to style the element. Written as: {'key':'value','key2':'value2',...}
		 			Example: {'width':'50px','background-color':'red'}
            */
	    
            // apply styling to the column header (the td element that holds the span or div with our class name)
	    $(pClassSelector).parent().css(pCSSMap);
	    // find and apply styling to all the input items in the column that we want to style
	    $(pClassSelector).parent().parent().parent().parent().children('tbody').children('tr').children('td:nth-child(' + pN + ')').children(pElementType).css(pCSSMap);
	}

	/* example calls to styleGroupColumnN */ 
	//styleGroupColumnN('.col2','2','input',{'width':'20px','color':'white','font-size':'120%','background-color':'blue'});
	//styleGroupColumnN('.col3','3','input',{'width':'60px'});
	//styleGroupColumnN('.col4','4','select',{'width':'120px','font-size':'120%','color':'green','background-color':'black'});
        //add your functions calls on the next line
    });
</script>

實際操作

[編輯 | 編輯原始碼]

我們刪除了（有用的）註釋，並將指令碼的其餘部分放在第一個 LEFT_ITEM_TEXT 中，因為 RIGHT_ITEM_TEXT 的內容在重複組中未使用。

<script>
    jQuery(document).ready(function($) { 
        function styleGroupColumnN(pClassSelector, pN, pElementType, pCSSMap) {
            $(pClassSelector).parent().css(pCSSMap);
            $(pClassSelector).parent().parent().parent().parent().children('tbody').children('tr').children('td:nth-child(' + pN + ')').children(pElementType).css(pCSSMap);
        }
        styleGroupColumnN('.colclass1','2','input',{'width':'20px','color':'white','font-size':'120%','background-color':'blue'});
        styleGroupColumnN('.colclass2','3','input',{'width':'60px'});
        styleGroupColumnN('.colclass3','5','select',{'width':'120px','font-size':'120%','color':'green','background-color':'black'});
    });
</script>

我們再次定義樣式，colclass1 到 3，兩個用於輸入，一個用於選擇。但是，還有一個額外的引數，用於指示列號。

將樣式應用於列

[編輯 | 編輯原始碼]

看看 XL 表格的螢幕截圖：與單項表格一樣簡單。

the result
結果

這是結果

the result
結果

請記住，您需要單獨設定每列的樣式。如果希望對 X 列進行相同的樣式設定，則需要使用相同的 CSS 引數對 styleGroupColumnN 函式進行 X 次呼叫。當然，您可以使用變數。這可以提高程式碼的可維護性：如果必須更改樣式，則只需執行一次即可。以下是一個使用變數作為樣式引數的示例

<script>
    ...  
    ...
    var CSSForMultipleColumns = {'width':'60px', 'margin-left':'20px'};
    styleGroupColumnN('.col3','3','input',CSSForMultipleColumns);
    styleGroupColumnN('.col4','4','input',CSSForMultipleColumns);
</script>

最後一點：在插入新列後，請不要忘記更改對 styleGroupColumnN 的呼叫中的列號。

它是如何工作的

[編輯 | 編輯原始碼]

這有點難解釋，但它類似於：向上移動四個級別（父級 x 4），然後您就到了重複組表格的級別。對於這個物件，獲取 tbody。對於此物件，獲取所有 tr。對於這些物件，獲取所有第 n 個 td。對於這些物件，獲取所有型別為 input 或 select 的元素，並應用樣式。您還在那裡嗎？無論工作原理如何：它都能工作！

水平組織的專案

[編輯 | 編輯原始碼]

為了設定使用 COLUMN_NUMBER 在頁面上水平放置的專案的樣式，請在 LEFT_ITEM_TEXT 中以與以前相同的方式使用以下程式碼。唯一的區別是我們現在可以使用引數：pCSSMapLabel 和 pCSSMapInput 分別對標籤和輸入本身進行樣式設定。例如，這使我們能夠為標籤及其所屬專案設定不同的寬度。

<script>
    jQuery(document).ready(function($) { 
        function styleItemHorizontally(pClassSelector, pElementType, pCSSMapLabel,pCSSMapInput) {
            $(pClassSelector).parent().css(pCSSMapLabel);
	    $(pClassSelector).parent().parent().find(pElementType).css(pCSSMapInput);
	}
        // examples:
	styleItemHorizontally('.hori1','input',{'width':'40px'},{'width':'40px', 'background-color':'#F0F0F0'});
        styleItemHorizontally('.hori2','input',{'width':'30px'},{'width':'60px', 'background-color':'#F0F0F0'});
        styleItemHorizontally('.hori3','input',{'width':'80px'},{'width':'60px', 'background-color':'#F0F0F0'});
    });
</script>
<span class="hori1">item 1</span>
檢索自 "https://wikibook.tw/w/index.php?title=OpenClinica_User_Manual/StylingWithJQuery&oldid=4226020"
華夏公益教科書