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}

 

后台的插入数据就不写了 很简单

转载于:https://www.cnblogs.com/johnsneakers/archive/2011/12/19/2293335.html