library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Dialog demo: Use the ui-state-highlight class instead of a hard-coded color. Fixes #4808 - Modal dialog form validation demo - error message uses hard-coded color.

Browse Source
This commit is contained in:
Scott González 2009-08-29 02:12:56 +00:00
parent 8d2cacae17
commit da0aeced9d
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
demos/dialog/modal-form.html
View File

@ -11,7 +11,6 @@
<script type="text/javascript" src="../../ui/ui.stackfix.js"></script> <script type="text/javascript" src="../../ui/ui.stackfix.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script> <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript" src="../../ui/effects.core.js"></script> <script type="text/javascript" src="../../ui/effects.core.js"></script>
<script type="text/javascript" src="../../ui/effects.highlight.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css"> <style type="text/css">
body { font-size: 62.5%; } body { font-size: 62.5%; }
@ -23,8 +22,8 @@
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-button { outline: 0; margin: 0; padding: .4em 1em .5em; text-decoration: none; cursor: pointer; position: relative; text-align: center; } .ui-button { outline: 0; margin: 0; padding: .4em 1em .5em; text-decoration: none; cursor: pointer; position: relative; text-align: center; }
.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em; } .ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
@ -36,10 +35,15 @@
email = $("#email"), email = $("#email"),
password = $("#password"), password = $("#password"),
allFields = $([]).add(name).add(email).add(password), allFields = $([]).add(name).add(email).add(password),
tips = $("#validateTips"); tips = $(".validateTips");
function updateTips(t) { function updateTips(t) {
tips.text(t).effect("highlight",{},1500); tips
.text(t)
.addClass('ui-state-highlight');
setTimeout(function() {
tips.removeClass('ui-state-highlight', 1500);
}, 500);
} }
function checkLength(o,n,min,max) { function checkLength(o,n,min,max) {
@ -70,6 +74,7 @@
stackfix: true, stackfix: true,
autoOpen: false, autoOpen: false,
height: 300, height: 300,
width: 350,
modal: true, modal: true,
buttons: { buttons: {
'Create an account': function() { 'Create an account': function() {
@ -137,7 +142,7 @@
<div class="demo"> <div class="demo">
<div id="dialog-form" title="Create new user"> <div id="dialog-form" title="Create new user">
<p id="validateTips">All form fields are required.</p> <p class="validateTips">All form fields are required.</p>
<form> <form>
<fieldset> <fieldset>