前端学习之路Electron—

html部分

    <div id="msgbtn">msgbtn</div>

JS部分：

dialog.showMessageBox({type:'warning',title:'喜欢哪一个？',message:'喜欢迪丽热巴还是古力娜扎',buttons:['迪丽热巴','古力娜扎']}).then(res=>{console.log(res.response)})

     let msgbtn = document.querySelector('#msgbtn');msgbtn.onclick = function(e){dialog.showMessageBox({type:'warning',title:'喜欢哪一个？',message:'喜欢迪丽热巴还是古力娜扎',buttons:['迪丽热巴','古力娜扎']}).then(res=>{console.log(res.response)})}

全部

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- <button id="btn">打开新的窗口</button><div></div> --><a id="aHref" href="https://www.baidu.com/">打开外部链接</a><div id="myweb">open myweb</div><div id='fatview'></div><div id="opentext">opentext</div><div id="savetxt">savetxt</div><div id="msgbtn">msgbtn</div><img src="" alt="" id="openimg" style="width:100%"><script src="./render/openweb.js"></script><script>const {dialog} = require('electron').remoteconst fs = require('fs')let opentext = document.querySelector('#opentext');let savetxt = document.querySelector('#savetxt');let msgbtn = document.querySelector('#msgbtn');opentext.onclick = function(e){dialog.showOpenDialog({title:'请选择你的文件',defaultPath:'',//默认打开的文件路径选择filters:[{ //过滤掉你不需要的文件格式name:'image',extensions:['jpg','png']}],buttonLabel:'发送表情包'}).then(res=>{let openimg = document.querySelector('#openimg');openimg.setAttribute('src',res.filePaths[0])}).catch(req=>{console.log(req)})}savetxt.onclick = function(e){dialog.showSaveDialog({title:'保存文件',}).then((res)=>{console.log(res)fs.writeFileSync(res.filePaths,'好好学习天天向上')}).catch((req)=>{console.log(req)})}msgbtn.onclick = function(e){dialog.showMessageBox({type:'warning',title:'喜欢哪一个？',message:'喜欢迪丽热巴还是古力娜扎',buttons:['迪丽热巴','古力娜扎']}).then(res=>{console.log(res.response)})}</script>
</body></html>

当type 为 none时

type:'none',

当type 为 info时

type:'info',

当type 为 question时

type:'question',

全部的api

options Object
type String (可选) - 可以为 "none", "info", "error", "question" 或者 "warning". 在 Windows 上, "question" 与"info"显示相同的图标, 除非你使用了 "icon" 选项设置图标。 在 macOS 上, "warning" 和 "error" 显示相同的警告图标
buttons String[] (可选) - 按钮的文本数组。在 Windows 上, 空数组在按钮上会显示 "OK".
defaultId Integer (可选) - 在 message box 对话框打开的时候，设置默认选中的按钮，值为在 buttons 数组中的索引.
title String (可选) - message box 的标题，一些平台不显示.
message String - message box 的内容.
detail String (可选) - 额外信息.
checkboxLabel String (optional) - If provided, the message box will include a checkbox with the given label.
checkboxChecked Boolean (可选) - checkbox 的初始值，默认值为 false.
icon NativeImage (可选)
cancelId Integer (可选) - 用于取消对话框的按钮的索引，例如 Esc 键. By default this is assigned to the first button with "cancel" or "no" as the label. 默认情况下，它被分配给第一个按钮，文字为 “cancel” 或 “no”。 If no such labeled buttons exist and this option is not set, 0 will be used as the return value.
noLink Boolean (可选) - 在Windows上，应用将尝试找出哪个 buttons 是常用按钮(例如 "Cancel" 或 "Yes")，然后在对话框中以链接命令的方式展现其它的按钮。 这可以使对话框以现代Windows应用程序的风格显示。 如果你不喜欢这个行为, 你可以设置 noLink 为 true.
normalizeAccessKeys Boolean (可选) -规范跨平台的键盘访问键。 默认值为 false. 用 & 连接和转换键盘访问键, 以便它们在每个平台上正常工作.& 字符会在macOS上被删除，在 Linux 上会被转换为 _，在 Windows 上保持不变。 例如 Vie&w 的按钮标签在 Linux 上会被转换为 Vie_w，在 macOS 转换为 View 并且可以被选择。而Windows和Linux上表示 Alt-W 。

前端学习之路Electron——弹出框相关推荐

前端常用插件之artDialog弹出框
前端常用插件之artDialog弹出框最近,发现一个插件--好看精致的页面弹出框,个人觉得有必要与大家分享一下,它就是artDialog弹出框. 引用上一篇文章<前端常用插件之art-temp ...
electron 弹出框
1.引入弹出框主线程:const {dialog}=require('electron');渲染进程:const {dialog}=require('electron').remote;2.每个弹出框 ...
swal如何加入html语言,前端基础(九)：SweetAlert(弹出框)
简介 SweetAlert是一款很好用的弹出框框架下载导入博主用的是bootstrap-sweetalert,所以要依赖bootstrap,导入前先导入原生jQuery以及bootstrap 基 ...
jsp + js + 前端弹出框
在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框代码: var a = "Hello ...
前端把信息放在弹框里显示出来_jsp + js + 前端弹出框
在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框代码: var a = "Hello ...
前端基础之《Bootstrap（13）—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》
一.data-开头的是什么是bootstrap封装的js. data-toggle data-target data-dismiss data-spy 参考资料:https://blog.csdn. ...
html表单弹窗提示框,【前端】弹出框提交表单
[前端]弹出框提交表单发布时间:2018-11-03 22:30, 浏览次数:826 目录 * 功能描述 * 效果截图 * 代码 * html代码 * 触发弹出窗口的按钮 * js代码 * 弹出框的 ...
学习使用Bootstrap弹出框Popover提示框样式
学习使用Bootstrap弹出框Popover提示框样式注意事项弹出方向失去焦点隐藏禁用元素弹出提示框 data属性详解 js方法与事件方法: 事件: 注意事项 popover提示框组件依赖 ...
4.6Bootstrap学习js插件篇之弹出框
案例为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息. 插件依赖弹出框依赖工具提示插件,因此需要先加载工具提示插件. 选择性加入的功能出于性能方面的考虑,工具提示 ...

前端学习之路Electron——弹出框

html部分

JS部分：

全部

当type 为 none时

当type 为 info时

当type 为 question时

全部的api

前端学习之路Electron——弹出框相关推荐

最新文章

热门文章