SharePoint 사이트의 타일 UI(w/사용자 지정 목록)
13298 단어 SharePoint
하고 싶은 일
사이트에 타일을 붙이고 그것을 연결하고 싶습니다.
(주목 링크 파트가 아님)
했던 일
이런 느낌
호버하면 괜찮아
목록 측. 필요없는 필드도 있지만, 그것은 CAM에서 취하지 않으면 좋다.
코드
ScriptEditor<div>title</div>
<script src="jquery.minのpath" type="text/javascript"></script>
<script src="jquery.SPServicesのパス" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
async: true,
listName: "XXXXXX",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='URL' /><FieldRef Name='Open In New Window' /><FieldRef Name='Order' /><FieldRef Name='imageURL' /><FieldRef Name='color' /></ViewFields>",
CAMLQuery: "<Query><OrderBy><FieldRef Name='Order' Ascending='true' /></OrderBy></Query>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var title = ($(this).attr("ows_Title"));
var order =parseInt(($(this).attr("ows_Order")));
var imageURL = ($(this).attr("ows_imageURL"));
var bgcolor = ($(this).attr("ows_color"));
var href = ($(this).attr("ows_URL")).split(",")[0];
var liHtml = "<div class='Tile' id='Div"+order+"' style='background-color: "+bgcolor+ "'>"+"<a href='"+ href +"'>" + "<img width='150' alt='' src='"+imageURL+"'/> </a></div>";
$("#Content").append(liHtml);
});
}
});
});
</script>
<div id="Content"></div>
SPServices에서 List item 가져오고, 그 뒤에 div에 자식 요소를 생성하고 있을 뿐.
ContentsEditor<style type="text/css">
div.Content{
width: 100%;
}
div.Tile{
position: relative;
height: 150px;
width: 150px;
background-color: #38A3DB;
margin: 10px;
float: left;
}
div.Tile a{
position: relative;
height: 150px;
width: 150px;
float: left;
}
div.Tile img{
position: relative;
height: 150px;
width: 150px;
float: left;
}
div.Tile:hover{
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
background-image: url("/SiteAssets/white_vpvot.png");
background-repeat: no-repeat;
background-position: right top;
opacity: 0.75;
}
</style>
이것 또 좀 더 깨끗하게 할 수 있을 것 같지만 우선은 이런 느낌.
Reference
ScriptEditor
<div>title</div>
<script src="jquery.minのpath" type="text/javascript"></script>
<script src="jquery.SPServicesのパス" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
async: true,
listName: "XXXXXX",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='URL' /><FieldRef Name='Open In New Window' /><FieldRef Name='Order' /><FieldRef Name='imageURL' /><FieldRef Name='color' /></ViewFields>",
CAMLQuery: "<Query><OrderBy><FieldRef Name='Order' Ascending='true' /></OrderBy></Query>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var title = ($(this).attr("ows_Title"));
var order =parseInt(($(this).attr("ows_Order")));
var imageURL = ($(this).attr("ows_imageURL"));
var bgcolor = ($(this).attr("ows_color"));
var href = ($(this).attr("ows_URL")).split(",")[0];
var liHtml = "<div class='Tile' id='Div"+order+"' style='background-color: "+bgcolor+ "'>"+"<a href='"+ href +"'>" + "<img width='150' alt='' src='"+imageURL+"'/> </a></div>";
$("#Content").append(liHtml);
});
}
});
});
</script>
<div id="Content"></div>
SPServices에서 List item 가져오고, 그 뒤에 div에 자식 요소를 생성하고 있을 뿐.
ContentsEditor
<style type="text/css">
div.Content{
width: 100%;
}
div.Tile{
position: relative;
height: 150px;
width: 150px;
background-color: #38A3DB;
margin: 10px;
float: left;
}
div.Tile a{
position: relative;
height: 150px;
width: 150px;
float: left;
}
div.Tile img{
position: relative;
height: 150px;
width: 150px;
float: left;
}
div.Tile:hover{
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
background-image: url("/SiteAssets/white_vpvot.png");
background-repeat: no-repeat;
background-position: right top;
opacity: 0.75;
}
</style>
이것 또 좀 더 깨끗하게 할 수 있을 것 같지만 우선은 이런 느낌.
Reference
Reference
이 문제에 관하여(SharePoint 사이트의 타일 UI(w/사용자 지정 목록)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/h-nagao/items/8719247fa9a4cf8bfed4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
