Mobile HTML5 front-end framework-MUI usage, html5 front-end framework mui

Mobile HTML5 front-end framework-MUI usage, html5 front-end framework mui

Preface

In view of the many front-end frameworks (especially responsive layout frameworks) in the past, the UI controls look too webpage-like and have no native feeling. Therefore, the pursuit of native UI is also an important goal of MUI. Based on the iOS platform UI, MUI supplements some Android platform-specific UI controls. MUI has three main meanings: 1. A multilingual version of the computer operating system Windows released separately; 2. The world's most authoritative Halal-certified official institution; 3. Proprietary terms in mobile communication technology.

I. Preparations before using the framework

1. Create an HTML file containing mui

In Hbuilder, create an HTML file and select "HTML with mui" to quickly generate a mui page template. By default, this template processes js and css resource references of mui.

2. Input mheader

The top title bar is required for each page. You can enter the mheader in Hbuilder to quickly generate the top navigation bar.

3. Input mbody

In addition to the top navigation and bottom tabs, other controls are recommended.mui-contentIn the control, enter the mbody in Hbuilder to quickly generate the include.mui-content.

Ii. UI Components

1. accordion (folding panel)

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

<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 (button)

Normal button

Add.mui-btnClass to generate the default button. If you need buttons of other colors, you can continue to add the corresponding class, such.mui-btn-blueThe button turns blue.

<Button type = "button" class = "mui-btn"> default </button> <button type = "button" class = "mui-btn-primary"> blue </button> <button type = "button" class = "mui-btn-success"> green </button> <button type = "button" class =" mui-btn-warning "> yellow </button> <button type =" button "class =" mui-btn-danger "> Red </button> <button type = "button" class = "mui-btn-royal"> purple </button>

The effect after running is as follows:

If you want a button with no background or border, you only need to add.mui-btn-outlinedClass. The Code is as follows:

<Button type = "button" class = "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-success mui-btn-outlined "> green </button> <button type = "button" class = "mui-btn-warning mui-btn-outlined"> yellow </button> <button type =" button "class =" mui-btn-danger mui-btn-outlined "> Red </button> <button type =" button "class =" mui-btn mui- btn-royal mui-btn-outlined "> purple </button>

The running result is as follows:

3. gallery (image carousel)

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="#"></a></div>    <div class="mui-slider-item"><a href="#"></a></div>    <div class="mui-slider-item"><a href="#"></a></div>    <div class="mui-slider-item"><a href="#"></a></div>  </div></div>

Assume that one, two, three, and four images are displayed in the current carousel, and the image is swiped from the first image to the left. When switching to the first image, continue to slide to the left. The following two effects are available:

1. Cycle supported: Slide left, directly switch to 1st images;
2. Cycle is not supported: Sliding left, no response, continue to display 4th images. To display 1st images, you must slide to the right to switch to 1st images;

When 1st images are displayed, it is the same to whether to continue to slide right to show 4th images..mui-slider-loopClass and DOM node control;

To support loops, you must.mui-slider-groupAdd on Node.mui-slider-loopClass. At the same time, you need to add two images in the order of 4, 1, 2, 3, 4, and 1. The sample code is as follows:

<Div class = "mui-slider"> <div class = "mui-slider-group mui-slider-loop"> <! -- Supports loop, you need to repeat the image node --> <div class = "mui-slider-item-duplicate"> <a href = "#">  </a> </div> <div class = "mui-slider-item"> <a href = "#">  </> </div> <div class = "mui-slider-item"> <a href = "#">  </a> </div> <div class = "mui-slider-item"> <a href = "#">  </a> </div> <div class = "mui-slider-item"> <a href = "#">  </a> </div> < ! -- Supports loop, you need to repeat the image node --> <div class = "mui-slider-item-duplicate"> <a href = "#">  </a> </div>

The mui framework has a built-in image carousel plug-in. By using the js api encapsulated by this plug-in, you can set whether to automatically rotate or loop. The following is a sample code:

