Upload
vokhue
View
217
Download
0
Embed Size (px)
Citation preview
ThInl
he SP
ine Nav
ELL T
vigation
Tabs
n for Sha
SPELL Ta
July 2013
Author:
Christoph
User Ma
arePoin
bs versio
3
he HUMB
naged So
t Pages
n 1.0.0
BERT
olutions LL
s
LC
Table of
About the
Instructio
Prerequ
Installa
Adding
Adding
About t
Playing w
Tab col
Hyperli
Contro
Reusing
Additio
Playing
Can I do
Known
Inline Tab
Terms of
Support ..
Contact In
f Contents
e SPELL Tabs .
ns ................
uisites ..........
tion .............
tabs to a pag
tabs to a pag
the inline mo
ith the option
ors ...............
nks ..............
ls ..................
g your setting
onal settings .
g with the layo
o more with t
issues and lim
bs: what are m
Use ..............
.....................
nformation ...
.....................
.....................
.....................
.....................
ge (app mode
ge (app mode
de ................
ns .................
.....................
.....................
.....................
gs ..................
.....................
out ...............
the SPELL Tab
mitations ......
my other opti
.....................
.....................
.....................
.....................
.....................
.....................
.....................
e, default sett
e, custom sett
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
bs? ................
.....................
ons? .............
.....................
.....................
.....................
......................
......................
......................
......................
tings) .............
tings) ............
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
The SPE
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
LL Tabs Ju
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
.....................
ly
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
......................
....... 2
....... 3
....... 3
....... 3
....... 3
....... 5
....... 7
....... 7
....... 7
....... 8
....... 8
....... 8
....... 9
....... 9
..... 10
..... 10
..... 10
..... 11
..... 11
..... 11
About
As more a
Users are
The SPELL
tabbed in
to the tab
Figure 1: t
If you hav
concept. T
SharePoin
For a live
The SPELL
Solutions
the SPELL
and more con
forced to scr
L Tabs addres
terface, creat
bs, the users c
tabs building
ve been using
The SPELL Tab
nt 2007, 2010
example, che
L Tabs are a c
in SharePoin
L Tabs
ntent gets pus
roll down to d
ss this issue: w
ting tabs asso
can identify a
process
g the Easy Tab
bs are a more
0, 2013 and Sh
eck out the ho
omponent of
t environmen
shed into Sha
discover the p
when added t
ociated with e
t a glance an
bs in SharePoi
e solid, powe
harePoint On
ome page of t
f SPELL, a pro
nts.
arePoint, Web
page content.
to a Web Part
each Web Par
d easily reach
int 2007 or 20
rful and user
line (Office 3
the SharePoin
gram dedicat
The SPE
b Part pages o
.
t zone, they a
rt present in t
h the specific
010, you are
friendly impl
365).
nt User Toolk
ted to the de
LL Tabs Ju
often become
automatically
the zone (cf.
area they are
already famil
lementation t
kit.
ployment of
ly
e overcrowde
y generate a
figure 1). Tha
e interested i
liar with this
that targets
User Manage
ed.
anks
in.
ed
Instruc
Prerequi
To implem
2007, 201
For older
Internet a
(CDN). If n
SPELL doe
Installati
The instal
You can fo
upload th
The Tabs
SP
SP
us
SP
fo
SP
The js file
Remembe
you stay i
http://div
in http://d
Adding t
To add th
1. G
2. A
ctions
isites
ment the SPEL
10, 2013 or Sh
browsers (lik
access (defau
not, the code
esn’t support
ion
lation proces
or example u
e files either
require 5 SPE
PELL1.0.0Tab
PELL1.0.0Cor
sed by other
PELL1.0.0Inlin
oundation to
PELL1.0.0Tab
s are used by
er: the same S
n the same d
visionOne.myC
divisionOne.m
tabs to a pag
e tabbed inte
o to your Sha
dd to a Web
LL Tabs, you n
harePoint On
ke IE 7), additi
lt configuratio
can be store
Internet Exp
ss is very simp
se the Site As
at the root le
ELL componen
s.aspx is the
e.min.js and S
SPELL solutio
neNavigation
build other n
sForm.min.js
y SPELL1.0.0Ta
SPELL Tabs fil
omain. If for
Company.com
myCompany.c
ge (app mo
erface:
arePoint page
Part zone the
need owner o
line (Office 36
ional code is
on), the code
d in a ShareP
lorer version
ple: just uploa
ssets library p
evel or in a fo
nts:
page that ma
SPELL1.0.0Co
ons, which is w
.min.js is the
navigation inte
s is only used
abs.aspx inte
le can be used
example your
m/SiteAssets/
com, but not o
de, default
e and switch t
e Web Parts y
or designer pe
65).
required to s
e can be loade
Point library, a
6 or before.
ad the files to
present by de
lder, as long
anages the tab
ore.min.js con
why they are
code that bu
erfaces.
in edit mode
rnally; you’ll
d across sites
r SPELL file is
/SPELL/SPELL1
on pages loca
settings)
to edit mode
you want to ta
The SPE
ermissions on
upplement m
ed from a pub
along with SP
o a document
efault in all Sh
as all files are
bbed interfac
ntain core SPE
stored as sep
uilds the tabs.
, to build the
never call the
s and even acr
located in
1.0.0Tabs.asp
ated in http://
(Site Actions
abify (your co
LL Tabs Ju
n a SharePoin
missing capab
blic Content D
PELL.
t library and y
harePoint team
e at the same
ce and its edit
ELL functions.
parate files.
. It can also se
edit form.
em directly.
ross site colle
px, you can us
//divisionTwo.
> Edit page)
ontent)
ly
nt site version
ilities. If you
Delivery Netw
you're good t
m sites. You c
e level.
t menu.
. They are als
erve as the
ections, as lon
se it on any p
.myCompany
n
have
work
o go!
can
so
ng as
page
y.com.
3. A
SP
4. Sa
At this po
Figure 2: P
Figure 3: P
dd a Page Vie
PELL1.0.0Tab
ave the page
int, you shou
Page Viewer
Page Viewer
ewer Web Pa
s.aspx file (cf
and exit the
uld see your ta
Web Part link
Web Part app
rt as the first
f. figures 2 an
edit mode
abbed interfa
k
pearance
Web Part in
d 3)
ace on the pa
The SPE
the zone (cf.
ge.
LL Tabs Ju
figure 1), and
ly
d link it to your
Note: The
Importan
each tab.
default na
If you hav
of the SPE
‐ W
‐ Th
‐ Th
Adding t
To custom
Step 1: Se
To select
turns to e
Select you
‐ Th
‐ Th
Example:
If the defa
/SiteAsset
When you
/SiteAsset
Importan
url when y
Step 2: fo
full url, op
e tabs are not
t! The title of
If the tab titl
ame.
ve used the Ea
ELL Tabs in ap
We use a Page
he Web Part
he Page View
tabs to a pag
mize the look
elect your opt
your options,
edit mode and
ur options, an
he colors are
he options ar
ault SPELL Ta
ts/SPELL/SPE
u choose to se
ts /SPELL/SPE
t! The option
your options
ollow the sam
ptions include
t rendered wh
f each Web Pa
e says “Item”
asy Tabs in th
pp mode:
e Viewer Web
is located wh
wer Web Part
ge (app mo
of the tabs, y
tions
, open the SP
d displays the
nd then click o
applied to th
re added to th
bs url is:
LL1.0.0Tabs.a
et the backgr
ELL1.0.0Tabs.
s are not save
are final.
e procedure
ed.
hile you are in
art must be v
”, it means th
he past, you’ll
b Part to link t
here we want
should not be
de, custom
you need to o
PELL1.0.0Tabs
e options (cf. f
on the “Apply
he preview
he url
aspx
round color o
aspx#css.acti
ed; they are j
as in the prev
n edit mode.
visible on the p
at the Web P
l notice some
to the code
the tabs, not
e hidden as it
settings)
operate in two
s.aspx page. In
figure 4).
y Custom Opt
f the active ta
veBackgroun
just added to
vious section,
The SPE
page. The cod
Part title was n
e key differen
t at the botto
t serves as th
o steps.
n standalone
tions” button
ab to “Orang
nd=Orange
the url. Reme
, but in the Pa
LL Tabs Ju
de relies on th
not found an
ces with the
om of the zon
e container f
mode, the p
n. This will hav
e”, the url be
ember to mak
age Viewer W
ly
he title to bui
d the code us
implementat
e
or the tabs
age automat
ve two action
ecomes:
ke a copy of t
Web Part use
ild
ses a
tion
ically
ns:
the
the
Figure 4: S
SPELL1.0.0Tabs.aspx in ed
it mode
The SPELL Tabs Ju
ly
About th
SPELL can
need a W
Part or in
The inline
altered, o
safer, “no
Note: the
the code t
the app ve
Playing
The tabbe
In
H
C
Figure 5: t
The edit m
Tab colo
Maybe gr
menu allo
There’s a
need to m
he inline mo
n also be impl
eb Part that a
SP 2013 a Sc
e mode target
or if the code
o code” way a
inline version
to apply the s
ersion makes
g with the
ed interface is
nline tabs (on
yperlinks
ontrols
the 3 sections
menu reflects
ors
ey is too blan
ows you to se
choice of 147
match a specif
ode
emented in in
accepts code
ript Editor W
ts developers
needs to inte
and is recomm
n offers the sa
settings, and s
maintenance
e options
s made of 3 s
e tab per We
s of the tabbe
s this structur
nd for your ta
t the tabs bac
7 color names
fic color palet
nline mode. I
. You can use
eb Part.
s. It is recomm
eract with oth
mended for en
ame customiz
save a differe
e so much eas
ections (cf. fi
eb Part)
ed interface
re, and offers
ste, and you’
ckground and
s supported b
tte, you can e
n this case, in
for example
mended when
her code pres
nd users.
zation option
ent version fo
sier!
gure 5):
customizatio
d like to see
d font color fo
by all major b
enter a hex co
The SPE
nstead of a Pa
a Content Ed
n the original
ent on the pa
s as the app m
r each custom
on options for
more vivid co
or the 3 state
browsers. And
ode (for exam
LL Tabs Ju
age Viewer W
ditor Web Par
form needs t
age. The app
mode, but yo
mization. For
r each section
olors on the t
es (active/inac
d if this is not
mple #ff4500)
ly
Web Part you’
rt, a Form We
to be significa
version is the
ou’d need to e
standard opt
n.
abs? The edit
ctive/hover).
enough, or if
.
ll
eb
antly
e
edit
tions,
t
f you
Hyperlin
The edit m
For each,
current do
For examp
In
In
Note: if yo
Controls
The tabbe
V
Fu
R
The edit m
control is
Note: afte
page.
Reusing
Once you
collection
Remembe
page (SPE
domain. In
which are
ks
menu allows u
enter the dis
omain).
ple, to create
n the text field
n the URL field
ou need more
s
ed interface in
iew All / Hide
ull Screen / B
emove Tabs
menu allows y
not displayed
er clicking on
your setting
have custom
n’s Web Part G
er: by passing
ELL1.0.0Tabs.
n terms of pe
e already far m
up to 3 hyper
splayed text a
e a link to Twi
d: Twitter
d: //twitter.c
e than 3 hype
ncludes up to
e All
ack to Page
you to custom
d.
the “Remove
gs
mized your Pag
Gallery, wher
g the options
.aspx) is lever
erformance an
more efficient
rlinks.
and the url. A
tter (https://
com
erlinks, this ca
o 5 controls:
mize the text
e Tabs” contro
ge Viewer We
e it becomes
in the hash p
raged across
nd maintenan
t than traditio
url starts wit
twitter.com),
an be done by
displayed in e
ol, the only w
eb Part, you c
available to a
art of the UR
sites, and eve
nce, this is a s
onal inline tab
The SPE
th // (absolut
, enter the fo
y editing the S
each control.
way to get the
can export it
all sites and p
RL, we are ens
en across site
significant im
bs.
LL Tabs Ju
e link) or / (li
ollowing value
SPELL1.0.0Tab
If no text is e
e Tabs back is
and upload it
pages.
suring that th
e collections w
provement o
ly
nk relative to
es:
bsForm file.
entered then
to refresh th
t to the site
he exact same
within a same
ver the Easy T
o the
the
e
e
e
Tabs,
Addition
The SPELL
directly to
‐ A
‐ R
Playing w
In the pre
offered by
Leave the
Easy: mov
Have two
Give both
Link to a s
Right click
open the
Display fo
Yes, the S
especially
2007).
nal settings
L Tabs offer a
o the url optio
dd a title abo
emove the ro
with the lay
evious chapte
y the SPELL T
e first Web Pa
ve the Page V
o Web Parts u
h Web Parts th
specific tab
k on the tab a
page, the tab
orm
SPELL Tabs wo
y effective wh
dditional sett
ons, others re
ove the tabs:
ounded corne
out
r we reviewe
abs.
art out of the
Viewer Web P
under the sam
he same title
and copy the
b you selected
ork in the disp
hen combined
tings not avai
equire editing
#intro=myTi
ers: #css.radi
ed some exam
e tabbed inter
Part to the sec
me tab
.
link address.
d will automa
pform.aspx. T
d with the Sha
ilable through
g the code. He
tle
us=0
mples of tab s
rface
cond position
You can then
atically be act
This is actually
arePoint “rela
The SPE
h the edit me
ere are some
ettings. Below
n in the page.
n forward the
tivated.
y a very popu
ated items” fe
LL Tabs Ju
enu. Some can
e simple exam
w are some m
e link to other
ular use of inl
eature (not a
ly
n be added
mples:
more features
r users; when
ine tabs,
vailable in SP
s
they
P
Can I do
Sure!
First, ther
allows dif
And we ca
specific re
existing fr
SPELL also
menu or a
of SPELL N
To get in t
document
Known is
Character
In its stan
If your en
Calendar
The SP 20
the tabs is
calendar a
This issue
Inline T
Inline tab
most pop
(dojo, Ken
more with
re are some m
fferent tab sty
an go further
equirements.
rameworks lik
o allows us to
a drop‐down
Nav).
touch with us
t.
ssues and li
rs
dard version,
vironment re
views in Sha
010 calendar h
s basically to
a fixed width
is not presen
Tabs: wha
s are very po
ular in the Sh
ndo UI, etc.).
the SPELL T
more options
yles to coexis
. As the code
For example
ke jQuery UI.
o completely c
list. This is do
s and learn m
mitations
, the SPELL Ta
equires non‐A
rePoint 2010
has a resizing
do Web Part
.
nt in other ve
at are my
pular in Web
harePoint wor
Tabs?
available wit
t on a same p
is accessible
, just changin
change the la
one by a mod
more about SP
abs only retai
ASCII characte
0
g bug. This bu
resizing at ru
ersions (SP 20
other op
design, and s
rld is jQuery U
h the full vers
page.
from the use
ng a couple lin
ayout, and ins
dule called SP
PELL, see the c
in printable A
ers in the tab
g affects the
untime. The fi
07, SP 2013,
ptions?
several JavaS
UI. It is also p
The SPE
sion – for exa
er’s side, we c
nes will make
stead of tabs
ELL Nav (SPEL
contact inform
ASCII characte
titles, please
SPELL Tabs a
ix is to give th
new Office 3
cript libraries
present in mo
LL Tabs Ju
ample the “cl
can easily twe
e the tabs com
render for ex
LL Tabs actua
mation at the
ers and will st
contact us.
nd the Easy T
he Web Part t
65).
s offer this fe
st major Java
ly
ass” option th
eak it to meet
mpatible with
xample a vert
ally being a su
e end of this
trip out the re
Tabs, as the ro
that contains
ature. One of
aScript framew
hat
t
h
tical
ubset
est.
ole of
s the
f the
works
What mak
interface.
serves mu
The Easy T
the previo
the exact
performa
Terms
Along wit
accept the
Suppor
User Man
more deta
Contac
Christoph
SPELL Pro
E‐mail Phone Skype Twitter Website Blog
kes the SPELL
While in trad
ultiple pages.
Tabs already
ous chapters,
same code c
nce and muc
of Use
h the SPELL f
e terms, you
rt
naged Solutio
ails, see the S
ct Informa
he HUMBERT
ogram ‐ User M
Christophe@+1‐858‐999‐ChristopheH@UserManahttp://Userhttp://blog.
L Tabs differe
ditional desig
relied on this
with the SPE
can be reused
h easier main
iles you recei
must not inst
ns offers supp
SPELL program
ation
Managed Solu
@UserManag‐6321 Humbert aged, @Path2ManagedSolupathtosharep
nt is their abi
n each page r
s technique, b
ELL Tabs, even
d across multi
ntenance.
ve an End Us
tall or use the
port ‐ webina
m page, or co
utions LLC
gedSolutions.c
2SharePointutions.com/Spoint.com
ility to feed fr
requires its o
but SPELL is ta
n core setting
ple teams an
ser License Ag
e application.
ars, forum, co
ntact us (see
com
PELL
The SPE
rom the page
wn html code
aking it one s
gs like colors a
nd site collect
greement. Ple
onsulting hou
information
LL Tabs Ju
e itself to buil
e, with SPELL
step further. A
are passed as
ions. This tra
ease read it. I
rs ‐ via the SP
below).
ly
d the tabbed
L the same co
As we have se
s parameters,
nslates into b
f you do not
PELL program
de
een in
, so
better
m. For