Script Manager Use:

<cc2:ScriptManager EnableNoConflict="true" ID="ScriptManager1" runat="server" jQueryCss="~/css/smoothness/jquery-ui-1.7.1.custom.css" />

Standard ASP.NET panel using the jQuery Draggable Extender

<asp:Panel ID="Panel3" runat="server" BorderWidth="1" Height="100" Width="100">
this is a normal panel
</asp:Panel>

<cc3:Draggable ID="Draggable2" runat="server" AssociatedControl="Panel3" />

Standard ASP.NET panel using the jQuery Droppable Extender

<asp:Panel ID="Panel2" runat="server" BorderWidth="1" Height="100" Width="100">
</asp:Panel>


<cc3:Droppable ID="Droppable1" runat="server" OnClientDropDrop="$(this).fadeOut().fadeIn();" AssociatedControl="Panel2" />

Standard ASP.NET Bulleted List, using the SelectableExtender

<asp:BulletedList ID="BulletedList1" runat="server">
<asp:ListItem Text="AAAA"></asp:ListItem>
<asp:ListItem Text="BBB"></asp:ListItem>
<asp:ListItem Text="CCCC"></asp:ListItem>
</asp:BulletedList>

<cc3:Selectable id="SelectableExtender" runat ="server"
ClientItemStyle="margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px;"
ClientListStyle="list-style-type: none; margin: 0; padding: 0; width: 60%;"
ClientSelectedStyle="background: #F39814; color: white;"
ClientSelectingStyle="background: #FECA40;"
AssociatedControl="BulletedList1" />

Accordian Panel (Server Control)

<cc2:jQueryPanel ID="JQueryPanel1" runat="server" BorderWidth="2" Width="300" Height="300"
Accordian="true">
content here
<cc1:AccordianPanel ID="AccordianPanel1" runat="server" Text="Acc1">ACC1</cc1:AccordianPanel>
<cc1:AccordianPanel ID="AccordianPanel2" runat="server" Text="Acc2">
</cc1:AccordianPanel>
</cc2:jQueryPanel>

Extend the Accordian Panel, add drag and resize

<cc3:Draggable ID="Draggable1" runat="server" AssociatedControl="JQueryPanel1" />
<cc3:Resizeable ID="Resizeable1" runat="server" AssociatedControl="JQueryPanel1" />

Last edited Apr 2, 2009 at 7:00 PM by RobChartier, version 4

Comments

No comments yet.