NavButtons的理解

本文介绍了一个自定义的Web控件NavButtons,该控件包含前一页和下一页按钮,并支持点击事件处理。通过设置NextText和PreviousText属性可以自定义按钮上的文本。

using System;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;


namespace MSPress.ServerControls {
    [
    DefaultEvent("ClickNext"),
    DefaultProperty("NextText")
    ]
    public class NavButtons: WebControl, IPostBackEventHandler {
       
        private static readonly object EventClickNext = new object();
        private static readonly object EventClickPrevious = new object();
             
        [
        Bindable(true),
        Category("Behavior"),
        DefaultValue(""),
        Description("The text to display on the Next button")
        ]
        public virtual string NextText {
            get {
                string s = (string)ViewState["NextText"];
                return((s == null) ? String.Empty : s);
            }
            set {
                ViewState["NextText"] = value;
            }
        }
       
        [
        Bindable(true),
        Category("Behavior"),
        DefaultValue(""),
        Description("The text to display on the Previous button")
        ]
        public virtual string PreviousText {
            get {
                string s = (string)ViewState["PreviousText"];
                return((s == null) ? String.Empty : s);
            }
            set {
                ViewState["PreviousText"] = value;
            }
        }
       
        [
        Category("Action"),
        Description("Raised when the Next button is clicked")
        ]
        public event EventHandler ClickNext {
            add {
                Events.AddHandler(EventClickNext, value);
            }
            remove {
                Events.RemoveHandler(EventClickNext, value);
            }
        }
        [
        Category("Action"),
        Description("Raised when the Previous button is clicked")
        ]
        public event EventHandler ClickPrevious {
            add {
                Events.AddHandler(EventClickPrevious, value);
            }
            remove {
                Events.RemoveHandler(EventClickPrevious, value);
            }
        }  

        // Invokes delegates registered with the ClickNext event.
        protected virtual void OnClickNext (EventArgs e) {
            EventHandler clickNextHandler = (EventHandler)Events[EventClickNext];
            if (clickNextHandler != null) {
                clickNextHandler(this, e);
            } 
        }
    
        // Invokes delegates registered with the ClickPrevious event.
        protected virtual void OnClickPrevious (EventArgs e) {
            EventHandler clickPreviousHandler = (EventHandler)Events[EventClickPrevious];
            if (clickPreviousHandler != null) {
                clickPreviousHandler(this, e);
            } 
        }

        // Method of IPostBackEventHandler that raises postback events.
        void IPostBackEventHandler.RaisePostBackEvent(string eventArgument){
            if (eventArgument == "Previous")
                OnClickPrevious(EventArgs.Empty);
            else if (eventArgument == "Next")
                OnClickNext(EventArgs.Empty);
        }

     
        protected override void Render(HtmlTextWriter writer) {
            // Ensures that this control is nested in a server form.
            if (Page != null) {
                Page.VerifyRenderingInServerForm(this);
            }
            base.Render(writer);
        }

        protected override void RenderContents(HtmlTextWriter writer) {
            writer.AddAttribute(HtmlTextWriterAttribute.Onclick, Page.GetPostBackEventReference(this, "Previous"));
            writer.AddAttribute("language", "javascript");
            writer.RenderBeginTag(HtmlTextWriterTag.Button);
            writer.Write(this.PreviousText);
            writer.RenderEndTag();

            writer.AddAttribute(HtmlTextWriterAttribute.Onclick, Page.GetPostBackEventReference(this, "Next"));
            writer.AddAttribute("language", "javascript");
            writer.RenderBeginTag(HtmlTextWriterTag.Button);
            writer.Write(this.NextText);
            writer.RenderEndTag();
        }     
    }   
}

 

``` <section class="vs-hero-wrapper space-extra-bottom" style="max-width: 1920px; margin: 0 auto;"> <div class="vs-hero-carousel" data-height="770" data-container="1900" data-slidertype="relative" data-navbuttons="true"> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder01.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder02.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder03.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder04.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder05.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder06.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder07.jpg" class="ls-bg" alt="bg" decoding="async"> </div> </div> </section>```想每一張圖在後新增blur圖, 並用使用最大化寬度, 並不用css, 直接在html內
03-16
``` <section class="vs-hero-wrapper "> <div class="vs-hero-carousel" data-height="770" data-container="1900" data-slidertype="responsive" data-navbuttons="true"> <div class="vs-wave-shape style3"> <svg viewBox="0 0 1920 295" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="wave-path" fill-rule="evenodd" clip-rule="evenodd" d="M1920 295V202.758C1906.48 131.342 1843.63 77.168 1768.34 77.168C1739.37 77.168 1711.54 85.1814 1687.4 100.128C1650.68 38.4074 1584.56 0 1511.11 0C1412.1 0 1329.2 70.2842 1309.68 163.577C1294.03 136.928 1265.08 119 1232 119C1215.11 119 1198.88 123.673 1184.8 132.389C1163.39 96.397 1124.83 74 1082 74C1022.17 74 972.422 118.018 963.444 175.369C947.459 160.855 926.246 152 903 152C886.11 152 869.88 156.673 855.803 165.389C834.387 129.397 795.832 107 753 107C710.158 107 672.487 129.569 651.251 163.442C635.542 150.075 615.199 142 593 142C576.11 142 559.88 146.673 545.803 155.389C524.387 119.397 485.832 97 443 97C400.012 97 362.23 119.723 341.034 153.789C324.552 132.631 298.841 119 270 119C253.11 119 236.88 123.673 222.803 132.389C201.387 96.397 162.832 74 120 74C53.8333 74 0.000244141 127.833 0.000244141 194C0.000244141 194.41 0.000244141 194.835 0.0152435 195.245L0.000244141 195.248V295H1920Z" /> </svg> </div> <!-- Slide 1--> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder01.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <!-- Slide 2--> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder02.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <!-- Slide 3--> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder03.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <!-- Slide 3--> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder04.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <!-- Slide 3--> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder05.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <!-- Slide 3--> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder06.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <!-- Slide 3--> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder07.jpg" class="ls-bg" alt="bg" decoding="async"> </div> </div> </section>```想<div class=“vs-wave-shape style3”>on top class=“ls-slide” 並跟隨ls-slide底部, 結合在html , 不修改及增加css, 以及在图片上方
03-14
``` <section class="vs-hero-wrapper "> <div class="vs-hero-carousel" data-height="770" data-container="1900" data-slidertype="responsive" data-navbuttons="true"> <div class="vs-wave-shape" style="position: absolute; z-index: 40; bottom: -25px; width: 100%; height: 295px;"> <svg viewBox="0 0 1920 295" style="width: 100%; height: 100%;" preserveAspectRatio="none"> <path fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M1920 295V202.758C1906.48 131.342 1843.63 77.168 1768.34 77.168C1739.37 77.168 1711.54 85.1814 1687.4 100.128C1650.68 38.4074 1584.56 0 1511.11 0C1412.1 0 1329.2 70.2842 1309.68 163.577C1294.03 136.928 1265.08 119 1232 119C1215.11 119 1198.88 123.673 1184.8 132.389C1163.39 96.397 1124.83 74 1082 74C1022.17 74 972.422 118.018 963.444 175.369C947.459 160.855 926.246 152 903 152C886.11 152 869.88 156.673 855.803 165.389C834.387 129.397 795.832 107 753 107C710.158 107 672.487 129.569 651.251 163.442C635.542 150.075 615.199 142 593 142C576.11 142 559.88 146.673 545.803 155.389C524.387 119.397 485.832 97 443 97C400.012 97 362.23 119.723 341.034 153.789C324.552 132.631 298.841 119 270 119C253.11 119 236.88 123.673 222.803 132.389C201.387 96.397 162.832 74 120 74C53.8333 74 0.000244141 127.833 0.000244141 194C0.000244141 194.41 0.000244141 194.835 0.0152435 195.245L0.000244141 195.248V295H1920Z" /> </svg> </div> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder01.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder02.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder03.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder04.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder05.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder06.jpg" class="ls-bg" alt="bg" decoding="async"> </div> <div class="ls-slide" data-ls="duration:12000; transition2d:5; kenburnszoom:out; kenburnsscale:1.1;"> <img width="1920" height="770" src="upload/silder/silder07.jpg" class="ls-bg" alt="bg" decoding="async"> </div> </div> </section>```class="vs-wave-shape" 想隋視窗高度自動調整
03-14
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值