やりたいこと
サイトにタイルのっけて、それをリンクにしたい。
（注目リンクパーツではなく）
やったこと
- サイトにカスタムリストを用意して、そこにタイルの色と、画像のURLを記載
- ページ側ではScript editorで、SPServicesをつかってリストデータを取得
- Contents editorではタイルの見栄えを調整（ホバーしたら1.1倍に拡大している）
こんな感じ
ホバーするとおっきくなる
リスト側。いらないフィールドもあるが、それはCAMLでとらなければいい。
コード
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>
これまたもう少し綺麗にできそうだがまずはこんな感じ。