Bu makalede Ajax Kontrol Toolkit componentlerinden DragPanelExtender ve asp.net kontrollerinden olan panel kontrolü kullanılarak sürükle bırak pencere

 Bu örnekte asp.nette ajax kontrol toolkit DragPanelExtender ve asp.net Panel kullanılarak sürükle bırak pencere tasarlayacağız. Bu işlem için ilk önce sayfamıza bir adet ScriptManager ekliyoruz. İsmini smScriptManger olarak değiştiriyoruz. Alışkanlık gereği :). Bu işlem zorunlu değil.

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


Daha sonra ise tasarlayacağımız pencerenin taşınmasına olanak sağlayacak olan kontrolümüz DragPanelExtender' i sayfamıza ekliyoruz ve name propertisini dpeTasimaci yapıyoruz. Panellerimiz eklendikten sonra dpeTasimaci kontrolümüzün birkaç özelliğini değiştireceğiz. Ve penceremizi tasarlama kısmına geçiyoruz.

 

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


Ana pencere olarak kullanacağımız panelimizi ekliyoruz. İsmini pnlMainPanel yapıyoruz.

 

 

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

</asp:Panel>


Daha sonra pnlMainPanel içerisine penceremize başlık görevini yapacak olan panelimizi ekliyoruz. Ve başlığına bir metin giriyoruz. Örn: Panel Başlığımız.

 

 

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

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

     <br />Panel Başlığımız

  </asp:Panel>

</asp:Panel>


Son olarak panelimizin içeriğini temsil edecek olan bir panel daha ekliyoruz ve ismini pnlPanelIcerik olarak değiştiriyoruz. Ve dpeTasimaci kontrolümüzün TargetControlId özelliğine "pnlMainPanel" yazıyoruz. Yani bu kontrole bağlı olacak. DragHandleId özelliğine ise pnlPanelBaslik yazıyoruz. En son  "body" tagının kapandığı satırın üstüne aşağıdaki scripti ekliyoruz. Ve işlemimiz 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 sayfamızın 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 Başlığımız

                </asp:Panel>

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

                    <div>

                        <br />Panelimizin İçeriği

                    </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>

 

İlgili Makaleler

Daha Fazla

Bu yazıya 0 yorum yapılmış.

Yorum Gönder