Question

有什么方法可以在jQuery对话框的左边显示箭头提示？我想实现如下图所示的功能。如何使用Theme roller CSS和图标做到这一点？

jQuery Dialog Customization http://www.freeimagehosting.net/uploads/74b51bb861.jpg

Answer 1

更新：我在编辑之前发布了我的第一个答案，表示箭头将被放置在对话框的正文中，所以这是我更新的代码：

var $mydialog = $('<div></div>').html('<div class="myArrow"></div>Your Dialog Content Here').dialog({autoOpen: false,title: 'Retrieving Product Details', modal:true, width:600, height:400, position:'center'});

myArrow div已被移动到对话框的主内容div，CSS可能是这样的：

.myArrow{
  display:block;
  position:absolute;
  width:15px;
  height:15px;
  left:-15px; /* pushes the arrow OUTSIDE the box */
  top:50px; /* or however far from the top you wish */
  background: url(path/to/arrow.jpg) center right no-repeat;
  margin:0 15px 0 0;
  }

Answer 2

一个简单的方法就是在构造对话框时简单地将html和/或css添加到title属性中：

var $mydialog = $('<div></div>').html('Your Dialog Content Here').dialog({autoOpen: false,title: '<div class="myArrow"></div>Retrieving Product Details', modal:true, width:600, height:400, position:'center'});

$mydialog.dialog('open'); //triggers dialog open event, can close with ('close')

myArrow的css：

.myArrow{
  display:block;
  float:left;
  clear:none;
  width:15px;
  height:15px;
  background: url(path/to/arrow.jpg) center center no-repeat;
  margin:0 15px 0 0; // some maring on the right to push title away from div;
  }

希望有所帮助

jQuery对话框中的箭头

2 个答案: