Asp.net Ajax Control Toolkit design and programming memorandum (color eye view version)-4th back (ninja album)

Color is set-design, from the perspective of web designers. Because of my own particularity (I am a software engineer, but I have a strong interest in web design), my series of articles not only start from the programming perspective, we will also detail the AjaxControlToolkit series controls from the design point of view, to show you the final structure and style of these controls, as well as how to modify their styles to suit your overall web page planning.
You can also look at the text in the text. This small view means: the level is limited, you can only look at the leopard. Therefore, please advise me in many places.

Related links:
Asp.net Ajax Control Toolkit design and programming memorandum (color eye view version) -- 1st back (Persimmon album)
Asp.net Ajax Control Toolkit design and programming memorandum (color eye view version) -- 2nd back (F4 album)
Asp.net Ajax Control Toolkit design and programming memorandum (color eye view version) -- 3rd (UE album)
Asp.net Ajax Control Toolkit design and programming memorandum (color eye view version)-4th back (ninja album)
Asp.net Ajax Control Toolkit design and programming memorandum (color eye view version) -- 5th (wrong album)
Asp.net Ajax Control Toolkit design and programming memorandum (color eye view version)-6th back (Habit album)

Body:

When I used to do some small websites, I always felt that the web page was empty and I didn't know what to put. However, after you have worked on a large website or a large enterprise internal management system, you will find that the webpage is actually "golden" (that is, the reality of our previous project ). Space in many places (especially in tables) is valuable. If you try to put so many things on the page without a scroll bar, it will really hurt you. Note: I mean not to display a scroll bar, rather than a scroll bar. Why do not scroll bars appear? Now you can open 163, drag the scroll bar to the bottom, and check the content. Ask yourself, have you followed the bottom items? As the page grows, the closer the content to the bottom of the page, the less likely it will be to attract the attention of viewers. The horizontal scroll bar is strictly prohibited for our projects, because the horizontal scroll bar does not meet the user's operation habits. However, I have also seen exceptions. I have seen a website with a horizontal view. All pages only have a horizontal scroll bar instead of a vertical scroll bar. However, it is a personal website with an open personality. However, for commercial websites, do not have a good personality. The combination of horizontal and vertical scroll bars is definitely forbidden, which is a challenge for viewers. What should I do if I try not to have a scroll bar while there are a lot of project content? Fortunately, Asp.net Ajax Control Toolkit provides a series of controls that can save a lot of space. They are hidden (hidden, not displayed at ordinary times, and displayed only when used at critical moments), folded (fold, but very small at ordinary times, it can be easily expanded to display content) to protect the large amount of space on our web page. The pronunciation and meaning of "hidden" and "fold" are a bit like "ninja", so this subtitle is called "ninja" album. (Another title party was born-_-B ...) Let's briefly introduce three widgets (in fact, there are many similar Widgets. Here we will only list them ).

10: DropDown
This control will surely surprise you with the shanchi Wolong of the hidden series and your imagination. The following is a small example. When the text box needs to (or must) Fill in some data that already exists in the Database, let the user choose, instead of letting the user press the keyboard to type, not only can improve the user experience, it can also effectively avoid errors caused by users. In my example, a list will pop up immediately when the text box gets the focus (the search function can be added when the data volume is large) for users to choose from, in this way, the error caused by incorrect name is effectively avoided. I personally think it is a good practice. Looking at its attributes, the official website documentation provides little, and I have made some supplements.
1. TargetControlID-The ID of the control which needs a drop-down. [target control]
2. DropDownControlID-The ID of the control which will be displayed as the dropdown. [control to be pulled down]

Additional information:
3. DropArrowBackColor-drop-down arrow background color
4. DropArrowImageUrl-drop-down arrow image url
5. DropArrowWidth-drop-down arrow width (but I found it invalid in the test. Please kindly advise)
6. HighlightBackColor-highlight background color
7. HighlightBorderColor-highlighted border color

Do not set DropArrowImageUrl alone. You will find that the results will disappoint you. Because the so-called arrow image is the small black spot in the center of 5x5 pixels. Only small images can be displayed in the center. We need to modify this. However, it does not provide this attribute for you to modify the display position of the arrow image. Therefore, we can only solve the problem by ourselves. The solution still needs to be analyzed from the final display structure, but I have to admit that this DOM makes me very puzzled and cannot fully understand the idea of being an advanced person who designed it.
The four divs are used to act as the four sides. In addition, the four edges seem to be used to represent HighlightBorderColor. This makes me not quite understand. What is really useful is ajax _ dropdown_arrow_wrapper Style class (its name is fixed ). First look at its default style:. ajax _ dropdown_arrow_wrapper {}{ LEFT: 50%; POSITION: absolute; TOP: 50%}

It is precisely left: 50% and top: 50% that make them only show in center. You only need to modify the DropArrowImageUrl value, and then modify the left and top values to make the image display better. The following is a reference style. Note that the previous # form1 is required to improve the style priority. Otherwise, the style priority is too low and does not work. # Form1. ajax _ dropdown_arrow_wrappe1r {}{ LEFT: 50%; POSITION: absolute; TOP: 4px ;}

The display effect is as follows. The reason why the panel has a large offset to the right is that I set the panel padding-left.

