Skip to content
Bob edited this page Feb 18, 2014 · 3 revisions

The Isb constructor parameter has several fields for styling the UI. All generated elements can be assigned a css class or classes. Additionally, the generated <select> and <option> elements can be assigned an arbitrary number of attributes.

Observe the configuration passed to the Isb constructor and an example of the resulting dom elements (the class names and class values are the same to make it easy to determine the class name/class value mapping):

isb = new com.contrivedexample.isbjs.Isb({
    "langmap": langmap,
    "listItemClass": "listItemClass",
    "andOrSelClass": "andOrSelClass",
    "andOrLiClass": "andOrLiClass",
    "propSelClass": "propSelClass",
    "propSelOptClass": "propSelOptClass",
    "operSelClass": "operSelClass",                
    "btnClass": "btnClass",
    "valueInputClass": "valueInputClass",
    "valueInputErrClass": "valueInputErrClass",
    "propSelAttributes": [
        { "attrName": "MyAttr1", "attrValue": "aOne" },
        { "attrName": "MyAttr2", "attrValue": "aTwo" }
    ],
    "propSelOptAttributes": [
        { "attrName": "data-toggle", "attrValue": "foo" },
        { "attrName": "data-role", "attrValue": "superman" }
    ],
    "andOrOptAttributes": [
        { "attrName": "data-andor1", "attrValue": "jenny" },
        { "attrName": "data-andor2", "attrValue": "8675309" }
    ],
    "divName": "content",
    "ulName": "srchUL",
    "ignoreCase" : false
});
<ul id="srchUL">
	<li class="listItemClass">
		<select class="propSelClass" myattr2="aTwo" myattr1="aOne">
			<option class="propSelOptClass" value="OrderID" data-role="superman" data-toggle="foo">OrderID</option>
			<option class="propSelOptClass" value="CustomerID" data-role="superman" data-toggle="foo">CustomerID</option>
			<!-- etc... -->
		</select>
		<select class="operSelClass">
			<option value="=">=</option>
			<option value=" not equal "> not equal </option>
			<option value="Contains">Contains</option>
			<!-- etc... -->
		</select>
		<input class="valueInputClass" type="text" size="10" value="">
		<button class="btnClass">+</button><button class="btnClass">( )</button>
	</li>
	<li class="andOrLiClass" data-role="superman" data-toggle="foo">
	<select class="andOrSelClass">
		<option value="AND" data-andor1="jenny" data-andor2="8675309">AND</option>
		<option value="OR" data-andor1="jenny" data-andor2="8675309">OR</option>
	</select>
	</li>
		<li class="listItemClass">
			<select class="propSelClass" myattr2="aTwo" myattr1="aOne">
				<option class="propSelOptClass" value="OrderID" data-role="superman" data-toggle="foo">OrderID</option>
				<option class="propSelOptClass" value="CustomerID" data-role="superman" data-toggle="foo">CustomerID</option>
				<!-- etc... -->
			</select>
		<select class="operSelClass">
			<option value="=">=</option>
			<option value=" not equal "> not equal </option>
			<option value=">">&gt;</option>
			<!-- etc... -->
			</select>
		<input class="valueInputClass" type="number" size="10" value="" nullable="undefined">
		<button class="btnClass">+</button><button class="btnClass">( )</button>
	</li>
</ul>
Clone this wiki locally