怎样将前端页面的文本边框去掉

程序员文章站 2022-05-16 10:08:43

...

前端静态页面或者动态页面，有时候开发前端需要将某些信息就显示在某个空白区域，不需要加啥边款啥的！

<%@page pageEncoding="UTF-8"%>
<%@include file="/common/common.jsp"%>
<%@include file="/common/skins/skin0/component.jsp" %>

<html>
<!-- 
  - Author(s): Administrator
  - Date: 2014-10-11 16:39:02
  - Description:
-->
<head>
<title>Title</title>
<style>
.asLabel .mini-textbox-border,
	    .asLabel .mini-textbox-input,
	    .asLabel .mini-buttonedit-border,
	    .asLabel .mini-buttonedit-input,
	    .asLabel .mini-textboxlist-border
	    {
	        border:0;background:none;cursor:default;
	    }
	    .asLabel .mini-buttonedit-button,
	    .asLabel .mini-textboxlist-close
	    {
	        display:none;
	    }
	    .asLabel .mini-textboxlist-item
	    {
	        padding-right:8px;
	    }    
    </style>
</head>
<body>
<script type="text/javascript" src="../common/nui/nui.js"></script>
<div id="form1" >
        <table>
            <tr>
                <td>
                    
                </td>
                <td>
                    <input value="文本只读模式" type="button" onclick="labelModel()" />
                    <input value="输入框模式" type="button" onclick="inputModel()" />
                </td>
            </tr>            
            <tr>
                <td>
                    <label for="textbox1$text">TextBox：</label>
                </td>
                <td>
                    <input id="textbox1"  name="username" class="nui-textbox asLabel" value="textbox" required="true" />
                </td>
            </tr>
        </table>
    </div>
  <script type="text/javascript">
        nui.parse();

        var form = new nui.Form("form1");

        function labelModel() {
            var fields = form.getFields();                
            for (var i = 0, l = fields.length; i < l; i++) {
                var c = fields[i];
            if (c.setReadOnly) c.setReadOnly(true);     //只读
                if (c.setIsValid) c.setIsValid(true);  
                if (c.addCls) {
                	c.addCls("asLabel");          //增加asLabel外观
                }
                	
            }
        }
        function inputModel() {
            var fields = form.getFields();
            for (var i = 0, l = fields.length; i < l; i++) {
                var c = fields[i];
                if (c.setReadOnly) c.setReadOnly(false);
                if (c.removeCls) c.removeCls("asLabel");
            }
            nui.repaint(document.body);
        }
    </script>
</body>
</html>

以上是个示列，具体代码还需要改动一下，或者直接将labelmodel()方法嵌入，再是把前面的css样式引入所使用的jsp文件！