// Obtain the slider plug-in object var gallery = mui ('. mui-slider '); gallery. slider ({interval: 3000 // automatic carousel cycle. If it is 0, it is not automatically played. The default value is 0 ;});

Therefore, if you want to disable automatic playback for image carousel, you must manually slide to switch between them. You only need to set the interval parameter to 0 through the above method.

To jump to the x image, you can use the gotoItem method of the image carousel plug-in, for example:

// Bind the on event that comes with mui. Only mui (". mui-content "). on ("tap", "# btn", function () {gallery. slider (). gotoItem (2); // adjust to the third image, index starts from 0 });

4. input (input form)

All packages in.mui-input-rowThe input, textarea, and other elements in the class will be set to the width attribute by default.width: 100%;. Wrap the label element and the preceding control in.mui-input-groupTo obtain the best arrangement.

(The right side of the password input box also comes with an eye icon, which I think is particularly useful)

The Code is as follows:

<Form class = "mui-input-group"> <div class = "mui-input-row"> <label> User Name </label> <input type = "text" class = "mui-input-clear" placeholder = "Enter the user name"> </div> <div class = "mui-input-row"> <label> password </label> <input type = "password" class = "mui-input-password" placeholder = "enter the password"> </div> </form>

Mui currently provides several input enhancements: Quick deletion, voice input * 5 + only, and hidden password in the password box.

1) Quick deletion: you only need to add.mui-input-clearClass, when the input control has content, there will be a delete icon on the right side, click to 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 = "Enter the content"> </div> </form>

2) search box:.mui-input-rowAdd peer level.mui-input-searchClass, you can 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: to facilitate fast input, mui integrates HTML5 + voice input, which only needs to be added to the corresponding input control..mui-input-speechClass, you can use voice input in 5 + Environments

4) Password box: add the input element.mui-input-passwordClass.

The Code is as follows:

<Form class = "mui-input-group"> <div class = "mui-input-row"> <label> password </label> <input type = "password" class = "mui-input-password" placeholder = "enter the password"> </div> </form>

5. list)

The list component encapsulated by mui is simple and easy to use. You only needulAdd on Node.mui-table-viewClass, inliAdd on Node.mui-table-view-cellClass

 

<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 result is as follows:

Custom list highlighted color

Click the list, and the corresponding list items are highlighted in gray. to customize the highlighted color, you only need to override it..mui-table-view-cell.mui-activeAs follows:

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

Add navigation arrow on the right

If you need to add a navigation arrow to the right to turn it into a navigation link, you only needliAdd under NodeaAndaAdd nodes.mui-navigate-rightClass:

<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 result is as follows:

Add controls such as numerical badge to the right

Mui allows you to place controls such as The number badge, button, and switch in the list. mui displays the number badge on the right of the list by default. 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 result is as follows:

(Image and text list)

The image and text list inherits from the list component and is mainly added.mui-media,.mui-media-object,.mui-media-body,.mui-pull-left/rightThe following is the sample code.

<Ul class = "mui-table-view"> <li class = "mui-table-view-cell mui-media"> <a href = "javascript :; ">  <div class =" mui-media-body "> happiness <p class = 'mui-ellipsis '> sleeping with a beloved person, it is a happy thing. But what should I do if I snore? </P> </div> </a> </li> <li class = "mui-table-view-cell mui-media"> <a href = "javascript:; ">  <div class =" mui-media-body "> wooden house <p class = 'mui-ellipsis '> if you want such a cabin, eat melons in summer and warm up in winter. </p> </div> </a> </li> <li class = "mui-table-view-cell mui-media"> <a href = "javascript:; ">  <div class =" mui-media-body "> CBD <p class = 'mui-ellipsis '> oven-mode city, at dusk, it is like a color palette. </p> </div> </a> </li> </ul>

The running result is as follows:

Conclusion: The mui framework is really convenient to use. It also has many controls for us to use. For details, refer to the mui official website.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.