html tags

HTML组件

系统中的重用的表单控件我们都有一些简单的组合，配置了一些CSS的class，以及一些属性，我们系统中称之为:html组件/component

常用的组件代码示例

<!-- TAGS 标签  -->
<!-- DynamicContainer -->
<div class="component DynamicContainer" ref="DynamicContainer">
    <h3 class="handle">Caption</h3>
</div>
<!-- StaticContainer -->
<div class="component StaticContainer" ref="StaticContainer" style="height:200px;">
    <h3 class="handle" style="visibility: visible;">Caption</h3>
</div>
<!-- EditorText -->
<div style="left:0px;top:5px;" class="component EditorText" ref="EditorText">
    <SPAN style="FONT-SIZE: 1em; CURSOR: text" class=notRequired>Date of Inspection</SPAN>
    <INPUT style="250px" id="xxxxxxxxxxxxxx" title="Please click here to enter the inspection date." tabindex="0" name="xxxxxxxxxxxxxx" maxLength=50>
</div>
<!-- Date EditorText -->
<div class="component EditorText " ref="EditorText" style="108px;left:0px; top: 0px; position: relative; height: 22px;" filter="DATE|GREATERTHANEQUALS" dtype="|DATE" param="|01/01/1900">
    <span class="notRequired" style="96px; height: 18px; cursor: text; font-size: 1em;">zzzzzzzzzzzz</span>
    <input style=" 100px;" tabindex="0" title="Please enter the invoice date." value="" id="xxxxxxxxxxx" name="xxxxxxxxxxx" maxlength="20" class="hasDatepicker" type="text">
</div>
<!-- EditorDropDown -->
<div style="" class="component EditorDropDown" ref="EditorDropDown">
    <SPAN style="CURSOR: text" class=notRequired></SPAN>
    <BR>
    <SELECT style="" id="xxxxx" title="" tabindex="0" size=1 name="xxxxx">
        <option value="-1">Please select...</option>
    </SELECT>
</div>
<!-- EditorCheckBox -->
<div style="" class="component EditorCheckBox" ref="EditorCheckBox">
    <SPAN style="CURSOR: default" class="notRequired">ZZZZZZ</SPAN>
    <INPUT id="xxxxxx" title="" tabindex="0" name="xxxxxx" value="1" type="checkbox">
</div>
<!-- EditorRadio -->
<div style="" class="component EditorRadio" ref="EditorRadio">
    <span style="" class="notRequired">ZZZZZZ</span>
    <input id="xxxxxxx" title="" tabindex="0" name="xxxxxxx" value="0" type="radio">
</div>
<!-- EditorLabel -->
<div style="" class="component EditorLabel" ref="EditorLabel">
    <LABEL class="Default" title="" tabIndex="-1">xxxxxxx</LABEL>
</div>
<!-- EditorMemoSpan -->
<div ref="EditorMemo" style="" class="component EditorMemo" edithtml="false" spellcheck="false">
    <span class="EditorMemoSpan notRequired" style="">zzzzzzz</span>
    <textarea id="xxxxxxxxxx" name="xxxxxxxxxx" class="" tabindex="0" title="" style="">
    </textarea>
    <div class="ckEditorDiv"></div>
</div>
<!-- EditorSubmitButton -->
<div style="left:730px; top: 50px; position: absolute;" class="component EditorSubmitButton " ref="EditorSubmitButton">
    <input style="height: 22px;  100px;" type="button" value="Save" id="xxxxx" name="xxxxx" title="Please click here to save." class="" tabindex="0" defaultbutton="false" causevalidation="false">
</div>
<!-- EditorLink -->
<div class="component EditorLink" ref="EditorLink" style="">
    <a class="Default" style="cursor:pointer;" onclick="Communication.LinkRequest('xxx.max');" tabindex="0" title="">xxxxx</a>
</div>
<!-- Hidden -->
<div style="display:none;" class="component EditorText" ref="EditorText">
    <SPAN style="" class=notRequired></SPAN>
    <INPUT id="xxxxxxxxxxxxxx" name="xxxxxxxxxxxxxx" value="" />
</div>
<!-- EditorDiv tablewalker -->
<div class="component EditorDiv" ref="EditorDiv" cli-cond="" style="">
    <div tabindex="0" title="" class="" style=" ">#SYourDataList#</div>
</div>

配置成代码片段

利用Sublime Text的代码片段的功能，配置出如下的效果，让砖头在你手里飞起来

配置到如下的地方：

文件下载

http://files.cnblogs.com/files/wancy86/Max_Tags.zip

页面布局与设计

了解了所有的html组件之后我们就可以开始设计页面了，stingray 页面布局与设计

posted @ 2017-02-28 10:27 by Mark