Overview
JQuery UI WebCotnrols
JQuery Interactive WebControls
JQuery Animations and Effects WebControls
- Animation WebControl
- Effects WebControl
DNA UI Helper Controls

Overview

DJ v1.1.15 impletement all the jQuery ui plugins,jQuery interaction plugins and animations,effects of jQuery 1.3.2,jQuery UI 1.7.2.It provides over 14 JQuery WebControls and UI Helper Controls。 According to the classification of jQuery in the DJ will be divided into categories:JQuery UI WebControls, JQuery Interactive WebControls, DNA UI Helper Controls

Visit DevCenter get all API Reference about the DJ Server Controls

Visit LiveDemo site to view over 100 samples of the DJ Server Controls.

JQuery UI WebCotnrols

JQuery UI WebControls implements all of the jQuery ui plugin widgets. They have their own designer, and the designer support jQuery CSS Framework maintained a Jquery UI WebControls in the design time and run time of the consistency of visual. JQuery UI WebControls including:Accordion Control,Dialog Control,Tabs Control,Slider Control,Progressbar Control,DatePicker Control.

Accordion Control

The Accordion is a web control encapsulat the jQuery UI drappable plugin that allows you to provide multiple views and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains View web controls. Each View control has a template for its Content.

Accordion control properies:


<DotNetAge:Accordion ID="MyAccordion"
          runat="Server"
          AllowCollapseAllSections="false"
          AutoPostBack="false"
          AutoSizeMode="None"
          CollapseAnimation="BounceSlide"
          ContentCssClass="ui-widget-content"
          ContentStyle=""
          HeaderCssClass=""
          HeaderIconCssClass=""
          HeaderSelectedIconCssClass=""
          HeaderStyle=""
          IsClearStyle="false"
          OnClientViewChange=""
          SelectedIndex="0"
          OpenSectionEvent="Click"
>
   <Views>
      <DotNetAge:View Text=""
            ID="View1"
            NavigateUrl=""
            HeaderCssClass=""
            HeaderStyle=""
            Target="_blank">
            <p>View is content is herep>
      DotNetAge:View>
      ...
      <DotNetAge:View />
   Views>
DotNetAge:Accordion>

View the Accordion live demo

Dialog Control

The Dialog is a web control encapsulated the jQuery UI dialog plugin. A Dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default. If the content length exceeds the maximum height, a scrollbar will automatically appear. A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

Dialog server control properties:


<DotNetAge:Dialog ID="MyDialog"
   runat="server"
   AutoOpen="false"
   BgiFrame="true"
   CloseOnEscape="true"
   DialogButtons="None"
   HideEffect="None"
   IconUrl=""
   IsDraggable="false"
   IsResizable="false"
   IsStack="true"
   MaxHeight="0"
   MaxWidth="0"
   MessageText=""
   MinHeight="0"
   MinWidth="0"
   OnClientBeforeClose=""
   OnClientClose=""
   OnClientDrag=""
   OnClientDragStart=""
   OnClientDragStop=""
   OnClientFocus=""
   OnClientOpen=""
   OnClientResize=""
   OnClientResizeStart=""
   OnClientResizeStop=""
   Position="Center"
   ShowEffect="None"
   ShowModal="false"
   Title=""
   ZIndex="1000"
>
  <BodyTemplate>
     Dialog body here
  BodyTemplate>
  <Buttons>
     <DotNetAge:DialogButton 
         CommandArgument=""
         CommandName=""
         OnClientClick=""
         Text="" />
         ...
  Buttons>
   <Target TargetIDs="ControlID1, ... ,ControlIDn" 
               Selector=".ui-widget-header" 
               TargetID="ControlID" />
DotNetAge:Dialog>

View the Dialog Live Demo

Slider Control

The Slider is a web control encapsulated the jQuery UI slider plugin.There are various properties such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.

When a value is chosen using the Slider, it is automatically persisted during full or partial postbacks. The developer can continue to reference the asp:TextBox to get and set the Slider's value.

Silder server control properties


<DotNetAge:Slider ID="MySlider" 
   runat="server"
   AutoPostBack="false"
   BoundControlID="Textbox1"
   BoundControlID1="Textbox2"
   Maximum="100"
   Minimum="0"
   OnClientSliding=""
   OnClientStartSliding=""
   OnClientStopSliding=""
   OnClientValueChanged=""
   Orientation="Horizontal"
   Range="Both"
   Step="1"
   Value="0"
   Value1="-1"
   Width="300"
/>

View the Silder Live Demo

ProgressBar WebControl

The progress bar is designed to simply display the current % complete for a process and can be animated by updating the current values over time. The bar is coded to be flexibly sized through CSS and will scale to fit inside it's parent container by default.
This is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status complete. A determinate progress bar should never fill from left to right, then loop back to empty for a single process.

Progressbar server control properties


<DotNetAge:Progressbar ID="MyProgressbar"
  runat="Server"
  Value="0"
  ShowPercentage="false"
  Resizable="false"
 >
 <PercentageLabelStyle />
DotNetAge:Progressbar>

Tabs Control

Tabs is a ASP.NET WebControl that encapsulated the jQuery UI tabs plugin.Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an Accordion.

By default a Tabs will swap between tabbed sections onClick, but the events can be changed to onHover through an property. Tab content can be loaded via Ajax by setting an NavigateUrl on a View Control.

Tabs server control properties:


<DotNetAge:Tabs ID="MyTabs"
     runat="server"
     ActiveTabEvent="Click"
     AsyncLoad="false"
     AutoPostBack="false"
     Collapsible="false"
     ContentCssClass=""
     ContentStyle=""
     Deselectable="false"
     EnabledContentCache="false"
     HeaderCssClass=""
     HeaderStyle=""
     Height="300"
     OnClientTabAdd=""
     OnClientTabDisabled=""
     OnClientTabEnabled=""
     OnClientTabLoad=""
     OnClientTabRemove=""
     OnClientTabSelected=""
     OnClientTabShow=""
     SelectedIndex="0"
     Sortable="false"
     Spinner=""
     Width="300"
>
   <Animations>
       <DotNetAge:AnimationAttribute AnimationType="opacity" Value="toggle" />
       <DotNetAge:AnimationAttribute AnimationType="height" Value="toggle" />
   Animations>
   <Views>
      <DotNetAge:View Text=""
            ID="View1"
            NavigateUrl=""
            HeaderCssClass=""
            HeaderStyle=""
            Target="_blank">
            <p>View is content is herep>
      DotNetAge:View>
      ...
      <DotNetAge:View />
   Views>
DotNetAge:Tabs>

View the Tabs Live Demo

DatePicker Control

DatePicker is a highly configurable WebControl encapsulated the jQuery UI datepicker plugin. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. It provides client-side date-picking functionality with customizable date format and UI in a popup control. You can interact with the calendar by clicking on a day to set the date, or the "Today" link to set the current date.

By default, the DatePicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date if selected. For an inline Calendar, simply attach the Datepicker to a div or span.

In addition, the left and right arrows can be used to move forward or back a month. By clicking on the title of the calendar you can change the view from Days in the current month, to Months in the current year. Another click will switch to Years in the current Decade. This action allows you to easily jump to dates in the past or the future from within the calendar control.

DatePicker server control properties:


<DotNetAge:DatePicker ID="MyDatePicker"
   AllowChangeMonth="true"
   AllowChangeYear="true"
   AnimationOnShow="show"
   AnotherFormatString="yyyy/MM/dd"
   AppendText=""
   AutoPostBack="false"
   ButtonImageUrl=""
   ButtonText="..."
   CloseButtonText="Done"
   ConstrainInput="true"
   DateFormatString="yyyy/MM/dd"
   DayNames="Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday"
   DefaultDateString=""
   DisplayMode="Picker"
   Duration="0"
   FirstDayOfWeek="0"
   HideIfNoPrevNext="false"
   IsRightToLeft="false"
   LocID="en-Us"
   MaxDateFormat=""
   MinDateFormat=""
   MonthNames="January,February,March,April,May,June,July,August,
September,October,November,December"
   MonthShortNames="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"
   MoveToSelectedDate="true"
   NavigationAsDateFormat="false"
   NextMonthText="Next"
   NumberOfMonths="1"
   OnClientBeforeShow=""
   OnClientBeforeShowDay=""
   OnClientChangeMonthYear=""
   OnClientClose=""
   OnClientSelect=""
   PrevMonthText="Prev"
   ShortDayNames="Sun,Mon,Tue,Wed,Thu,Fri,Sat"
   ShortYearCutOff=""
   ShowButtonImageOnly="false"
   ShowButtonPanel="false"
   ShowCurrentAtPos="0"
   ShowDefaultButtonImage="false"
   ShowIconMode="Focus"
   ShowMonthAfterYear="false"
   ShowOptions=""
   ShowOtherMonths="false"
   StepMonths="1"
   TextForToday="ToDay"
   Value=""
   YearRange=""
