我的 Web 部件 jQuery
和 CSS
代码在我部署到 Sharepoint 2013 服务器后不起作用。
我想问一下是不是因为"runat=server"
?我使用它是因为我需要识别 html 元素并在后端代码中绑定(bind)一个类常量值。
谁能告诉我应该如何部署 jQuery
和 CSS
?
这是我的代码
JQuery
$(document).ready(function () {
$('.icon').mouseover(function () {
$(".menuLink").stop(true, false).fadeIn(280);
$('.menuLink').stop(true, false).animate({
width: "300px",
opacity: "1",
"padding-left": "10px"
});
});
$('.divTableBody').mouseleave(function () {
$('.menuLink').stop(true, false).animate({
width: "0px",
opacity: "0",
"padding-left": "0px"
});
});
});
CSS
.divTable {
display: table;
float: right;
height: 200px;
background-color: #0082CA;
}
.divTableBody {
display: table-row-group;
}
.divTableRow {
display: table-row;
}
.menuLink, .icon {
display: table-cell;
padding: 10px 0px;
}
.menuLink {
display: none;
vertical-align: middle;
overflow: hidden;
white-space: nowrap;
padding-left: 10px;
}
.menuLink a {
font-size: large;
text-decoration: none;
color: white;
}
.divTableRow:hover {
background-color: #005C8F;
}
.icon {
width: 30px;
padding-left: 10px;
padding-right: 10px;
position: relative;
}
.icon img {
width: 20px;
height: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.userProfile {
height: 30px;
width: 30px;
border-radius: 50%;
display: block;
float: right;
padding-right: 10px;
}
/* Make the badge float in the top right corner of the button */
#badge {
background-color: #fa3e3e;
border-radius: 5px;
color: white;
padding: 1px 3px;
font-size: 10px;
position: absolute; /* Position the badge within the relatively positioned button */
top: 20px;
right: 8px;
}
HTML
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="menuLink">
<a id="txtLink1" runat="server"></a>
</div>
<div class="icon">
<img id="imgLink1" runat="server" />
</div>
</div>
</div>
</div>
谢谢。
最佳答案
jQuery 无法通过 您在服务器端指定的 ID 找到元素(通过实现 runat="server"
)。 ID 的值针对客户端进行了更改,其前缀包含有关父元素的信息(在浏览器中检查)。
您可以使用 ClientIDMode="static"
来防止这种情况并保留 ID 值
将此属性应用于所有适用的 html。
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="menuLink">
<a id="txtLink1" ClientIDMode="static" runat="server"></a>
</div>
<div class="icon">
<img id="imgLink1" ClientIDMode="static" runat="server" />
</div>
</div>
</div>
</div>
关于jQuery 和 CSS 在 Sharepoint 2013 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38439017/