DragPanelExtender ile sürükle bırak pencere tasarımı

  • 15.06.2010 15:30
  • Ajax Toolkit
  • 6614

 Bu örnekte asp.nette ajax kontrol toolkit DragPanelExtender ve asp.net Panel kullanilarak sürükle birak pencere tasarlayacagiz. Bu islem için ilk önce sayfamiza bir adet ScriptManager ekliyoruz. Ismini smScriptManger olarak degistiriyoruz. Aliskanlik geregi :). Bu islem zorunlu degil.

<asp:ScriptManager ID="smScriptManger" runat="server"></asp:ScriptManager>


Daha sonra ise tasarlayacagimiz pencerenin tasinmasina olanak saglayacak olan kontrolümüz DragPanelExtender' i sayfamiza ekliyoruz ve name propertisini dpeTasimaci yapiyoruz. Panellerimiz eklendikten sonra dpeTasimaci kontrolümüzün birkaç özelligini degistirecegiz. Ve penceremizi tasarlama kismina geçiyoruz.

 

<cc1:DragPanelExtender ID="dpeTasimaci" runat="server"/>


Ana pencere olarak kullanacagimiz panelimizi ekliyoruz. Ismini pnlMainPanel yapiyoruz.

 

 

<asp:Panel ID="pnlMainPanel" Width="200" runat="server">

</asp:Panel>


Daha sonra pnlMainPanel içerisine penceremize baslik görevini yapacak olan panelimizi ekliyoruz. Ve basligina bir metin giriyoruz. Örn: Panel Basligimiz.

 

 

<asp:Panel ID="pnlMainPanel" Width="200" runat="server">

  <asp:Panel ID="pnlPanelBaslik" BackColor="OrangeRed" runat="server">

     <br />Panel Basligimiz

  </asp:Panel>

</asp:Panel>


Son olarak panelimizin içerigini temsil edecek olan bir panel daha ekliyoruz ve ismini pnlPanelIcerik olarak degistiriyoruz. Ve dpeTasimaci kontrolümüzün TargetControlId özelligine "pnlMainPanel" yaziyoruz. Yani bu kontrole bagli olacak. DragHandleId özelligine ise pnlPanelBaslik yaziyoruz. En son  "body" taginin kapandigi satirin üstüne asagidaki scripti ekliyoruz. Ve islemimiz bitiyor.

 

 

<script type="text/javascript">

    function setBodyHeightToContentHeight() {

document.body.style.height=Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px";

    }

    setBodyHeightToContentHeight();

    window.attachEvent('onresize', setBodyHeightToContentHeight);

</script>    


Ve sayfamizin son hali:

 

 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="smScriptManger" runat="server"></asp:ScriptManager>

    <div>

        <cc1:DragPanelExtender ID="dpeTasimaci" runat="server" DragHandleID="pnlPanelBaslik" TargetControlID="pnlMainPanel"/>

            <asp:Panel ID="pnlMainPanel" Width="200" runat="server">

                <asp:Panel ID="pnlPanelBaslik" BackColor="OrangeRed" runat="server">

                    <br />Panel Basligimiz

                </asp:Panel>

                <asp:Panel ID="pnlPanelIcerik" BackColor="Bisque" Height="200" runat="server">

                    <div>

                        <br />Panelimizin Içerigi

                    </div>

                </asp:Panel>

            </asp:Panel>

    </div>

    </form>

    <script type="text/javascript">

        function setBodyHeightToContentHeight() {

            document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px";

        }

        setBodyHeightToContentHeight();

        window.attachEvent('onresize', setBodyHeightToContentHeight);

    </script>   

</body>

</html>

 

Siz de düşüncelerinizi yazabilirsiniz:

;