我想从SPServices的查询中插入值来填充现有的格式化div。或者在页面上创建浮动在左侧的div。我很接近，但有问题，我的追加声明，以获得信息在div。这是我目前所知道的。提前感谢……
function GetNewsItems() {
var newsId = 0;
var count;
var method = "GetListItems";
var myList = "PlacardImages";
var fieldsToRead = "<ViewFields>" +
"<FieldRef Name='Title' />" +
"<FieldRef Name='Caption' />" +
"<FieldRef Name='Name' />" +
"<FieldRef Name='ID' />" +
"<FieldRef Name='LinkFilenameNoMenu' />" +
"</ViewFields>";
var query = "<Query>" +
"<Where>" +
"<Neq>" +
"<FieldRef Name='ID'/><Value Type='Number'>0</Value>" +
"</Neq>" +
"</Where>" +
"<OrderBy>" +
"<FieldRef Name='Title'/>" +
"</OrderBy>" +
"</Query>";
//Get the count of items in the list
$().SPServices({
operation: method,
async: false,
listName: myList,
CAMLViewFields: fieldsToRead,
CAMLQuery: query,
completefunc: function (xData, Status) {
count = $(xData.responseXML).SPFilterNode("rs:data").attr("ItemCount");
}
});
$().SPServices({
operation: method,
async: false,
listName: myList,
CAMLViewFields: fieldsToRead,
CAMLQuery: query,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function () {
var name = ($(this).attr("ows_Title")).split(",")[0];
var nameURL = ($(this).attr("ows_Title")).split(",")[1]; //undefined?? we want this to be complete url
var pictureURL = ($(this).attr("ows_LinkFilenameNoMenu")); //.split(",")[0];
pictureURL = "<img src='http://employees.blah.org/sites/development/Placards/" + pictureURL + "' alt=''>"
var caption = ($(this).attr("ows_Caption"));
var imageId = ($(this).attr("ows_ID"));
//call a function to add the data from the row to the screen
newsId++;
AddToNewsDiv(name, caption, pictureURL, imageId,newsId)
alert('name: '+name+" caption: "+caption+" pictureURL: "+pictureURL+" imageId: "+imageId+" newsId: "+newsId+" nameURL: "+nameURL);
});
}
});
}
function AddToNewsDiv(name, caption, pictureURL, imageID, newsId) {
//alert ('AddToNewsDiv name : ' + name + ' pictureURL : ' + pictureURL + ' caption: ' + caption );
$("#rssjbNews").append("<div class='rssjb span6' id='news" + newsId + "' ><ul><LI><DIV class='news-outer'><DIV class='news-inner'>" +
"<A class='title' href='http://employees.blah.org/" + imageID + "' target='_blank'>" + name +
"</A>" +
"<SPAN class='excerpt'>" + caption +
" more » </SPAN></DIV>" +
"<A class='news-label' href='http://employees.blah.org/'><SPAN>News</SPAN></A>" +
"</DIV></LI></ul></div>");
};
/* Current HTML looks like this :
<DIV id="news-container">
<DIV id="slides">
<DIV class="news">
<DIV class="rssjb">
<UL>
<LI>
<DIV class="news-outer">
<DIV class="news-inner">
<A class="title" href="http://employees.blah.org/" target="_blank">Sewage Infected With Ebola Virus May Require Longer Holding Period, Researchers Find</A>
<SPAN class="excerpt">ATLANTA–Storing Ebola-infected sewage for a week at 86° Fahrenheit or higher should allow enough time for more than 99.99 percent of the virus to die, though lower ambient temperatures may require a longer holding period, according to a new study by researchers at Georgia State University’s School of Public Health. more» </SPAN><a class="btn" href="#">View details »</a>
</DIV>
<A class="news-label" href="http://employees.blah.org/"><SPAN>News</SPAN></A>
</DIV>
</LI>
<LI>
<DIV class="news-outer">
<DIV class="news-inner">
<A class="title" href="http://employees.blah.org/" target="_blank">Blend Of Mental Practice And Physical Therapy Effective Treatment For Stroke, Research Shows</A>
<SPAN class="excerpt">ATLANTA—A combination of mental practice and physical therapy is an effective treatment for people recovering from a stroke, according to researchers at Georgia State University. The findings, published on March 30 in the journal Frontiers in Human Neuroscience, examine how the brains of stroke patients change after treatment. Mental practice and physical therapy are interventions¦ more»</SPAN><a class="btn" href="#">View details »</a>
</DIV>
<A class="news-label" href="http://employees.blah.org/"><SPAN>News</SPAN></A>
</DIV>
</LI>
</UL>
</DIV>
</DIV>
</DIV>
</DIV>
*/
/* Current CSS for news classes:
article {
padding: 20px 0;
}
.news {
background: rgb(255, 255, 255);
}
.news::before {
line-height: 0;
display: table;
content: "";
}
.news::after {
line-height: 0;
display: table;
content: "";
}
.news::after {
clear: both;
}
.news::before {
line-height: 0;
display: table;
content: "";
}
.news::after {
line-height: 0;
display: table;
content: "";
}
.news::after {
clear: both;
}
.news ul {
margin: 0px;
border-collapse: separate;
table-layout: fixed;
border-spacing: 15px;
}
.news ul li {
background: white;
list-style: none;
width: 40%;
height: 100px;
line-height: 16px;
overflow: hidden;
font-size: 12px;
vertical-align: top;
display: table-cell;
position: relative;
border: 1px solid #C1A117;
}
.news ul li .news-outer {
padding: 10px 30px 10px 10px;
height: 80px;
position: relative;
}
.news ul li .news-outer .news-inner {
height: 80px;
overflow: hidden;
position: relative;
}
.news ul li .news-outer .news-label {
background: rgb(204, 0, 0);
padding: 0px 5px;
transform-origin: left bottom;
left: 100%;
width: 200px;
height: 20px;
bottom: 0px;
color: rgb(255, 255, 255);
text-transform: uppercase;
line-height: 20px;
font-size: 14px;
position: absolute;
box-sizing: border-box;
transform: rotate(-90deg);
-moz-box-sizing: border-box;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-box-sizing: border-box;
-webkit-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
}
.news ul li .news-outer .news-inner a:first-child {
line-height: 24px;
font-size: 18px;
font-weight: bold;
display: block;
}
*/
明白了。我使用了
function AddToNewsDiv(name, caption, pictureURL, imageID, newsId, nameURL) {
var mydiv = "rssjbNews"+newsId;
//alert("mydiv: "+mydiv);
//alert ('AddToNewsDiv name : ' + name + ' pictureURL : ' + pictureURL + ' caption: ' + caption );
$("#"+mydiv).append("<A class='title' href='http://employees.blah.org/' target='_blank'>"+name+
"</A><SPAN class='excerpt'>"+caption+" |</SPAN><a class='btn-mini' href='"+nameURL+"'>View details »</a>");
};
然后硬编码容器div，如
<DIV class="news-outer">
<DIV class="news-inner" id="rssjbNews1"></DIV> <A class="news-label" href="http://employees.blah.org/">SPAN>News</SPAN></A></DIV>