jQuery संवाद को छोटा/अधिकतम कैसे करें?

Question

मैं वीडियो दिखाने के लिए jQuery UI Dialog का उपयोग कर रहा हूं। वीडियो ठीक काम कर रहा है।

मैं जो करना चाहता हूं वह डायलॉग तत्व को ओएस या कुछ ऐसा ही कम करना है। एक छोटा आइकन जैसे ("-") जो मेरे संवाद को कम करेगा और जब मैं (*) दबाता हूं तो यह संवाद बंद कर देगा लेकिन वीडियो को पृष्ठभूमि में चल रहा है।

यहाँ मेरी कोड

//Watch Video 

$(".watchVideo").live('click',function(){ 
    if($('div.ui-dialog').length){ 
     $('div.ui-dialog').remove(); 
    } 

    var path = $(this).attr('rel'); 
    var title = $(this).attr('title'); 

    var $dialog = $('<div>', { 
     title: translator['Watch Video'] 
    }).dialog({ 
     autoOpen: false, 
     modal: true, 
     width: 600, 
     height: 500 
    }); 

    var tab = '<table style="margin: 10px 10%;"><tr><td><object id="MediaPlayer1" width="500" height="400" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft® Windows® Media Player components..." type="application/x-oleobject" align="middle"><param name="'+title+'" value="'+path+'"> <param name="ShowStatusBar" value="True"> <param name="DefaultFrame" value="mainFrame"> <param name="autostart" value="false"> <embed type="application/x-mplayer2" pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/" src="'+path+'" autostart="false" align="middle" width="500" height="300" defaultframe="rightFrame" showstatusbar="true"> </embed></object></td></tr></table>'; 

    $('<div id="updateContent">').html(tab).appendTo($dialog); 
    $dialog.dialog('open'); 
    return false; 

}); 

जहां वर टैब

<object id="MediaPlayer1" width="500" height="400" 
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" 
standby="Loading Microsoft® Windows® Media Player components..." 
type="application/x-oleobject" align="middle"> 
    <param name="FileName" value="YourFilesName.mpeg"> 
    <param name="ShowStatusBar" value="True"> 
    <param name="DefaultFrame" value="mainFrame"> 
    <param name="autostart" value="false"> 
    <embed type="application/x-mplayer2" 
    pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/" 
    src="YourFilesName.mpeg" 
    autostart="false" 
    align="middle" 
    width="500" 
    height="300" 
    defaultframe="rightFrame" 
    showstatusbar="true"> 
</embed> 

Answer 1

jQuery यूआई संवाद के लिए एक विस्तार, "DialogExtend" नाम आप बढ़ाना 'जोड़ने के लिए, को कम करने और बहाल करने के लिए बटन की अनुमति देता है कि नहीं है:

• कोड: https://github.com/ROMB/jquery-dialogextend
• डेमो: http://jsbin.com/ehagoy/154

पूरी तरह से काम करता है।

Answer 2

वहाँ दृष्टिकोण है कि आप की कोशिश कर सकते के एक जोड़े हैं के बराबर है है।

1. बटन को कम करने और ui-dialog-titlebar के लिए और संवाद क्लिक परिवर्तन पर यह एक position: fixed को संलग्न और स्थिति यह इतना ही शीर्षक पट्टी स्क्रीन के तल पर दिखाई दे रहा है एक नया परिचय दें।

2. काफी समान दृष्टिकोण - अपने मूल संवाद div की ऊंचाई को 0 पर बदलें। संवाद को खींचने योग्य होने दें, इसलिए कोई उपयोगकर्ता इसे स्थानांतरित कर सकता है। लेकिन आपको शायद व्यूपोर्ट के नीचे संवाद को ऑफ़सेट करने की आवश्यकता होगी। यह दृष्टिकोण ui-dialog-titlebar बरकरार रखता है - आप कम से कम प्रभाव बनाने के लिए, फ्लाई पर संवाद की चौड़ाई भी बदल सकते हैं।

3. उपयोग .animate या (जैसे easeInExpo के रूप में या आसान, - http://ralphwhitbeck.com/demos/jqueryui/effects/easing/) अन्य संक्रमण

लेकिन तरीका सबसे आसान उपरोक्त विधियों में से कुछ का उपयोग करता है:

आप प्रभाव के लिए की जरूरत है बदलने के लिए है:

• विंडो के
• ऊंचाई की चौड़ाई खिड़की
• शीर्ष स्थान
• बाईं स्थिति

इस तरह:

$('#window').dialog({ 
    draggable: false, 
    height: 200, 
    buttons: [ 
    { 
     text: "minimize", 
     click: function() { 
      $(this).parents('.ui-dialog').animate({ 
       height: '40px', 
       top: $(window).height() - 40 
      }, 200);    
     } 
    }] 


}); 

$('#open').click(function() { 
    $('#window').parents('.ui-dialog').animate({ 
     //set the positioning to center the dialog - 200 is equal to height of dialog 
     top: ($(window).height()-200)/2, 
     //set the height again 
     height: 200 
      }, 200); 
}); 

यह 0 करने के लिए संवाद की ऊंचाई सेट क्या करता है, और व्यूपोर्ट के तल पर यह स्थिति । अधिकतम करने पर, यह केंद्र की स्थिति को पुन: गणना करता है, संवाद को एक ऊंचाई देता है, और इसे वापस देखने में एनिमेट करता है। कम से कम/अधिकतम के साथ http://jsfiddle.net/jasonday/ZSk6L/

अपडेट किया गया बेला:

उदाहरण देखें।

Answer 3

आप jQuery DialogExtend प्लगइन का उपयोग कर सकते हैं। यह संवाद को अधिकतम, कम करने और सुविधाओं को संक्षिप्त करने की पेशकश करता है।

Answer 4

jQuery डायलॉग एक्स्टेंड प्लगइन समस्या हल करता है हालांकि आईफ्रेम का उपयोग करते समय यह आईफ्रेम की सामग्री को रीफ्रेश करता रहता है।

Answer 5

मैंने विजेट कारखाने के साथ एक छोटी प्लगइन बनाई जो jquery ui संवाद को बढ़ाता है।

मैं jQuery विजेट कारखाने का उपयोग नए functionnalities

$.widget('fq-ui.extendeddialog', $.ui.dialog, { 
... 
})(jQuery); 

jQuery के यूआई संवाद कोड में जोड़ने के लिए, वहाँ एक _createTitlebar तरीका है। मैं इसे

_createTitlebar: function() { 
    this._super(); 
    // Add the new buttons 
    ...   
    }, 

• jquery-extendeddialog
• sample page