使用jQuery UI显示消息

前端之家收集整理的这篇文章主要介绍了使用jQuery UI显示消息前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在jQuery UI的主题页面上看到这些,并认为它们很整洁.

我不知道如何以静态方式和JavaScript显示这些样式的消息.

提前致谢.

解决方法

使用Chrome Developer Tools,我检查了错误消息的HTML.你可以对另一个做同样的事情,或者你可以查看 jQuery UI CSS Framework.

HTML

<div class="ui-widget">
    <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
        <p>
            <span class="ui-icon ui-icon-alert" 
                style="float: left; margin-right: .3em;"></span>
            <strong>Alert:</strong> Sample ui-state-error style.
        </p>
    </div>
</div>

CSS

body {
    font-family: Verdana,Arial,sans-serif;
    font-size: 10px;
}

p {
    margin: 1em 0;   
}

strong {
    font-weight: 900;   
}

您可以使用addClass方法使用JS以编程方式添加这些类.另请参阅showhide方法,您可以使用它们来显示/隐藏这些消息.

<button id="show">Show</button>
<button id="hide">Hide</button>

$("#show").click(function() {
    $(".ui-widget").show();
});

$("#hide").click(function() {
    $(".ui-widget").hide();
});

fiddle.

原文链接:https://www.f2er.com/jquery/180215.html

猜你在找的jQuery相关文章