. NET custom JS control that uses object-oriented thinking to encapsulate controls (the first day of development of. NET custom controls)

Hello everyone! My name is Liu, I'm glad you can see the article I share! Hope to be helpful to you!

First, let's look at a few examples to see how to customize the controls!

Business requirements: Make a button object that belongs to you, and then call it like Winfrom:

First we create a new MyControls js file: (Insert the following code)

1 //the object-oriented idea used here is to create a new button object2 varbutton =function(ClientId) {3              This. Control =NULL;//Properties: The button object's own4              This. ID =NULL;//the ID of the button object5              This. Value =NULL;//the value displayed by the button object6              This. Click =NULL;//Click events for Button Objects7             //Next is the initialization, the properties of all the buttons8              This. init =function () {9                  This. id = ClientId;//This is the ID that the page passed over.Ten                  This. Control = $ ("#" + ClientId);//This is the control that is bound by the ID One                 varbutton_html = ' <div href= ' # "id=" Button_ ' +this.id+ ' "class=" button "> ' + This. Value + ' </div> ';//This is the HTML file we want to insert. A                  This. Control.after (button_html);  -                //Binding a point-and- Click event -$ ("#button_" +this.id+). Unbind ("click"). Bind ("click", This. click);  the                  This. Control.hide ();//hide the current control -             }; -              -}

What do we do with this object next?

First, we first import the jquery plugin

And then we're going to introduce the path to this file:

Next write the style of the button:

<style type= "Text/css" >               . button {            float: left; Background-color: #808080; Font-family: Young round; Font-size:large; font-weight:bold;         }     </style>

Next, we'll write in your Web page:

<div id= "btn" ></div>   varnew button ("btn");    Here is  a new button for the object, there is no feel very like  the        development of winfrom = "I am a good person";    Here is the attribute assignment        function for him   () {   //Here is the button's Click event               alert (1);        }        Btn_button.init ();                 Then initialize the button  , note!!!   </script>

So we can get the following effect:

Click to pop up a prompt, I believe you can do it.

Summarize:

This seems to be easy to understand, but is there any difficulty in writing a custom control like this, or can it be more simplistic?

Next chapter I will be on his basis for encapsulation, integration, polymorphism, I believe everyone should have heard it? and the button's function is not powerful enough,

Why can't we make this button a little bit more awesome?

. NET custom JS control that uses object-oriented thinking to encapsulate controls (the first day of development of. NET custom controls)