Semantic UI 之 对话框
程序员文章站
2024-01-31 13:12:16
...
简单对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<link rel="stylesheet" href="semantic-ui/semantic.min.css">
<script type="text/javascript" src="js/jquery3.3.1.js"></script>
<script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
</head>
<body>
<div class="ui container">
<img src="imgs/lyl.jpg" class="ui centered image big">
<div class="ui small basic modal">
<div class="header title">确定删除吗？</div>
<div class="content">
删除类型的同时会删除相关的所有文章，确定删除码？
</div>
<div class="actions">
<button class="ui negative button">否</button>
<button class="ui positive button">是</button>
</div>
</div>
</div>
<script>
$(".ui.basic.modal").modal("show");
</script>
</body>
</html>
效果：
对话框事件回调
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<link rel="stylesheet" href="semantic-ui/semantic.min.css">
<script type="text/javascript" src="js/jquery3.3.1.js"></script>
<script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
</head>
<body>
<div class="ui container">
<div class="ui modal">
<div class="header title">确定删除吗？</div>
<div class="content">
删除类型的同时会删除相关的所有文章，确定删除码？
</div>
<div class="actions">
<button class="ui negative button">否</button>
<button class="ui positive button">是</button>
</div>
</div>
</div>
<script>
$(".ui.modal")
.modal({ //各种回调方法
onShow: function () {
console.log("正在显示");
},
onVisible: function () {
console.log("完全显示");
},
onHide: function () {
console.log("开始隐藏");
},
onHidden: function () {
console.log("完全隐藏");
},
onApprove:function () { //单击确认按钮
console.log("确认")
},
onDeny:function () { //单击取消按钮
console.log("拒绝")
}
})
.modal("show");
</script>
</body>
</html>
效果：
单击是按钮：
单击否按钮：
综合示例
单击第一个对话框中的是按钮，打开第二个对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<link rel="stylesheet" href="semantic-ui/semantic.min.css">
<script type="text/javascript" src="js/jquery3.3.1.js"></script>
<script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
</head>
<body>
<div class="ui container">
<div class="ui modal first">
<div class="header title">确定删除吗？</div>
<div class="content">
删除类型的同时会删除相关的所有文章，确定删除码？
</div>
<div class="actions">
<button class="ui negative button">否</button>
<button class="ui positive button">是</button>
</div>
</div>
</div>
<div class="ui modal second">
<div class="ui header title">正在删除</div>
<div class="ui progress"> <!--此处直接使用 data-percent="32"没有效果-->
<div class="bar"></div>
</div>
</div>
<script type="text/javascript">
//通过JavaScript设置进度值
$(".ui.progress").progress({
percent: 70
});
</script>
<script>
$(".first").modal({
blurring: true,
inverted: true
}).modal("show");
$(".second").modal( //在第二个按钮上添加事件
"attach events",
".first .positive.button",
"show"
);
</script>
</body>
</html>
效果：
上一篇： 腾讯QQ微博API接口获取微博内容
下一篇： yii