跳至内容

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://wikibooks.cn/w/index.php?title=OpenClinica_User_Manual/StylingWithJQuery&oldid=4226020"
华夏公益教科书