11. CollapsiblePanel
"Discount" series of cute. Don't confuse one of her attributes. In fact, this is a very gentle control. Gentle enough that you can adjust her freely, and its appearance is completely in your hands. You can create an html page as if you were "Drawing" an html page, because it does not have its own appearance. The so-called "God" is not "shape ", all rendering is based on the design of the target control. At the same time, its final DOM is also very simple. The following is a daunting attribute:
1. TargetControlID-the Panel to operate expand and collapse. [target control, recommended Panel]
2. CollapsedSize-The size of the target, in pixels, when it is in the collapsed state. [size during expansion]
3. ExpandedSize-The size of the target, in pixels, when it is in the opened state. [size exposed during contraction]
4. collapsed-Specifies that the object shold initially be collapsed or expanded. set this to match your initial size. in this case, we initially set the panel to a height of 0 to match the CollapsedSize property, so when the page first renders, we don't see the panel expanded. check whether the initial status is expanded]
5. AutoCollapse-True to automatically collapse when the mouse is moved off the panel. [whether to automatically contract when the mouse moves up]
6. AutoExpand-True to automatically expand when the mouse is moved over the panel. [Do You Want to expand automatically when you move the mouse]
7. ScrollContents-True to add a scrollbar if the contents are larger than the panel itself. False to just clip the contents. [whether to include the scroll bar]
8. expandControlID/CollapseControlID-The controls that will expand or collapse the panel on a click, respectively. if these values are the same, the panel will automatically toggle its state on each click. [target control that triggers the expand/Contract event]
9. textLabelID-The ID of a label control where the "status text" for the panel will be placed. the panel will replace the internal HTML of this control (e.g. any HTML between the tags ). [Label control indicating the status]
10. collapsedText-The text to show in the control specified by TextLabelID when the panel is collapsed. this text is also used as the alternate text of the image if ImageControlID is set. [description displayed during contraction]
11. expandedText-The text to show in the control specified by TextLabelID when the panel is opened. this text is also used as the alternate text of the image if ImageControlID is set. [Text displayed during expansion]
12. imageControlID-The ID of an Image control where an icon indicating the collapsed status of the panel will be placed. the extender will replace the source of this Image with the CollapsedImage and ExpandedImage urls as appropriate. if the ExpandedText or CollapsedText properties are set, they are used as the alternate text for the image. [Image control used to describe the status]
13. CollapsedImage-The path to an image used by ImageControlID when the panel is collapsed [image displayed during contraction]
14. ExpandedImage-The path to an image used by ImageControlID when the panel is expanded [image displayed upon expansion]
15. ExpandDirection-can be "Vertical" or "Horizontal" to determine whether the panel expands top-to-bottom or left-to-right. [orientation, Vertical or Horizontal]
There is nothing to say about this control. The control of appearance is totally concerned with the design of those target controls. I just want to give a picture. Are you familiar with it? Simulate the left side of the winXP Resource Manager. Haha ~

12. HoverMenu
The king of the "hidden" series. Literal translation is a floating menu, but its function is not just to pop up the menu, it can take you further with your imagination. The following example demonstrates its web game applications (web games with no clients and B/S-based, with the development of network bandwidth and the emergence of some good game ideas, it is bound to have a place in the future online game market), this example is only for throwing bricks, please do not be more serious.
Let's take a look at the attributes:
1. TargetControlID-The control that the extender is targeting. When the mouse cursor is over this control, the hover menu popup will be displayed. [target control]
2. PopupControlID-The ID of the control to display when mouse is over the target control. In this case, it's just a simple panel with two links: [pop-up control]
3. hoverCssClass-The CSS class to apply to the target when the hover menu popup is visible. [display the style of the original target control after the control is popped up. Note: it does not inherit the style of the original target control, but directly overwrites it.]
4. PopupPostion-Where the popup shocould be positioned relative to the target control. Can be Left (Default), Right, Top, Bottom, Center. [Pop-up location]
5. offsetX/OffsetY-The number of pixels to offset the Popup from it's default position, as specified by PopupPosition. so if you want it to popup to the left of the target and have a 5px space between the popup and the target, the value shocould be "-5 ". [X/Y coordinate OFFSET]
6. popDelay-The time delay from when the mouse enters the target to when the popup is shown, in milliseconds. default is 100. [Time Delay of pop-up/rollback, in milliseconds. The default value is 100 milliseconds]
This control has a more free pop-up location than DropDown. You can only view the DropDown name in the lower part ., the X/Y offset attribute is also provided, so you can bring up this control at any position on the page. In addition, the HoverCssClass attribute is provided to set the style of the target control after the floating control is popped up. Therefore, this HoverMenu is much more friendly than DropDown. Recommended. The key to simplicity is your imagination and design capabilities. Not to mention, paste a picture directly:

In fact, Asp.net Ajax Control Toolkit also has many "ninja" controls. I will explain them from other perspectives in the future. Today, I will not talk much about it. I want to know what to do later, and listen to the next decomposition.

After three days of leave last week, I came back and found that I had accumulated a lot of work, so I didn't release the 4th back until today. I really can't help anyone who is interested in this series. For some special reasons, I have to rush back to a large number of jobs as soon as possible, and I have to finish some work ahead of schedule. Therefore, a slight delay of 2 days may be required for 5th requests. I can only say sorry, and thank you for your continued attention to this series. Thank you.

Keyword: ajax HoverMenu, ajax CollapsiblePanel, ajax DropDown, asp.net ajax, ajax tutorial, ajax basic tutorial, ajax technology, ajax.net, asp ajax, ajax design, ajax web page design, ajax Performance