Tabbed Content jQuery Plugin

rouleaupromiseΑσφάλεια

5 Νοε 2013 (πριν από 3 χρόνια και 9 μήνες)

79 εμφανίσεις

Tabbed Content

jQuery Plugin

Browser

1)

Create test list (Projects) with 2 columns: Title and Description (Multiline text/
plain text
/20 lines)

2)

Add some items into the list

3)

Create
Demo

page in site pages

SharePoint Designer

4)

Edit page. Advanced mode.

5)

Insert
DataView webpart, select Projects list, select columns (Title, Description)

6)

Design >
Customize xslt, entire view, remove everything between <xsl></xsl>, paste into Notepad++,
save as Projects.xslt

7)

Upload Projects.xslt to Style Library

8)

List View Tools > Web

Part > Properties, set location of XSLT file

9)

Save file and refresh page to make sure it renders


Find jQuery Plugin

10)

http://codebrewery.blogspot.com/2010/06/microtab
-
01
-
re
leased_16.html

11)

View demo, View Source, download plugin, also download jquery (
http://code.jquery.com/jquery
-
1.6.2.min.js
), copy <style></style> into css file, look at html format needed by plugin.

12)

Upload microtabs.css to Style Library, Upload jquery.js and jquery
-
microtabs.js to Scripts Library

SharePoint Designer

13)

Still editing page, add inside PlaceHolderMain:



<link rel="stylesheet" type="text/css" href="/Style%20Library/microtabs.css" />


<script src="/Scripts/jquery
-
1.6.2.min.js" type="text/javascript"></script>


<script src="/Scripts/jquery.microtabs
-
0.1.min.js" type="text/javascript"></script>


<script type="text/javascript">


$(function(){


$('.microtabs').microTabs({


selected: 1


});


})


</script>


Notepad++

14)

Modify pasted XSLT

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema"
xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude
-
result
-
prefixes="xsl
msxsl ddwr
t" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xml
ns:msxsl="urn:schemas
-
microsoft
-
com:xslt"
xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal"
xmlns:o="urn:schemas
-
microsoft
-
com:office:office" ddwrt:ghost="show_all">


<xsl:include href="/_layouts/xsl/main.xsl"/>



<xsl:include href="/_layouts/xsl/internal.xsl"/>


<xsl:param name="AllRows" select="/dsQueryResponse/Rows/Row[$EntityName = '' or (position()
&gt;= $FirstRow and position() &lt;= $LastRow)]"/>


<xsl:param name="dvt_apos">'</xsl:param>


<xsl:template m
atch="/" ddwrt:ghost="hide">


<div class="microtabs">


<xsl:for
-
each select="$AllRows">


<div class="micro">


<a href="#"><xsl:value
-
of select="@Title" disable
-
output
-
escaping="yes" /></a>


<div><xsl:value
-
of select="@Descr
iption" disable
-
output
-
escaping="yes" /></div>


</div>


<
/xsl:for
-
each>


</div>


</xsl:template>

</xsl:stylesheet>


Paste in divs from microtabs view source page and then replace hard
-
coded text with @Title, etc.


SharePoint Designer

15)

Upload
Projects.xslt to Style Library/XSLT Style Sheets

16)

Refresh page


Now create custom webpart instead of customizing page

Notepad++

1)

Modify xslt and insert script and css references.


<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema"
xmlns:d
="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude
-
result
-
prefixes="xsl
msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
xmlns:__designer="http://schem
as.microsoft.com/WebParts/v2/DataView/designer"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas
-
microsoft
-
com:xslt"
xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal"
xmlns:o="urn:schemas
-
mic
rosoft
-
com:office:office" ddwrt:ghost="show_all">


<xsl:include href="/_layouts/xsl/main.xsl"/>


<xsl:include href="/_layouts/xsl/internal.xsl"/>


<xsl:param name="AllRows" select="/dsQueryResponse/Rows/Row[$EntityName = '' or (position()
&gt;= $Firs
tRow and position() &lt;= $LastRow)]"/>


<xsl:param name="dvt_apos">'</xsl:param>


<xsl:template match="/" ddwrt:ghost="hide">



<link rel="stylesheet" type="text/css" href="/Style%20Library/microtabs.css" />



<script src="/Scripts/jquery
-
1.6.2.min
.js" type="text/javascript"></script>


<script src="/Scripts/jquery.microtabs
-
0.1.min.js" type="text/javascript"></script>


<script type="text/javascript">


$(function(){


$('.microtabs').microTabs({


selected: 1


});



})



</script>


<div class="microtabs">


<xsl:for
-
each select="$AllRows">


<div class="micro">


<a href="#"><xsl:value
-
of select="@Title" disable
-
output
-
escaping="yes" /></a>


<div><xsl:value
-
of

select="@Description" disable
-
output
-
escaping="yes" /></div>


</div>


</xsl:for
-
each>


</div>


</xsl:template>

</xsl:stylesheet>



SharePoint Designer


2)

Remove same markup from page and make sure <XSLLink> is /Style Library/Projects.xslt

3)

Ed
it same page, click XsltWebPart, List View Tools > Web Part > To File

4)

Site Actions > Site Settings > (Galleries) Web Parts, Upload file just saved


Browser


5)

Delete customize
d

page, create a new page

6)

Insert webpart, make note of xslt path


Look at other
jQuery plugin webparts already done:



ProjectCarouSlide



GraphTest


Look at not created
-
yet Slide Viewer



Slides
\
examples



View Source



Review steps:

(1)

Add DataView Web Part / pick columns

(2)

Customize XSLT / Entire View / Delete between <xsl></xsl>

(3)

Create custom
XSLT based on html in plugin

(4)

Save web part

(5)

Upload xslt/script(s)/css/webpart

(6)

Insert on the page


http://www.tombran.co.uk/projects/carouslide/example3.html

http://www.workshop.rs/jqbargraph/

http://slidesjs.com/