在jquery dialoge titelbar中设置图标样式
Style an Icon in jquery dialoge titelbar
如何在jquery标题栏中显示与默认关闭按钮样式相同的图标,用"?"代替"x"?在这种情况下,红色图标。我完全没有做到这一点。
$("#dialog_arbeitsauftrag").dialog({
autoOpen: false,
width: '400',
height: '200',
dialogClass: 'hilfe_arbeitsauftrag',
buttons: [{
text: "close",
click: function() {
$(this).dialog("close");
}
}, ]
});
$("#dialog-arbeitsauftrag").click(function(event) {
$("#dialog_arbeitsauftrag").dialog("open");
event.preventDefault();
});
$("#dialog-arbeitsauftrag, #icons li").hover(
function() {
$(this).addClass("ui-state-hover");
},
function() {
$(this).removeClass("ui-state-hover");
}
);
$(".hilfe_arbeitsauftrag").children(".ui-dialog-titlebar").find('.ui-dialog-title').append("<span id='iconhelp' class='ui-icon ui-icon-help'></span>");
$("#iconhelp").click(function(event) {
$("#dialog_arbeitsauftrag_hilfe").dialog("open");
event.preventDefault();
});
$("#dialog_arbeitsauftrag_hilfe").dialog({
autoOpen: false,
width: '200',
height: '100',
dialogClass: 'arbeitsauftrag_hilfe',
});
#dialog-arbeitsauftrag {
padding: 15.5px 0px 23px;
!important text-decoration: none;
position: relative;
}
#dialog-arbeitsauftrag span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 25%;
margin-top: -8px;
}
.dialog-title-bar {
background-color: red;
}
#dialog_arbeitsauftrag_hilfe {
padding: 10px 10px 10px 10px;
!important text-decoration: none;
position: relative;
}
#iconhelp_arbeitsauftrag {
cursor: pointer;
float: right;
margin-right: 10px;
}
#dialog-arbeitsauftrag span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 25%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.hilfe_arbeitsauftrag #iconhelp {
background-color: red;
float: right;
}
.arbeitsauftrag_hilfe .ui-dialog-titlebar {
background-color: red;
background-image: none;
}
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
<button id="dialog-arbeitsauftrag" class="ui-state-default ui-corner-all">
Blaaaa.
</button>
<div id="dialog_arbeitsauftrag" title="Bla.">
<p>
Blablabla.
</p>
</div>
<div id="dialog_arbeitsauftrag_hilfe" class="dialog-title-bar" title="More Bla.">
<font face="arial" size="2">Some more blablabla.</font>
</div>
您需要将它包装在div
或button
中,这样可以更容易地修改它。它也可以只使用跨度标签进行修改,但几乎不会对其进行任何控制
删除了问号样式,修改了jQuery代码并添加了一些样式。
给定的jsFiddle代码中出现了问题,所以我在stackOverflow上的给定代码中设置了问号按钮的样式。
https://jsfiddle.net/umw7bcqz/2/
相关文章:
- 在for循环中使用多维数组设置google.maps.Marker图标
- 在地图加载/页面加载时,我想将地图设置为当前地理位置,但不想在地图上显示定位图标
- 如何在打开层3中的堇青石之间设置矢量图标的动画
- 如何设置页面之间过渡的加载图标
- 如何使用传单为传单实时插件设置自定义图标
- 在jquery中设置字体真棒图标
- 在CSS中将图标设置为光标指针
- 在javascript中设置谷歌地图标记图标属性
- 如何在 React Native 中设置工具栏操作图标
- 标记群集器根据其中的标记设置标记群集图标
- 动态将线性渐变设置为 Google 地图 SVG 路径图标
- 谷歌地图:- 无效值错误:设置图标:不是字符串;并且没有网址属性;并且没有路径属性
- 如何设置图标在单击时闪烁
- Gmaps Api 3为阵列中的标记设置单独的图标
- 当扩展的内容脚本处于活动状态时设置图标
- AngularUI引导页-如何设置图标而不是文本
- Extjs -设置图标选项卡使用seticoncs
- 如何设置图标在dxSlideOut,Devextreme
- 在jquery dialoge titelbar中设置图标样式
- 谷歌地图 - 设置图标代码使标记消失