您的位置:首页 > Web前端 > CSS

phpcms表单向导更改前台代码使其能修改表单样式

2015-06-14 09:45 615 查看
phpcms表单向导的使用 ,相信大家都会用,很简单只需要添加字段就可以了,但是通过表单向导添加的表单样式很难看,而且在看代码的时候,会发现这个表单是循环输出的表单,样式上没有办法做修改。废话不多说了,接下来按照步奏来。

 第一步需要你先找到这个文件,将其中的循环删除掉  <from>标签的内容以及提交按钮不要删除掉,这个表单提交主要是input标签的name属性是放在info[ ]中的,比如:

<input type="text" name="info[username]">


这样表单提交给方法后,会通过info来提交给数据库,完成添加。本人尝试提交无误,改到这样了,样式修改还不是随心所欲么。

多行文本:

<textarea name="info[字段名]"></textarea>


最难弄的是图片上传不过已经解决了:

<p style="margin-top:60px;">
<script type="text/javascript" src="http://localhost/statics/js/swfupload/swf2ckeditor.js"></script>
<script language="javascript" type="text/javascript" src="http://localhost/statics/js/content_addtop.js"></script>
照片
<?php $authkey=upload_key( '1,gif|jpg|jpeg|png|bmp,1,,');?>:
<input name="info[字段名]" style="width: 410px;height: 30px;margin-left: 345px;" readonly="readonly" id="字段名" value="" size="" class="input-text" type="text">
<input class="button" onclick="javascript:flashupload('字段名_images', '附件上传','yingyezhizhao',submit_images,'1,gif|jpg|jpeg|png|bmp,1,,','member','','<?php echo $authkey?>')" style="float: right;" value="图片上传" type="button">
</p>

当然光是这样是不够的,仅仅是这样不会弹出上传图片的提示框需要你加上下面这写代码:

<script src="http://localhost/index.php?m=poster&c=index&a=show&siteid=1&spaceid=1&id=1" type="text/javascript"></script>
<link href="http://localhost/statics/css/table_form.css" rel="stylesheet" type="text/css">
<link href="http://localhost/statics/css/dialog.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://localhost/statics/js/dialog.js"></script>
<style type="text/css">
textarea {
resize: none;
}
</style>
<script type="text/javascript">
$(function() {
$(".picbig").each(function(i) {
var cur = $(this).find('.img-wrap').eq(0);
var w = cur.width();
var h = cur.height();
$(this).find('.img-wrap img').LoadImage(true, w, h, 'http://localhost/statics/images/msg_img/loading.gif');
});
})
</script>
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
clear: both;
overflow: hiddden;
visibility: hidden;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
</style>

这些样式一个都不能缺少,否则就会出错,还有代码要加上,就会弹出,能上传图片:
<div style="position: absolute; width: auto; left: 415px; top: 0px; z-index: 2009; display: none;" class=" aui_state_focus aui_state_lock">
<div class="aui_outer">
<table class="aui_border">
<tbody>
<tr>
<td class="aui_nw"></td>
<td class="aui_n"></td>
<td class="aui_ne"></td>
</tr>
<tr>
<td class="aui_w"></td>
<td class="aui_c">
<div class="aui_inner">
<table class="aui_dialog">
<tbody>
<tr>
<td colspan="2" class="aui_header">
<div class="aui_titleBar">
<div style="cursor: move; display: block;" class="aui_title">附件上传</div><a style="display: block;" class="aui_close" href="javascript:/*artDialog*/;">×</a>
</div>
</td>
</tr>
<tr>
<td style="display: none;" class="aui_icon">
<div style="background: transparent none repeat scroll 0% 0%;" class="aui_iconBg"></div>
</td>
<td style="width: auto; height: auto;" class="aui_main">
<div style="padding: 5px 0px;" class="aui_content">
<iframe style="display: block;" src="index.php?m=attachment&c=attachments&a=swfupload&args=1,gif|jpg|jpeg|png|bmp,1,,&module=member&catid=&authkey=6b2f0ae341fb1e0396c35da8dafdfb0b" id="atrDialogIframe_ss_images" padding="0"
frameborder="0" height="420" width="500"></iframe>
</div>
</td>
</tr>
<tr>
<td colspan="2" class="aui_footer">
<div style="" class="aui_buttons">
<button type="button" class=" aui_state_highlight">确定</button>
<button type="button">取消</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="aui_e"></td>
</tr>
<tr>
<td class="aui_sw"></td>
<td class="aui_s"></td>
<td style="cursor: se-resize;" class="aui_se"></td>
</tr>
</tbody>
</table>
</div>
</div>总结:虽然图片的添加非常的复杂麻烦,但是这些加上样式,隐藏弹出框,只是需要添加一次就好。那么这个表单再有别的图片添加只需要更改一下name属性名就好
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: