easy_ui之窗口弹出的实例

背景：

1.

2.

<div class="c_fw_s dis" >
<div class="c_fw_con">
<div class="c_fw_con_one" w='820' h='510' id="article">图文</div>    //w 和 h 为自定义属性
<div class="c_fw_con_one" w='820' h='510' id="pic">图集</div>
<div class="c_fw_con_one" w='820' h='510' id="shopguide">导购</div>
<div class="c_fw_con_one" w='820' h='510' id="video">视频</div>
<!--<div class="c_fw_con_one" w='805' h='570' id="music">音乐集</div>-->
<div class="c_fw_con_one" w='820' h='510' id="vote">投票</div>
</div>
</div>

<!--弹出框-->
<div id="easyui-window" data-options="closed:true,tools:'#easyui-win-bt'" class="easyui-window"></div>
<div id="easyui-win-bt" style="display:none;">
    <input type="button" id="bt_close_win" class="but_fanhui" value="返回" />
    <input type="button" id="bt_submit" class="but_b" value="确定" />
</div>
<script type="text/javascript">
     var $win;
    // 重新加载页面时 须销毁已经存在的对象
    if($($win).length > 0) {
        $win.window('destroy');
    }
    $(document).ready(function(e){
        $win = $('#easyui-window').window({
            modal:true,      //定义窗口是不是模态窗口。
            closed:true,     //定义是否关闭了窗口。
            closable:false,   //定义是否显示关闭按钮。
            collapsible:false,  //定义是否显示折叠按钮。
            maximizable:false,   //定义是否显示最大化按钮。
            minimizable:false,    //定义是否显示最小化按钮。
            shadow:false,         //如果设为 true， 当窗口能够显示阴影的时候将会显示阴影。
            resizable:false,      //定义是否窗口可以调整尺寸。
            tools:'#easyui-win-bt'  //自定义工具
        });
    
      
           
        $("#shoulu").click(function(){    //选择菜单的出现以及关闭
            $(".c_fw_s").show();
            $(this).focus();
        }).blur(function(){
            $(".c_fw_s").fadeOut(500);
        });

$("#bt_submit").click(function(){
var type_id = $("#content_type_id").val();
switch(type_id) {
case '1': // 图文
saveArticle();
return false;
case '2': // 图集
savePic();
return false;
case '3': // 视频集
saveVideo();
return false;
case '5': // 投票
saveVote();
return false;
case '6': // 导购
saveShopGuide();
return false;
}
});

// 保存图文
function saveArticle(){
var cid = $("#content_id").val();
var type_id = $("#content_type_id").val();
var title = $("#content_title").val();
var content = UE.getEditor('carticle_content').getContent();
if (title == '') {
$.messager.alert("提示", "标题不能为空");
return false;
} else if (content == '') {
$.messager.alert("提示", "内容不能为空");
return false;
}

$.post(
'<?php echo Yii::app()->createUrl("contentArticle/save") ?>',
{'cid':cid,'type_id':type_id,'title':title,'content':content,is_prize:awards.is_prize,prize_id:awards.prize_id,is_score:awards.is_score,score:awards.score},
function(data){
if(data.code < 1){
$.messager.alert("提示", data.message);
}else{
$win.window('close');
ajax_load('page_right_inner', "<?php echo Yii::app()->createUrl('content/list'); ?>");
}
},
'json'
);
}

        

        

        
    
        $(".c_fw_con_one").click(function(){
            //$(".but_b").removeClass("btn_modify");
            var href = $(this).attr("id");  //获取具体操作的id
            var tab = $(this).html();      //获得具体操作内容
            var width = $(this).attr("w"); //面板的宽
            width = (parseInt(width)+30);  
            var height = $(this).attr("h");
            var top = ($(window).height() - height) * 0.5;   //弹出的框正处于电脑的中间
            if(top <=0 ) {
                var top = 0.5;
            }
            $win.window({
                title:"创建互动服务模块 -- "+tab,
                width,
                height:height,
                top:top,
                left:($(window).width() - width) * 0.5,
                closed:false,
                href:'<?php echo Yii::app()->createUrl('content/getPannel'); ?>?type='+href,   //获取面板
                onClose:function(){          //Panel关闭后触发。
                    if($("#pic_upload").length>0)
                        $("#pic_upload").uploadify('destroy');
                    $('#easyui-window').html('');
                }
            });
        });
    
      
    });
</script>

　　注意：

data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性，我们可以对easyui组件的实例化可以完全写入到html中，例如：

<div class="easyui-dialog" style="400px;height:200px"
    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
    dialog content.
</div>

　　

在getPanel视图中:

<?php
switch($type) {
    case 'article':
        $this->widget('ContentArticleWidget', array('contentId' => $cid));
        break;
    case 'pic':
        $this->widget('ContentPicWidget', array('contentId' => $cid));
        break;
    case 'video':
        $this->widget('ContentVideoWidget', array('contentId' => $cid));
        break;
    case 'audio':
        $this->widget('ContentAudioWidget', array('contentId' => $cid));
        break;
    case 'shopguide':
        $this->widget('ContentShopGuideWidget', array('contentId' => $cid));
        break;
    case 'vote':
        $this->widget('ContentVoteWidget', array('contentId' => $cid));
        break;
}
?>

　　

component文件里面的自定义物件：