背景:
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: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="width: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文件里面的自定义物件: