jquery dialog 最大最小化按钮

南门展
2023-12-01
对  jquery-ui-1.8.16.custom\css\smoothness  下面的 jquery-ui-1.8.16.custom.css 下的 dialog 样式进行添加最大、最小按钮样式:

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }

.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }


.ui-dialog .ui-dialog-titlebar-max { position: absolute; right: 1.8em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-max span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-max:hover, .ui-dialog .ui-dialog-titlebar-max:focus { padding: 0; }

.ui-dialog .ui-dialog-titlebar-min { position: absolute; right: 3.3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-min span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-min:hover, .ui-dialog .ui-dialog-titlebar-min:focus { padding: 0; }

.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

php html代码
        $.fx.speeds._default = 700;
        function xiugai(type,id){
            $.ajax({
                url:'ajax.php',
                data:'type='+type+'&id='+id,
                type:'POST',
                dataType:'json',//json
                success:function(data){
                    if(type=='tid'){
                        editor1.html(data['content']);
                        $('#dgid').val(id);
                        $('#secid').val(0);
                        $('#liebiao').css('display','none');
                        $('#tit').css('float','right');
                        $('#editoriframe').css('display','block');
                        $('#titdiv').css('display','block');
                        $('#title').val(data['title']);
                        $('#titlab').html('');
                        // $('#tijiao').val("更新文章"s); // js a little wrong make all js no work...
                        $('#tijiao').val("更新文章");
                        $('#tijiao').attr("onclick","tijiao('gengxin');return false;");
                    }else if(type=='show'){
                         mm(data['title'],data['content']);
                    }
                }
            });
        }
        
         function mm(title,data) {
            var dialog = $("

"+ data +"

");
            dialog.dialog({
                autoOpen: false,
                show: "blind",
                hide: "blind",//  explode
                width:530,
                height:410,
                close:function(event, ui) { $(this).dialog( "destroy" ).remove(); },//$(this).dialog( "destroy" ).remove();alert('s');
                open: function (event, ui) {
                    var $dialog = $(this);
                    $('.ui-dialog-title').css('width','70%');
                    var atext =  $(".ui-dialog-titlebar-close") .before(' minusthickextlink ');
                    $(".ui-dialog-titlebar .ui-icon").click(function () {
                        var spantext = $(this).text();
                        //alert("ok:ui-span" + spantext);
                        if (spantext == "extlink") {

                            if (window.screen) {              //判断浏览器是否支持window.screen判断浏览器是否支持screen
                                var myw = screen.availWidth;   //定义一个myw,接受到当前全屏的宽
                                var myh = screen.availHeight;  //定义一个myw,接受到当前全屏的高
                                //window.moveTo(0, 0);           //把window放在左上脚
                                //window.resizeTo(myw, myh);     //把当前窗体的长宽跳转为myw和myh
                                $dialog.dialog({
                                    position: ['left', 'top'],
                                    width: myw * 0.6,
                                    height: myh * 0.6
                                });

                            } else {
                                $dialog.dialog({
                                    position: 'center',
                                    width: 640,
                                    height: 480
                                });
                            }
                        } else if (spantext == "minusthick") {
                            $dialog.dialog({
                                position: 'top',
                                width: 590,
                                height: 50
                            });
                        }else if (spantext == "close") {
                            //alert('s');
                        }else {
                            alert("请选择正确的图标,谢谢.");
                        }
                    });
                }
            });
            dialog.dialog("open");
            return false;
        }
 类似资料: