It’s been a long time since I published Jane’s book. This is mainly because I have been writing on my own blog since July when I put my own blog on the Internet. As for why I didn’t send it to Jane at the same time, mainly because I was lazy… However, my blog is not SEO friendly, no one came to my blog, so I went back to Jane book, haha.

Needless to say, today’s writing is when I do the design out, is three JS plug-ins, respectively is a custom single box, custom drop down list, custom calendar card. Preview image:

Don’t tease me about my aesthetic… The link is at the bottom, you can check it out below, I have made partial compatibility (Firefox, Chrome, Edge). In addition, I am not prepared to elaborate on the practice, but more about the idea.

Radio buttons

This is the easiest one. Here’s my idea

  • By passing the DOM element (which containsinput#radio) to find theminput#radionode
  • Generates an element (e.gi) to replace the original radio element (hide the original radio)
  • Copy properties from the original radio to the new radio
  • Add events to ensure that the newly generated radio is radio selected

The resulting DOM, such as the following DOM node:

The code is as follows:

function selfRadio(dom) {
	// The DOM element does not exist
	if(typeof dom == 'undefined' || dom.length == 0) return false;
	// Get the put#radio element below the DOM
	var oInput = dom.getElementsByTagName('input');		
	var aRadio = [];	
	for (var i = 0,j=0; i < oInput.length; i++) {
		if(oInput[i].getAttribute('type') = ='radio') {				
			// Get the upper-level node
			var oParNode = oInput[i].parentNode; 
			// use I as the new input#radio
			var oRadio   = document.createElement('i');
			oRadio.setAttribute('name' , oInput[i].getAttribute('name'));
			oRadio.setAttribute('value' , oInput[i].getAttribute('value'));
			oRadio.setAttribute('class' , 'selfradio');
			// hide the original input#radio
			oInput[i].style.display = 'none';
			// Insert into the Web
			oParNode.insertBefore(oRadio , oInput[i]);
			// Store the node to facilitate the creation of eventsaRadio[j++] = oRadio; }}for(var i = 0; i < aRadio.length; i++) {
		aRadio[i].index = i;
		// Create click events
		aRadio[i].addEventListener('click' , function() {
			for (var i = 0; i < aRadio.length; i++) {
				if(i ! =this.index) {
					aRadio[i].setAttribute('class' , 'selfradio');
				}
			}
			aRadio[this.index].setAttribute('class' , 'selfradio change'); }); }}Copy the code

The drop-down list

Find all select elements under the DOM by passing the DOM element

Var oSelect = dom.getelementsbytagName ('select');Copy the code

The select element is then rebuilt through a loop. The first part of the creation, which I call the title, is structured like this:

<div class="title" value=""> <em> Please select </em> < I class="iconfont icon-xiala"></ I ></ div>Copy the code

The second part is the original option, structured as follows

< div class = "option" > < ul class = "option_ul" > < li value = "1" > game 1 < / li > <! </ul> </div>Copy the code

The acquisition of the content displayed by the new Option is similar to that of the customized menu box, which replicates the properties from the original DOM.

Finally, it is important to add the event to make sure that clicking on the title expands option and clicking option is selected

// Drop down icon toggle
oSelfTitle.addEventListener('click' , function() {
	oSelfSelect.setAttribute('class' , 'selfselect auto');
	oSelfIcon.setAttribute('class' , 'iconfont icon-xiala-copy');
});
// Select a value from the drop-down list
var oLi = oSelfUl.getElementsByTagName('li');
for (var i = 0; i < oLi.length; i++) {
	oLi[i].index = i;
	oLi[i].addEventListener('click' , function() {
			oSelfSelect.setAttribute('value' , oLi[this.index].getAttribute('value'));
			oSelfText.innerHTML = oLi[this.index].innerHTML;
			oSelfSelect.setAttribute('class' , 'selfselect');
			oSelfIcon.setAttribute('class' , 'iconfont icon-xiala');
	});
}
Copy the code

The calendar

Custom calendar controls were originally written procedurally and later in an object-oriented fashion. Or simply say my idea, after all, not very complicated things.

Calendar generation is divided into three parts: year, month and day. Creating the year and month is easy, just use the for loop and add a click event to retrieve the year and month of your choice.

A little trickier is the generation of specific dates. You need to pay attention to the number of weeks in the beginning of the month.

It is important to use the JS time object here, otherwise not only the week of the month, you also need to pay attention to the problem of the year, and the time object is not a problem.

If you want to know the day of the week in November 2016, just pass November 1, 2016 to the time object and use getDay to get the day of the week

Var sNowWeek = new Date(2016,10,1).getday (); console.log(sNowWeek); / / 2Copy the code

To get the exact number of days in a month, use getDate, which returns a day of the month:

Var sNowDays = new Date(2016,10,0).getdate (); console.log(sNowDays); / / 30Copy the code

Once you get the number of days in a month, you can use the for loop to create events. Don’t forget to add events.

The appendix

Custom drop – down list custom calendar control my blog, welcome to visit