JSLink expand collapse documents
the expand/collapse is for each folder in the doc lib
note: you need to change the view to flat insead of folders (edite view -> style)
sample and example, with nano scroller, from my onedrive
https://onedrive.live.com/redir?resid=949DC4EDBFFD4738!254&authkey=!ACwGD9PzPMxqle0&ithint=file%2cjs
i just followed this fiddle http://jsfiddle.net/hungerpain/eK8X5/7/
and this is my extra css
.DocumentsZone { border-top: 1px solid #d4d4d4}
.docs-title-wrapper { margin: 20px 0 20px;}
.docs-title-wrapper h2.ms-webpart-titleText {display:inline-block; }
.docs-title-wrapper input{ border: none;width: 23px;height: 23px;min-width: 0;vertical-align: top;margin-top: 7px;background: url('/PublishingImages/+.png');}
.docs-wrapper ul {list-style:none;}
.docs-wrapper li {padding: 10px 0;}
.tree-header {cursor:pointer}
.tree-header > span {font-size: 17px;margin-left: 9px;line-height: 24px;vertical-align: bottom;}
.tree-content {display: none;}
.leaf-row1 > img {float:left;}
.leaf-row1 > span {font-size: 14px;color: #00aae7;vertical-align: super;margin-left: 26px;display: block;}
.leaf-row2 {margin-left:26px;}
.leaf-row2 span {margin-right:8px;}
.tree-allDocsLink {text-align: center;padding-right: 60px;margin: 30px 0;}
.tree-allDocsLink a { font-size: 12px;font-weight: bold;color: #00aae7;}
the result is:
note: you need to change the view to flat insead of folders (edite view -> style)
sample and example, with nano scroller, from my onedrive
https://onedrive.live.com/redir?resid=949DC4EDBFFD4738!254&authkey=!ACwGD9PzPMxqle0&ithint=file%2cjs
i just followed this fiddle http://jsfiddle.net/hungerpain/eK8X5/7/
and this is my extra css
.DocumentsZone { border-top: 1px solid #d4d4d4}
.docs-title-wrapper { margin: 20px 0 20px;}
.docs-title-wrapper h2.ms-webpart-titleText {display:inline-block; }
.docs-title-wrapper input{ border: none;width: 23px;height: 23px;min-width: 0;vertical-align: top;margin-top: 7px;background: url('/PublishingImages/+.png');}
.docs-wrapper ul {list-style:none;}
.docs-wrapper li {padding: 10px 0;}
.tree-header {cursor:pointer}
.tree-header > span {font-size: 17px;margin-left: 9px;line-height: 24px;vertical-align: bottom;}
.tree-content {display: none;}
.leaf-row1 > img {float:left;}
.leaf-row1 > span {font-size: 14px;color: #00aae7;vertical-align: super;margin-left: 26px;display: block;}
.leaf-row2 {margin-left:26px;}
.leaf-row2 span {margin-right:8px;}
.tree-allDocsLink {text-align: center;padding-right: 60px;margin: 30px 0;}
.tree-allDocsLink a { font-size: 12px;font-weight: bold;color: #00aae7;}
the result is:
Comments
Post a Comment