Question

我正在使用来自http://www.richardhsu.me/jquery.ambiance/

的jquery通知插件

我调用插件的方式来自使用所选插件的select元素。我想要做的是将消息框放在触发消息的select元素旁边。在这种情况下，id =“box_frtv”。是否可以修改代码来实现这一目标。感谢

更新认为这可能有效，但事实并非如此。被css覆盖。

$(function() { 
$("#box_frtv").chosen({

 width: "250px",
 max_selected_options: 1

 });
 $("#box_frtv").bind("chosen:maxselected",
            function() {

            $("#boxError").ambiance({message: "Uh oh the fading is gone!",
            type: "error",
            fade: true}); 
        });
      });

html代码

<div class="fieldset">
            <h1><span>Select Your Box(es)</span></h1>
            <p>
              <select data-placeholder="Choose your box(es)..." class="chosen-select" name="box_frtv[]" id="box_frtv" multiple required="required">
                <option value=""></option>

              </select><span></span><div id="boxError"></div>
            </p>
          </div>

css代码

/*
 * Stylesheet for Ambiance - Notification Plugin for jQuery
 * Version 1.0.1
 *
 * Copyright (c) 2012 Richard Hsu
 * Documentation: http://www.github.com/richardhsu/jquery.ambiance
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 */

/* Notification area will be top right but feel free to modify it below. */
#ambiance-notification {
  display: block;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
}

/* Built in custom styling for the notifications. */
.ambiance-title {
  font-weight: bold;
}

.ambiance {
  float: right;
  clear: both;
  border: 3px solid transparent;
}

.ambiance:hover {
  border: 3px solid #DDDDDD;
}

.ambiance-default, .ambiance-success, .ambiance-error {
  border-radius: 5px;
  -moz-border-radius: 5px; /* Firefox 3.6 and earlier. */
  padding: 10px;
  margin: 10px;
}

.ambiance-default {
  background: #000000;
  color: #DDDDDD;
}

.ambiance-success {
  background: #468847;
  color: #DFF0D8;
}

.ambiance-error {
  background: #B94A48;
  color: #F2DEDE;
}

/* Close button attributes -- based off Twitter Bootstrap alert close item. */
.ambiance-close {
  display: block;
  position: relative;
  top: -2px;
  right: 0px;
  color: #FFFFFF;
  float: right;
  font-size: 18px;
  font-weight: bold;
  filter: alpha(opacity=20);
  text-decoration: none;
  position: relative;
  line-height: 14px;
  margin-left: 5px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.ambiance-close:hover {
  color: #BBBBBB;
  cursor: pointer;
}

Answer 1

您可以试试这个，但它的外观将取决于select元素的大小和位置。

#boxError {
    display: inline;
    color: #F00;
    position: relative;
    top: -69px;
    float: left;
    padding-left: 60px;
}

在调用select元素旁边放置一个通知

1 个答案: