Mobile HTML5 front-end framework—Usage of MUI

In view of many previous front-end frameworks (especially responsive layout frameworks), UI controls look too much like web pages and have no native feel. Therefore, the pursuit of native UI is also an important goal of MUI. MUI is based on the iOS platform UI and supplements some UI controls unique to the Android platform. MUI mainly has three meanings: 1. A multilingual version of Windows, a separately released computer operating system; 2. the world's most authoritative official organization for Halal certification; 3. a proper noun in mobile communication technology.

1. Create a new HTML file containing mui

In Hbuilder, create a new HTML file and select the HTML template containing mui to quickly generate a mui page template. This template handles mui's js and css resource references by default.

2. Enter mheader

The top title bar is necessary for every page. Enter mheader in Hbuilder to quickly generate the top navigation bar.

3. Enter mbody

Except for the top navigation and bottom tab controls, it is recommended that other controls be placed in the .mui-content control. Enter mbody in Hbuilder to quickly generate a code block containing .mui-content .

1.accordion(folding panel)

The folding panel is similar to the secondary list, as follows:

 <ul class=mui-table-view> <li class=mui-table-view-cell mui-collapse> <a class=mui-navigate-right href=#>Panel 1</a> <div class=mui- collapse-content> <p>Panel 1 sub-content</p> </div> </li> </ul><ul class=mui-table-view> <li class=mui-table-view-cell mui- collapse> <a class=mui-navigate-right href=#>Panel 2</a> <div class=mui-collapse-content> <p>Panel 2 sub-content</p> </div> </li> </ul>

2.buttons(buttons)

Normal button

Add the .mui-btn class to the button node to generate a default button; if you need buttons of other colors, continue to add the corresponding class. For example, .mui-btn-blue can become a blue button.

 <button type=button class=mui-btn>Default</button><button type=button class=mui-btn mui-btn-primary>Blue</button><button type=button class=mui-btn mui- btn-success>Green</button><button type=button class=mui-btn mui-btn-warning>Yellow</button><button type=button class=mui-btn mui-btn-danger>Red</button><button type=button class=mui-btn mui-btn-royal>Purple</button>

The effect after running is as follows:

If you want buttons with no background color and borders, you only need to add the .mui-btn-outlined class. The code is as follows:

 <button type=button class=mui-btn mui-btn-outlined>Default</button><button type=button class=mui-btn mui-btn-primary mui-btn-outlined>Blue</button><button type=button class=mui-btn mui-btn-success mui-btn-outlined>green</button><button type=button class=mui-btn mui-btn-warning mui-btn-outlined>yellow</button><button type=button class=mui-btn mui-btn-danger mui-btn-outlined>red</button> <button type=button class=mui-btn mui-btn-royal mui-btn-outlined>Purple</button>

The running results are as follows:

3.gallery (picture carousel)

The image carousel inherits from the slide plug-in, so its DOM structure and events are the same as the slide plug-in;

Loop playback is not supported by default. The DOM structure is as follows:

 <div class=mui-slider> <div class=mui-slider-group> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div > <div class=mui-slider-item><a href=#><img src=2.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src =4.jpg /></a></div> </div></div>

Assume that there are four pictures 1, 2, 3, and 4 in the current picture carousel. Starting from the 1st picture, slide to the left to switch pictures. When switching to the 4th picture, continue to slide to the left. Next, there will be Two effects:

1. Supports looping: swipe left to switch directly to the first picture;
2. Looping is not supported: swipe left, no response, continue to display the 4th picture. If the user wants to display the 1st picture, he must continuously swipe right to switch to the 1st picture;

When the first picture is displayed, continuing to slide right to display the fourth picture is the same problem; the implementation of this problem needs to be controlled through the .mui-slider-loop class and DOM nodes;

If you want to support looping, you need to add the .mui-slider-loop class to the .mui-slider-group node. At the same time, you need to repeatedly add 2 pictures. The order of the pictures becomes: 4, 1, 2, 3, 4, 1. The code example is as follows:

 <div class=mui-slider> <div class=mui-slider-group mui-slider-loop> <!--Support looping, need to repeat picture nodes--> <div class=mui-slider-item mui-slider- item-duplicate><a href=#><img src=4.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=2.jpg /></a> </div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=4.jpg /></a></div> <!--Supports looping, needs to repeat picture nodes--> <div class=mui -slider-item mui-slider-item-duplicate><a href=#><img src=1.jpg /></a></div> </div></div>

The mui framework has a built-in image carousel plug-in. Through the JS API encapsulated by this plug-in, users can set whether to automatically carousel and the carousel cycle. The following is a code example:

 //Get the slider plug-in object var gallery = mui('.mui-slider'); gallery.slider({ interval:3000//Automatic rotation period, if it is 0, it will not play automatically, the default is 0; });