>
  <AnotherField />
DotNetAge:DatePicker>

View the DatePicker Live Demo

JQuery Interactive WebControls

JQuery UI WebControls implements all of the jQuery interactive plugins.They have no ui by itself,by they can extend the client functionaly for another Server Controls or HtmlElements.Including Draggable control,Droppable control,Sortable control,Selectable cotnrol,Resizable control.

Droppable Control

Droppable is a ASP.NET WebControl that encapsulat the jQuery UI droppable plugin.Droppable Web Control implement all functions of jQuery UI droppable plugin,it makes droppable plugin not only apply to client elements but also APS.NET WebControls.That is a easy way to using jQuery UI droppable plugin on ASP.NET.
Droppable control properties:


  <DotNetAge:Droppable
      ID="MyDroppable" 
      ActiveCssClass="ui-state-active"
      HoverCssClass="ui-state-highlight"
      Cursor="pointer"
      CursorAt="left:50"
      Container="Parent"
      AllowAddClasses="True"
      Greedy="Flase"
      AutoScroll="True"
      ScrollSpeed="100"
      ScrollSensitivity="50"
      DragHelperOpacity="0.5"
      ZIndex="1000"
      SnapX="50"
      SnapY="50"
      DragGroupName="dropGroup"
      Tolerance="Intersect"
      DragStartDelay="1000"
      DragStartDistance="50"
      DragHelper="Clone"
      Orientation="Both"
      OnClientDragActive="javascript/jQuery script like this:$(this).val();do sth ..."
      OnClientDragDeactive="..." 
      OnClientDragOver="..."
      OnClientDragOut="..."
      OnClientDrop="..."
  >
       <Target Selector="jQuery selector 
                TargetID="ServerControlID"
                TargetIDs="ControlID1,...,ControlIDn" />
       <Accept  />
      <Containsin  />
      <DragHandler  />
      <DisableDraggingElements  />
 <DotNetAge:Droppable>

View the Droppable Live Demo

Draggable WebControl

Draggable is a ASP.NET WebControl that encapsulat the jQuery UI drappable plugin.Draggable Web Control implement all functions of jQuery UI droppable plugin,it makes selected any WebControls or HTML elements draggable by mouse.

Draggable can apply to more than one WebControls and Html Elements at the same time.


<DotNetAge:Draggable ID="MyDraggable"
        runat="server"
        AllowAddClasses="true" 
        AllowSnap="true"
        AutoScroll="true" 
        Container="Parent" 
        Cursor="pointer" 
        DragGroupMinZIndex="1000"
        DragGroupName="myDragGroup" 
        DragHelper="Clone" 
        DragHelperOpacity="0.7" 
        DragStartDelay="1000"
        DragStartDistance="20" 
        OnClientDrag="client script here" 
        OnClientDragStart="..."
        OnClientDragStop="..." 
        DragOrientation="Both" 
        PreventiFrameCapturingMouseEvents="true"
        RefreshPositions="true" 
        Revert="Auto" 
        RevertDuration="1000" 
        ScrollSensitivity="100"
        ScrollSpeed="100"
        SnapMode="Both" 
        SnapOffset="0" 
        SnapX="20"
        SnapY="20" 
        ZIndex="1000">
        <CustomHelperTemplate>
                <div>custom helperdiv>
        CustomHelperTemplate>
        <CursorPosition Left="0px" Top="0px" Right="0px" Bottom="0px" />
        <Target TargetIDs="ControlID1, ... ,ControlIDn" 
                     Selector=".ui-widget-header" TargetID="ControlID" />
        <ConnectToSortable />
        <ContainsIn />
        <DisableDraggingElements />
        <DragHandler />
        <SnapTo />
DotNetAge:Draggable>

View the DraggableLive Demo

Resizable Control

Resizable is a ASP.NET WebControl that encapsulat the jQuery UI resizable plugin makes selected WebControls/Html Elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height.

