弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 1320|回复: 2

弘帝表单系统设计参考CSS

[复制链接]
发表于 2020-9-29 08:49:34 | 显示全部楼层 |阅读模式
该设计已被弘帝淘汰,仅在特定兼容早期设计环境下使用,建议使用风格二:
风格一:Hondy.Cloud.Agent.Template.Account.Contact.zhg
特点:无需Bootstrap,Hondy特色极简设计,配合使用JS:Hondy.Cloud.Console.JS.Contact.js此风格是对DIV/CSS/JS是最好的均衡代码。
DIV:
<div class="tip"></div>
<form name="profile">
<div class="rows name">
    <div class="title"></div>
    <div class="input"></div>
</div>
<div class="rows">
    <div class="title"></div>
    <div class="input"><input name="title" type="text" maxlength="100" /></div>
</div>
<div class="rows">
    <div class="title"></div>
    <div class="input"><input name="name" type="text" maxlength="50" /></div>
</div>
<div class="rows">
    <div class="title"></div>
    <div class="input"><input name="code" type="text" maxlength="50" /></div>
</div>
<div class="rows">
        <div class="title"></div>
        <div class="input"><input name="photo" type="file" multiple /></div>
</div>
<div class="rows ">
    <div class="title"></div>
    <div class="input notice"></div>
</div>
<div class="rows submit">
        <div class="title"></div>
        <div class="input"></div>
</div>
</form>

回复

使用道具 举报

 楼主| 发表于 2020-9-29 08:56:48 | 显示全部楼层
风格二:Hondy.Cloud.Agent.Template.Developer.Access.zhg
特点:支持Bootstrap,满足Boostrap追随者的风格要求,配合Hondy.Agent.JS.Developer.Access.js。
重大革新:仔细观察以下脚本,连DIV的INPUT/TEXTAREA等标签都节略了,给了前端灵活设计的最大变化,这也太优秀了吧。
DIV:
<div class="tip"></div>
<section>
    <div class="form-group row id" need="required readonly" maxlength="20"></div>
    <div class="form-group row token" need="required readonly" maxlength="255"></div>
</section>

参考:
弘帝系统表单系统通用框架设计脚本JS
http://wh.ac.cn/forum.php?mod=viewthread&tid=2835





回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-9-29 09:03:15 | 显示全部楼层
风格三:早期弘帝设计,曾经引起为傲,目前已经淘汰。
主要原因:国际化支持不太友情,无法实现前端国际化,前端后端都要考虑国别语言;替换脚本在服务器端进行,加重了服务器端的计算量。
DIV:
<div class="tip">我的资料</div>
<form name="theForm" method="post">
    <div class="rows">
        <div class="left">姓名</div>
        <div class="right"><input type="text" name="name" class="input" value="$name$"></div>
    </div>
    <div class="rows">
        <div class="left">所在地区</div>
        <div class="right">
            <script language="javascript" class="input" src="../js/ssx.js"></script>
        </div>
    </div>
    <div class="rows">
        <div class="left">性别</div>
        <div class="right"><input type="radio" name="sex" class="radio" value="1"> 男 <input type="radio" name="sex" class="radio" value="0"> 女</div>
    </div>
    <div class="rows">
        <div class="left">手机</div>
        <div class="right"><input type="text" name="mobile" class="input" value="$mobile$"></div>
    </div>
    <div class="rows">
        <div class="left">QQ</div>
        <div class="right"><input type="text" name="qq" class="input" value="$qq$"></div>
    </div>
    <div class="rows">
        <div class="left">供需</div>
        <div class="right"><textarea type="text" name="message" rows="5" cols="80">$message$</textarea></div>
    </div>
    <div class="rows">
        <div class="left"> <input type="hidden" name="act" value="edit"></div>
        <div class="right"><input type="submit" name="submit" value=" 更新 "> <input type="reset" name="reset" value=" 重置 "></div>
    </div>
</form>

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-4-29 23:27 , Processed in 0.103746 second(s), 15 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表