Therefore, if you want the image carousel not to play automatically, but to be switched by the user's manual sliding, you only need to set the interval parameter to 0 through the above method.

If you want to jump to the xth picture, you can use the gotoItem method of the picture carousel plug-in, for example:

 //The on event binding that comes with mui can only use the event delegation method mui(.mui-content).on(tap,#btn,function(){ gallery.slider().gotoItem(2);//Deployment To the third picture, the index starts from 0});

4.input (input form)

All input, textarea and other elements wrapped in the .mui-input-row class will have the width attribute set to width: 100%; by default. Wrapping the label element and the above controls in .mui-input-group can achieve the best arrangement.

(There is also an eye icon on the right side of the password input box, which I find particularly useful)

The code is as follows:

 <form class=mui-input-group> <div class=mui-input-row> <label>Username</label> <input type=text class=mui-input-clear placeholder=Please enter username> </ div> <div class=mui-input-row> <label>Password</label> <input type=password class=mui-input-password placeholder=Please enter password> </div></form>

mui currently also provides several input enhancement functions: quick deletion, voice input *5+ only and password box showing hidden passwords.

1) Quick deletion: Just add the .mui-input-clear class to the input control. When there is content in the input control, there will be a delete icon on the right. Clicking it will clear the current input content.

The code is as follows:

 <form class=mui-input-group> <div class=mui-input-row> <label>Quick delete</label> <input type=text class=mui-input-clear placeholder=Please enter content> </div ></form>

2) Search box: Add the .mui-input-row .mui-input-search -row to use the search control

The code is as follows:

 <div class=mui-input-row mui-search> <input type=search class=mui-input-clear placeholder=></div>

3) Voice input *5+ only: In order to facilitate quick input, mui integrates HTML5+ voice input. You only need to add the .mui-input-speech class to the corresponding input control to use voice input in the 5+ environment.

4) Password box: Add the .mui-input-password class to the input element to use it

The code is as follows:

 <form class=mui-input-group> <div class=mui-input-row> <label>Password box</label> <input type=password class=mui-input-password placeholder=Please enter password> </div ></form>

5.list(list)

The list component encapsulated by mui is relatively simple and easy to use. You only need to add the .mui-table-view class on the ul node and the .mui-table-view-cell class on the li node.

 <ul class=mui-table-view> <li class=mui-table-view-cell>Item 1</li> <li class=mui-table-view-cell>Item 2</li> <li class= mui-table-view-cell>Item 3</li></ul>

The running results are as follows:

Click the list, and the corresponding list item will be highlighted in gray. If you want to customize the highlight color, you only need to rewrite .mui-table-view-cell.mui-active , as follows:

 /*Click to highlight gray*/.mui-table-view-cell.mui-active{ background-color: gray;}

If you need to add a navigation arrow to the right side and turn it into a navigation link, you only need to add a sub-node under the li node and add the .mui-navigate-right class to the a node, as follows:

 <ul class=mui-table-view> <li class=mui-table-view-cell> <a class=mui-navigate-right>Item 1</a> </li> <li class=mui-table- view-cell> <a class=mui-navigate-right>Item 2</a> </li> <li class=mui-table-view-cell> <a class=mui-navigate-right>Item 3</a> </li></ul>

The running results are as follows:

mui supports placing digital subscripts, buttons, switches and other controls in the list; mui defaults to placing the digital subscripts on the right side of the list. The code is as follows:

 <ul class=mui-table-view> <li class=mui-table-view-cell>Item 1 <span class=mui-badge mui-badge-primary>1</span> </li> <li class= mui-table-view-cell>Item 2 <span class=mui-badge mui-badge-success>2</span> </li> <li class=mui-table-view-cell>Item 3 <span class=mui-badge>3</span> </li></ul>

The running results are as follows:

The picture and text list inherits from the list component, and mainly adds .mui-media , .mui-media-object , .mui-media-body , .mui-pull-left/right classes. The following is the sample code

 <ul class=mui-table-view> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img /a.jpg> <div class=mui-media-body> Happiness<p class='mui-ellipsis'>It is a happy thing to sleep with the one you love; but what should you do if you snore? </p> </div> </a> </li> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui- pull-left src=img/b.jpg> <div class=mui-media-body> wooden house<p class='mui-ellipsis'>I want a small wooden house like this, where I can make ice cream and eat melons in the summer, and sit around the stove to keep warm in the winter.</p> </div> </a> </li> <li class=mui-table -view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img/c.jpg> <div class=mui-media-body> CBD < p class='mui-ellipsis'>The city in oven mode looks like an overturned palette at dusk.</p> </div> </a> </li></ul>

The running results are as follows:

Conclusion: The mui framework is indeed very convenient to use. It also has many controls for us to use. The details can be viewed on the mui official website.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.