Hi All,
I am a SP 2013 App newbie and I am trying to get a simple App with App.css to work without any luck.
What I would like the app to do is change the colour of some list items in a list on the Default.aspx page. I know it works OK on an ASP.Net web page, but I wanted to know what I need to change to get the same code to work within a SharePoint 2013 App.
The code is shown below. I hope you can help
CEStar
**************
App.css:
.listitem_1,.listitem_3
{
color:red;
}
.listitem_0,.listitem_2
{
color:blue;
}
**************
App.js:
$(document).ready(function(){
$("#xbutton").click(function(){
$("li").toggleClass(function(n){
return"listitem_"+ n;
});
});
});
***************
Or Edit App.js:
$(document).ready(function(){ $("#xbutton").click((test);
});
functiontest(){
$("li").toggleClass(function(n){
return"listitem_"+ n;
});
};
**************
Default.aspx:
<%-- The following 4 lines
are ASP.NET directives needed when using SharePoint components --%>
<%@PageInherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint,
Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"MasterPageFile="~masterurl/default.master"Language="C#"%>
<%@RegisterTagPrefix="Utilities"Namespace="Microsoft.SharePoint.Utilities"Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%@RegisterTagPrefix="WebPartPages"Namespace="Microsoft.SharePoint.WebPartPages"Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%@RegisterTagPrefix="SharePoint"Namespace="Microsoft.SharePoint.WebControls"Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%-- The markup and script
in the following Content element will be placed in the <head> of the page --%>
<asp:ContentContentPlaceHolderID="PlaceHolderAdditionalPageHead"runat="server">
<scripttype="text/javascript"src="../Scripts/jquery-1.9.1.min.js"></script>
<scripttype="text/javascript"src="/_layouts/15/sp.runtime.js"></script>
<scripttype="text/javascript"src="/_layouts/15/sp.js"></script>
<metaname="WebPartPageExpansion"content="full"/>
<!-- Add your CSS styles to the following file -->
<linkrel="Stylesheet"type="text/css"href="../Content/App.css"/>
<!-- Add your JavaScript to the following file -->
<scripttype="text/javascript"src="../Scripts/App.js"></script>
</asp:Content>
<%-- The markup in the following
Content element will be placed in the TitleArea of the page --%>
<asp:ContentContentPlaceHolderID="PlaceHolderPageTitleInTitleArea"runat="server">
Page Title
</asp:Content>
<%-- The markup and script
in the following Content element will be placed in the <body> of the page --%>
<asp:ContentContentPlaceHolderID="PlaceHolderMain"runat="server">
<div>
<h1>This
is a heading</h1>
<ul>
<li>Peter</li>
<li>Lois</li>
<li>Chris</li>
<li>Stewie</li>
</ul>
</div>
<inputid="xbutton"value="Add/remove classes to list items"type="button"/>
</asp:Content>
************************
Original ASP.Net page:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").toggleClass(function(n){
return "listitem_" + n;
});
});
});
</script>
<style>
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<ul>
<li>Peter</li>
<li>Lois</li>
<li>Chris</li>
<li>Stewie</li>
</ul>
<button>Add/remove classes to list items</button>
*******************