Jquery-ui buttons are sometimes slow to render, an alternative to css?

Question

I am using jquery-ui. Button support looks good, stylized buttons are good. The only drawback is that the button is rendered in javascript, so sometimes a pause occurs when the page loads, and you see that all the buttons change form from their own buttons to jquery-ui style buttons.

Are there any “button makers” that can simply generate css for the button, which I can simply apply to the div to get the same effect? I thought maybe if I create a button myself, the browser will prepare it before the page is shown to the user, avoiding this uncomfortable pause.

thank

Answer 1

A few things - first of all, if you only do this to create static buttons (read: not as replacements for checkboxes or radio buttons), you can always use HTML generated by JavaScript without having to call a function .buttonon them. When you test an element after calling a function button, you will notice that the HTML has changed a bit and several classes have been added to the element:

<a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="#" role="button">
    <span class="ui-button-text">Button Content</span>
</a>

Unfortunately, jQuery CSS generated by CSS does not include pseudo-classes :hoverand :active, but we can easily fix this. Search CSS for ui-state-hoverand ui-state-activeand add appropriate pseudo-classes manually.

---

, , , . , jQuery UI:

http://www.jsfiddle.net/ZkWP8/

jQuery themeroller CSS. .button script .

Answer 2

(FOUC). , display:none; , , .show() $(document).ready(). , .

, , javascript.

Answer 3

jQuery UI "ui-button" ( ). , , CSS , jQuery script.

, "button":

.button {
    display: none;
}

.button.ui-button {
    display: inline-block;
}

Answer 4

, , jquery button style stuff - . html- , , , ( , , html).

, ,

<script type="text/javascript">
$("input[type=submit], a, input[type=button], button").button();
    });
</script>

, , ( , ), .

Answer 5

div , . , jquery-ui-ified, div. .

div :

.load-mask 
{
    position:absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 10000;
    background-color: #DFE8F6;
    display:block;
}

Answer 6

, .

• jQuery 1.10.4 ( ).
• It supports: freezing and: active effects, so that the same effects can be achieved without javascript

Opaque Background: http://jsfiddle.net/spinal007/FntBG/

.button{
    cursor:pointer;
    display:inline-block;

    line-height:1.4;
    margin: 0 0.1em 0 0;
    padding: 0.3em 1em 0.4em;
    border: 1px solid #ccc;

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 0 1px #FFF inset;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 0 1px #FFFFFF inset;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 0 1px #FFF inset;

    color: #666;
    background: #EFEFEF;

    text-decoration: none;
    text-align: center;
    font-family: Segoe UI, Trebuchet MS, Tahoma, Arial, sans-serif;
    font-size:1.1em;
}
.button:hover{
    background-color:#f9f9f9;   
    border-color:#999999;
    color: #212121;
}
.button:active{
    background-color:#71B800;   
    border-color:#64A300;
    color: #ffffff;
}

And here is an alternative with CSS3 Gradient Background: http://jsfiddle.net/spinal007/pVVs3/ (you may need this, depending on your theme!)