控件(八)——Wizard控件完成注册过程详解

Wizards是一种为用户提供了呈现一连串步骤的基础架构的控件。它方便了我们进行导航设置。该控件几乎所有外观特征几乎都可以通过样式和模版来自定义,包括各种各样的按钮和连接、标题和页眉页脚、工具条和步骤。

下面介绍今天的例子:

我们先添加一个Wizard控件,首先选择一个合适的样式,然后打开“添加/移除WizardSteps编辑器”,添加以下五部分内容:

 

基本信息栏显示:

文本框ID分别为:tbnname、tbnpws

 

详细信息显示:

所在省份后面是一个DropDownList控件,ID为:ddldf,我们就在后面编辑项里面随便添加几个省份。是否公开详细信息下面是一个RadioButtonList控件,ID为rdbgk:

兴趣爱好:

这里是多个CheckBox,很简单。默认ID即可。

 

会员等级:

会员等级这里也是一个DropDownList控件,ID为ddldj,然后我们随便在编辑项里面添加几项会员选项就可以。

 

完成:

这里面没有什么需要做具体介绍的,很简单。

 

后台代码:

    public partial class kongjian17 : System.Web.UI.Page
    {
        /// <summary>
        /// Wizard控件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }

        protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
        {
            string name = "尊敬的:" + tbname.Text;
            Response.Write("<script>alert('" + name + "感谢您注册')</script>");
        }

        protected void Wizard1_ActiveStepChanged(object sender, EventArgs e)
        {
            lblname.Text = tbname.Text; //直接对应文本框或者下拉列表。
            lblpws.Text = tbpws.Text;

            if (rdbgk.SelectedValue == "不")
            {
                lblsf.Text = "用户隐藏了详细信息";
                lblpws.Visible=false;
            }
            else
            {
                lblsf.Text = "省份:" + ddlsf.SelectedValue;
                lblPhoto.Text = "电话:" + tbpphoto.Text;
            }
            CheckBoxList cbl = (CheckBoxList)mb.ContentTemplateContainer.FindControl("chk");
            for (int i = 0; i < cbl.Items.Count; i++)
            {
                if (cbl.Items[i].Selected)
                {
                    Label lbl = new Label();
                    lbl.ID = "lbl" + i;
                    lbl.Text = cbl.Items[i].Text + "<br>";
                    ph.Controls.Add(lbl);
                }
            }
        }
    }


 

 

运行后显示的界面是:

 

至于具体演示效果,这里就不做展示了,呵呵,就跟上面设计时的截图差不多,大家自己点点就明白了。

当然,大家仍然可以在模版中添加更多有意思的功能,由于篇幅问题,我也不多做介绍了,大家自己探索吧。

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
WEUI 风格的 Wizard 控件是一个用于指引用户完成多步骤操作的 UI 组件。下面是一个简单的步骤: 1. 在 HTML 中创建一个包含多个步骤的 Wizard 容器: ```html <div class="weui-wizard"> <div class="weui-wizard__steps"> <div class="weui-wizard__step"></div> <div class="weui-wizard__step"></div> <div class="weui-wizard__step"></div> </div> <div class="weui-wizard__content"></div> </div> ``` 2. 在 CSS 中定义 Wizard 容器的样式: ```css .weui-wizard { display: flex; flex-direction: column; align-items: center; } .weui-wizard__steps { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; } .weui-wizard__step { width: 20px; height: 20px; border-radius: 50%; background-color: #d8d8d8; margin-right: 10px; } .weui-wizard__step:last-child { margin-right: 0; } .weui-wizard__step--active { background-color: #07c160; } ``` 3. 在 JavaScript 中实现 Wizard 控件的逻辑: ```javascript var wizard = document.querySelector('.weui-wizard'); var steps = wizard.querySelectorAll('.weui-wizard__step'); var content = wizard.querySelector('.weui-wizard__content'); var currentStep = 0; function showStep(stepIndex) { if (stepIndex < 0 || stepIndex >= steps.length) { return; } currentStep = stepIndex; steps.forEach(function(step, index) { if (index < stepIndex) { step.classList.add('weui-wizard__step--active'); } else { step.classList.remove('weui-wizard__step--active'); } }); content.innerHTML = 'Step ' + (stepIndex + 1); } showStep(currentStep); document.querySelector('.weui-btn_primary').addEventListener('click', function() { showStep(currentStep + 1); }); document.querySelector('.weui-btn_warn').addEventListener('click', function() { showStep(currentStep - 1); }); ``` 这个示例代码实现了一个包含多个步骤的 Wizard 控件,用户可以通过点击“下一步”和“上一步”按钮来切换步骤。在 showStep 函数中,我们使用了 CSS 类来标识当前步骤。在用户点击“下一步”和“上一步”按钮时,我们调用 showStep 函数来更新当前步骤的状态。 这只是一个简单的示例,你可以根据自己的需求来扩展此控件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值