oaup9/o2web/source/x_component_process_FormDesigner/Module/ImageClipper/imageclipper.html

<div style="background-color: #FFF; overflow: hidden">
    <div title="{{$.lp.base}}" class="MWFTab">
        <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
            <tr>
                <td class="editTableTitle">{{$.lp.id}}:</td>
                <td class="editTableValue"><input type="text" name="id" value="text{$.id}" class="editTableInput"/></td>
            </tr>
            <tr>
                <td class="editTableTitle">{{$.lp.name}}:</td>
                <td class="editTableValue"><input type="text" name="name" value="text{$.name}" class="editTableInput"/></td>
            </tr>
            <tr>
                <td class="editTableTitle">{{$.lp.description}}:</td>
                <td class="editTableValue"><input type="text" name="description" value="text{$.description}" class="editTableInput"/></td>
            </tr>
            <tr>
                <td class="editTableTitle">{{$.lp.readonly}}:</td>
                <td class="editTableValue">
                    <input type="radio" name="isReadonly" value="true" text{($.isReadonly)?'checked':''}/>{{$.lp.yes}}
                    <input type="radio" name="isReadonly" value="false" text{(!$.isReadonly)?'checked':''}/>{{$.lp.no}}
                </td>
            </tr>
            <!--<tr>-->
            <!--<td class="editTableTitle">SRC:</td>-->
            <!--<td class="editTableValue"><input type="text" name="src" value="text{$.src}" class="editTableInput"/></td>-->
            <!--</tr>-->
            <tr>
                <td class="editTableTitle">{{$.lp.imageCropping}}</td>
                <td class="editTableValue">
                    <input type="radio" onclick="if (this.checked){ $('text{$.pid}imageSizeArea').setStyle('display', 'none'); $('text{$.pid}imageRatioArea').setStyle('display', 'none') }" name="clipperType" value="unrestricted" text{($.clipperType.indexOf('unrestricted')!=-1)?'checked':''}/>{{$.lp.unlimited}}
                    <input type="radio" onclick="if (this.checked){ $('text{$.pid}imageSizeArea').setStyle('display', ''); $('text{$.pid}imageRatioArea').setStyle('display', 'none') }" name="clipperType" value="size" text{($.clipperType.indexOf('size')!=-1)?'checked':''}/>{{$.lp.fixedSize}}
                    <input type="radio" onclick="if (this.checked){ $('text{$.pid}imageSizeArea').setStyle('display', 'none'); $('text{$.pid}imageRatioArea').setStyle('display', '') }" name="clipperType" value="ratio" text{($.clipperType.indexOf('ratio')!=-1)?'checked':''}/>{{$.lp.fixedRatio}}
                </td>
            </tr>
        </table>
        <div id="text{$.pid}imageSizeArea" style="display: text{($.clipperType!='size')?'none':'block'};">
            <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
                <tr>
                    <td class="editTableTitle">{{$.lp.width}}(px)</td>
                    <td class="editTableValue">
                        <input type="text" name="imageWidth" value="text{$.imageWidth}" class="editTableInput"/>
                    </td>
                    <td class="editTableTitle">{{$.lp.height}}(px)</td>
                    <td class="editTableValue">
                        <input type="text" name="imageHeight" value="text{$.imageHeight}" class="editTableInput"/>
                    </td>
                </tr>
            </table>
        </div>
        <div id="text{$.pid}imageRatioArea" style="display: text{($.clipperType!='ratio')?'none':'block'};">
            <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
                <tr>
                    <td class="editTableTitle">{{$.lp.aspectRatio}}</td>
                    <td class="editTableValue">
                        <input type="text" name="imageRatio" value="text{$.imageRatio}" class="editTableInput"/>
                    </td>
                </tr>
            </table>
        </div>

        <div class="MWFMaplist" name="styles" title="{{$.lp.style}}"></div>
        <div class="MWFMaplist" name="properties" title="{{$.lp.attribute}}"></div>
        <div class="MWFMaplist" name="buttonStyles" title="{{$.lp.buttonStyle}}"></div>
        <div class="MWFMaplist" name="imageStyles" title="{{$.lp.imageStyle}}"></div>

        <div class="MWFValidation" name="validationConfig"></div>
        <div class="MWFScriptArea" name="validation" title="{{$.lp.verificationScript}} (S)"></div>
    </div>
    <div title="{{$.lp.event}}"  class="MWFTab">
        <div class="MWFEventsArea" name="events"></div>
    </div>
    <div title="HTML"  class="MWFTab">
        <div class="MWFHTMLArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
    </div>
    <div title="JSON"  class="MWFTab">
        <div class="MWFJSONArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
    </div>
</div>