Resizable control properties:


    <DotNetAge:Resizable ID="MyResizable"
          runat="server"
          AnimateDuration="1000"
          AnimateEasing="swing"
          AspectRatio="0.7"
          AutoHide="true"
          Container="Parent"
          EnabledAnimation="true"
          Handles="e, s, se"
          HelperCssClass="ui-state-highlight"
          MaxHeight="0"
          MinHeight="0"
          MaxWidth="0"
          MinWidth="0"
          OnClientResize="javascript here."
          OnClientResizeStart=""
          OnClientResizeStop=""
          ResizeStartDelay="1000"
          ResizeStartDistance="10"
          ShowSemiTransparentHelper="true"
          SnapX="20"
          SnapY="20"
    >
          <Target TargetIDs="ControlID1, ... ,ControlIDn" 
                     Selector=".ui-widget-header" TargetID="ControlID" />
          <AlsoResize />
          <ContainsIn />
          <DisableResizableElements />
    DotNetAge:Resizable>

View the Resiable Live Demo

Sortable Control

Sortable is a ASP.NET WebControl that encapsulat the jQuery UI resizable it makes selected controls sortable by dragging with the mouse.

Sortable control properties:


<DotNetAge:Sortable ID="MySortable"
    runat="server"
    AllowDropOnEmpty="true"
    AutoScroll="true"
    Container="Parent"
    Cursor="move"
    DragHelper="Clone"
    DragHelperOpacity="0.5"
    DragOrientation="Both"
    DragStartDelay="0"
    DragStartDistance="0"
    ForceHelperSize="true"
    ForcePlaceholderSize="true"
    OnClientSort="javascript puts there"
    OnClientSortActivate=""
    OnClientSortBeforeStop=""
    OnClientSortChange=""
    OnClientSortDeactivate=""
    OnClientSortOut=""
    OnClientSortOver=""
    OnClientSortReceive=""
    OnClientSortRemove=""
    OnClientSortStart=""
    OnClientSortStop=""
    OnClientSortUpdate=""
    PlaceHolderCssClass="placeholder"
    Revert="true"
    ScrollSensitivity="10"
    ScrollSpeed="100"
    SnapX="10"
    SnapY="10"
    Tolerance="Pointer"
    ZIndex="1000"
>
      <Target TargetIDs="ControlID1, ... ,ControlIDn" 
                 Selector=".ui-widget-header" TargetID="ControlID" />
      <ConnectWith />
      <ContainsIn />
      <CursorPosition Bottom="0" Left="0" Right="0" Top="0" />
      <DisableDraggingElements />
      <DragHandler />
      <DisableSortableItems />
DotNetAge:Sortable>

View the Sortable Live Demo

Selectable Control

Selectable is a ASP.NET WebControl that encapsulat the jQuery UI selectable plugin.Selectable Web Control implement all functions of The jQuery UI selectable plugin.Selectable allows for Controls to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.
Selectable control properties:


<DotNetAge:Selectable ID="MySelectable"
    runat="server"
    AutoRefresh="false"
    OnClientSelected="javascript puts here"
    OnClientSelecting=""
    OnClientSelectStart=""
    OnClientSelectStop=""
    OnClientUnselect=""
    OnClientUnselecting=""
    SelectingStartDelay="1000"
    SelectingStartDistance="10"
    Tolerance="Touch">
    <Target TargetIDs="ControlID1, ... ,ControlIDn" 
                 Selector=".ui-widget-header" TargetID="ControlID" />
    <DisableResizableElements />
    <Filter />
DotNetAge:Selectable>

View the Selectable Live Demo

JQuery Animations and Effects WebControls

Animation WebControl

Effects WebControl

DNA UI Helper Controls

UI Helper controls is a set of the controls that can gernate the commonly used html elements and they all supports jQuery CSS Framework.

DNA UI Helper controls including
SimpleListView,SimpleButton

SimpleListView Control

SimpleListView is a server control supports databounding,ItemTemlate,and it render items to "ul li" elements

SimpleButton Control

SimpleButton is a button control that supports jQuery CSS Framework.

CollapsablePanel Control

CollapsablePanel control is a Web Control that can contains another controls just like Panel Control.It has own header and supports jQuery CSS Framework,you can click the head to collapse/expand the CollapsablePanel.

Average:3.7
Reads
(5234)
Permalink

DJ WebControls