Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
大大大太阳yt
driver.js
提交
1de52889
D
driver.js
项目概览
大大大太阳yt
/
driver.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
driver.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
1de52889
编写于
3月 11, 2018
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
More examples and docs
上级
ae924787
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
119 addition
and
1 deletion
+119
-1
demo/scripts/demo.js
demo/scripts/demo.js
+82
-0
demo/styles/demo.scss
demo/styles/demo.scss
+9
-1
index.html
index.html
+28
-0
未找到文件。
demo/scripts/demo.js
浏览文件 @
1de52889
...
...
@@ -101,6 +101,88 @@ document.querySelector('#run-single-element-with-popover')
popover
:
{
title
:
'
Did you know?
'
,
description
:
'
You can add HTML in title or description also!
'
,
position
:
'
top
'
}
});
});
/////////////////////////////////////////////////////
// Highlighting single element with popover position
/////////////////////////////////////////////////////
const
singleSholoWithPopoverPosition
=
new
Sholo
();
document
.
querySelector
(
'
#run-single-element-with-popover-position
'
)
.
addEventListener
(
'
click
'
,
(
e
)
=>
{
e
.
preventDefault
();
singleSholoWithPopoverPosition
.
highlight
({
element
:
'
#single-element-with-popover-position
'
,
popover
:
{
title
:
'
Did you know?
'
,
description
:
'
You can add HTML in title or description also!
'
,
position
:
'
left
'
}
});
});
/////////////////////////////////////////////////////
// Highlighting single element with popover position
/////////////////////////////////////////////////////
const
positionBtnsSholo
=
new
Sholo
({
padding
:
0
});
document
.
querySelector
(
'
#position-btn-left
'
)
.
addEventListener
(
'
click
'
,
(
e
)
=>
{
e
.
preventDefault
();
positionBtnsSholo
.
highlight
({
element
:
'
#position-btn-left
'
,
popover
:
{
title
:
'
Did you know?
'
,
description
:
'
You can add HTML in title or description also!
'
,
position
:
'
left
'
}
});
});
document
.
querySelector
(
'
#position-btn-right
'
)
.
addEventListener
(
'
click
'
,
(
e
)
=>
{
e
.
preventDefault
();
positionBtnsSholo
.
highlight
({
element
:
'
#position-btn-right
'
,
popover
:
{
title
:
'
Did you know?
'
,
description
:
'
You can add HTML in title or description also!
'
,
position
:
'
right
'
}
});
});
document
.
querySelector
(
'
#position-btn-bottom
'
)
.
addEventListener
(
'
click
'
,
(
e
)
=>
{
e
.
preventDefault
();
positionBtnsSholo
.
highlight
({
element
:
'
#position-btn-bottom
'
,
popover
:
{
title
:
'
Did you know?
'
,
description
:
'
You can add HTML in title or description also!
'
,
position
:
'
bottom
'
}
});
});
document
.
querySelector
(
'
#position-btn-top
'
)
.
addEventListener
(
'
click
'
,
(
e
)
=>
{
e
.
preventDefault
();
positionBtnsSholo
.
highlight
({
element
:
'
#position-btn-top
'
,
popover
:
{
title
:
'
Did you know?
'
,
description
:
'
You can add HTML in title or description also!
'
,
position
:
'
top
'
}
});
});
\ No newline at end of file
demo/styles/demo.scss
浏览文件 @
1de52889
...
...
@@ -91,8 +91,16 @@ section {
background-color
:
#fafbfc
;
border
:
3px
solid
#e1e4e8
;
border-radius
:
3px
;
box-shadow
:
inset
0
0
10px
rgba
(
27
,
31
,
35
,
0
.05
);
box-shadow
:
inset
0
0
10px
rgba
(
27
,
31
,
35
,
0
.05
);
margin-bottom
:
0
;
margin-top
:
7px
;
}
}
.position-btns
a
{
font-size
:
13px
;
padding
:
10px
15px
;
background
:
#f54336
;
color
:
white
!
important
;
border-radius
:
6px
;
}
\ No newline at end of file
index.html
浏览文件 @
1de52889
...
...
@@ -102,8 +102,36 @@ driver.highlight({
}
});
</code></pre>
<p
class=
"top-20"
>
You can modify the behavior of this popover also by a certain set of options. More on it
below.
</p>
</div>
<hr
class=
"hr__fancy"
>
<div
id=
"single-element-with-popover-position"
class=
"section__example"
>
<h4>
Popover Positioning
</h4>
<p>
You can also, change the position of the popover to be either
<code>
left
</code>
,
<code>
top
</code>
,
<code>
right
</code>
or
<code>
bottom
</code>
.
</p>
<a
href=
"#"
class=
"btn__run-demo"
id=
"run-single-element-with-popover-position"
>
Run it
</a>
<pre><code
class=
"javascript"
>
const driver = new Driver();
driver.highlight({
element: '#some-element',
popover: {
title: 'Title for the Popover',
description: 'Description for it',
position: 'left', // can be `top`, `left`, `right`, `bottom`
}
});
</code></pre>
<div
class=
"top-20 position-btns"
>
<a
href=
"#"
id=
"position-btn-left"
>
On my Left
</a>
<a
href=
"#"
id=
"position-btn-top"
>
On my Top
</a>
<a
href=
"#"
id=
"position-btn-bottom"
>
On my Bottom
</a>
<a
href=
"#"
id=
"position-btn-right"
>
On my Right
</a>
</div>
<p
class=
"top-20"
>
If you don't specify the position or specify it to be
<code>
auto
</code>
, it will automatically
find the suitable position for the popover and show it
</p>
</div>
</section>
</div>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录