How to Use the switch control in the mainstream front-end framework.

How to Use the switch control in the mainstream front-end framework.

This article only introduces how to use it, and then introduces the implementation scheme and comparison of advantages and disadvantages.

Jquerymobile

Jqm can use checkbox and select to simulate the switch control. You only need to add data-role = 'flipswitch;
Default switch control:

<input type="checkbox" data-role="flipswitch" />

To change to the selected status, you only need to add a checked attribute, as shown below:

<input type="checkbox" data-role="flipswitch" checked=“">

Jqm supports custom switch text. Use data-on-text to set selected state text and data-off-text to set off state text, for example:

<Input type = "checkbox" data-role = "flipswitch" data-on-text = 'open 'data-off-text = 'shutdown '>

If you want to use the select statement for simulation, it is easy to use the following code:

<select id="flip-select" name="flip-select" data-role="flipswitch">        <option>Off</option>        <option>On</option></select>

The status of the first option is displayed by default. to display the status of the second option, you only need to add the selected option on the second option, as shown below:

<select id="flip-select" name="flip-select" data-role="flipswitch">        <option>Off</option>        <option selected=''>On</option>    </select>

Jqm runs as follows:

Bootstrap

Although the bootstrap framework itself does not provide the switch control, its rich plug-in system will certainly provide. Here is a brief introduction (Http://www.bootstrap-switch.org/), Although I think it is a little complicated, it still requires js intervention;

The html code is simple. Just write a checkbox:

<input type="checkbox" id='switch' checked />

Run the following js Code:

$("#switch").bootstrapSwitch();

As follows:

Ratchet

Ratchet simulates the switch using two divs, as shown in the following code:

<div class="toggle"><div class="toggle-handle"></div></div>

Here, toggle-handle is mainly responsible for implementing the circular slider;

To indicate the selected status, you only need to add an active class to the parent div, as shown below:

<div class="toggle active"><div class="toggle-handle"></div></div>

Ratchet runs as follows:

Framework 7

The f7 framework encapsulates the switch control in a label. The Code is as follows:

<label class="label-switch"><span style="white-space:pre"></span><input type="checkbox" /><span style="white-space:pre"></span><div class="checkbox"></div></label>

To indicate the selected status, you only need to add the checked attribute to the input node.

The ui Effect of f7 is the same as that of ratchet.

What is the role of the Visual Basic Framework? How to create controls in the framework?

It can be understood that the framework has the role of grouping and classification. For example, command1 is on form1. Add a fram1 frame and a command2 frame. Then, the carrier of cmd2 is fram1 rather than form1. When fram1 is deleted, cmd2 is also deleted. Understand. Build controls in the framework, just like in form.

Recently, I want to build a web front-end. I don't know what framework should I use. Do you have some suggestions for the web Front-end?

In another way, you can describe your problem again. What do you mean by a web Front-end? The framework you want to use is the website architecture, or the JS/CSS framework ......