10hui-button

Example pictures

General button

<button type="button" class="hui-button">General button</button>

Loading button

Loading animation appears after clicking the button, and can judge the submission to avoid duplicate submission. dom structure is the same as ordinary buttons, using js to control the effect of Loading:

<button type="button" class="hui-button" id="btn1">Loading Button</button>

Hui (button selector). loadingButton(msg)

Function: Generate loading effect on ordinary buttons
Parameter: prompt content
Return: no

Hui (button selector). buttonIsLoading()

Function: Determine whether the button is loaded or not
Parameter: None
Return: Boolean type true / false

Hui (button selector). resetLoadingButton()

Function: Restore the original state of the button
Parameter: None
Return: no

Complete code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI - Button component</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header">
    <div id="hui-back"></div>
    <h1>HUI - Button component</h1>
</header>
<div class="hui-wrap">
    <div class="hui-common-title" style="margin-top:15px;">
        <div class="hui-common-title-line"></div>
        <div class="hui-common-title-txt">Button Component Demonstration</div>
        <div class="hui-common-title-line"></div>
    </div>
    <div style="padding:28px 20px 10px 20px;" id="btnList1">
        <button type="button" class="hui-button hui-fl">General button</button>
        <button type="button" class="hui-button hui-danger hui-fl" style="margin-left:10px;">Warning button</button>
        <button type="button" class="hui-button hui-primary hui-fl" style="margin-left:10px;">Main button</button>
    </div>
    <div style="padding:1px 20px;" id="btnList2">
        <button type="button" class="hui-button hui-button-large" style="margin-top:15px;">Width 100%Button</button>
        <button type="button" class="hui-button hui-button-large hui-primary" style="margin-top:15px;">Width 100%Button</button>
        <button type="button" class="hui-button hui-button-large hui-danger" style="margin-top:15px;">Width 100%Button</button>
        <button type="button" class="hui-button hui-button-large" style="margin-top:15px;" disabled="disabled">Disabled buttons</button>
    </div>
    <div style="padding:10px 20px;">
        <button type="button" class="hui-button hui-button-large" style="margin-top:15px;" id="loadingBtn1">loading Button</button>
        <button type="button" class="hui-button hui-button-large" style="margin-top:15px;" id="loadingBtn2">After clicking loading And automatic reduction</button>
        <button type="button" class="hui-button hui-button-large" style="margin-top:15px;"><span class="hui-icons hui-icons-warn"></span>Icon button</button>
    </div>
    <div style="padding:10px 20px;">
        <button type="button" class="hui-button hui-button-small hui-fl">Small button</button>
        <button type="button" class="hui-button hui-button-small hui-danger hui-fl" style="margin:0px 10px;">Small button</button>
        <button type="button" class="hui-button hui-button-small hui-primary hui-fl">Small button</button>
    </div>
</div>
<script src="../js/hui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
hui('#btnList1').find('button').click(function(){hui.toast('ok');});
hui('#btnList2').find('button').click(function(){hui.toast('Hi...');});
hui('#loadingBtn1').loadingButton();
hui('#loadingBtn2').click(function(){
    if(hui(this).buttonIsLoading()){return false;}
    hui(this).loadingButton('Loading...');
    setTimeout(function(){
        hui('#loadingBtn2').resetLoadingButton();
    }, 2000);
});
</script>
</body>
</html>

Posted by cavemaneca on Wed, 17 Apr 2019 01:42:32 -0700

Programmer Group