Common interaction instance: axure Common Interactive Instance Calendar control

Source: Internet
Author: User
Tags date

Article Description: axure Common Interactive Instance Tutorial: Calendar control Selection date.

Last shared a axure commonly used interactive examples with text boxes and drag-and-drop tutorials, there are many sites have reproduced, the description of the content is still a bit of value. Share a common interaction instance in a Calendar control today: Select a date.

1. Calendar control

First step:

Drag a two text panel and a rectangular box from the control library. In a Text panel control, enter the Select Date (label is named Text 1), and the other type a default date (labeled Text 2), and edit the text box control's properties as: a text box.

Step Two:

To open the Calendar control, you need to be aware that there is no calendar control in the General Control Library, you can download one online, I use a custom control that has been done before:

Step Three:

Combine the calendar controls that you just made into a single control, turn the right key into a dynamic panel, set the label: Calendar control, drag it to the bottom of the text box, and set it to hidden, as shown in the figure:

2. Adding events

First step:

Click Text Box 2, add onclick event, set the following figure:

Step Two:

Double-click the dynamic panel under Calendar controls, select 26 to add events, and set the following figure:

1 set the value of the text 2, that is, select 26 o'clock, the selected value is equal to text 2;

2 Select the need to hide the calendar control;

(Here the numbers casually choose, due to the limitations of axure itself, if you want to check the effect of a number of selected dates, follow this step more set several numbers)

Step Three:

Select 20, repeat the second step; (This option 26th and 14th can be passed to text 2)

When you set it up, click Save to create a Web page to see the effect. If you download the Calendar control has a full month, then you can directly switch the month of interaction with the date of the combination, so that the entire calendar interaction can be done, you can try ~ ~

Author: Leo



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.