facebox的使用实例
这里要做的效果是点击页面某个按钮弹出对话框,可以在对话框内发生数据到数据库:
这里插入点击的星星分数和评论的内容。
流程一步步来:
1.首先用户肯定要点击(立即发表评价)对吧:
<input type="submit" name="Submit232" value="立即发表评价" onClick="replyImmediately({$v->courseid});" class="Button_Search2" />
这里调用函数里面的参数不详细解释了,关于这个参数为什么格式这么写,因为页面是用的smarty模板
2.弹窗代码
function replyImmediately(inforid)
{
$.facebox({ ajax: '../reply-immediately.php?type=' + 0 + '&inforid=' + inforid, titlename: '回复'}); //ajax表示facebox是执行的ajax的东东,还可以写成text: 'xxx' 就是指弹出文本格式的东东,title:'XX' 表示弹出窗体的title的文字
}
代码应该很简单,按照他的格式来就行了,向reply-immediately.php页面传递了2个参数 type 和infoid.
3.弹窗的方法弄好了,现在就开始"画"出你的窗体。
因为改小程序使用的是php smarty 模板,所以html代码和php代码是分离的 有两个文件 :reply-immediately.php 和reply-immediately.html
就这里简单解释下smarty模板的工作原理: 首先是加载.php 页面 然后根据smarty提供的一个display()方法 加载指定的html页面,这样的好处就不会让html和php代码混杂看起来很恼火,也很方便后期改动。
3.弹出窗体代码:
reply-immediately.php :
<?php include '../newconfig.php'; $inforid = optional_param('inforid','15',PARAM_INT); $type = optional_param('type',0,PARAM_INT); $smarty->assign('type',$type); $smarty->assign('inforid',$inforid); $smarty->display("html/reply-immediately.html"); ?>
窗体html
<div>
<div class="rate">
<div class="big_rate"><span rate="1"></span><span rate="2"></span><span rate="3"></span><span rate="4"></span><span rate="5"></span>
<div style="width:45px height:26px;" class="big_rate_up"></div>
</div>
<p><span id="s" class="s"></span><span id="g" class="g"></span></p>
<div id="my_rate" style="display:none;"></div>
</div>
<p>
<span id="s" class="s"></span><span id="g" class="g"></span>
</p>
<div id="my_rate">
</div>
</div>
</br>
<textarea cols="39" id="replycommentimmediately"></textarea>
<input style=" margin-left:230px;" onClick="postcommentimmediately({$type},{$inforid});" type="submit" name="submitreply" id="submitreply" value="确定" class="Button_Search2" style="margin-left:10px;" />
<!-- 隐藏域,储存分数-->
<input type="hidden" name="score" id = "score" value = ""></input>
</div>
{literal}
<script type="text/javascript">
$(function(){
get_rate();
});
function postcommentimmediately(type,inforid){ //发布评论
var score = $('#score')[0].value;
var comment = $('#replycommentimmediately').val().replace('\'','\\\'');
$.ajax({
type : 'POST',
url : '../comment.php',
data : {inforid:inforid, type:0, comment : comment,score:score,action:"postreply"},
success : function(data){
alert(data);
if(data=='success'){alert('success a');
//initcomment();
//$('#txtcomment').html('');
}
},
fail : function(err){
alert('评论失败');
}
});
}
</script>
{/literal}
后台的插入数据就不写了 很简单