console
function alert(msg){
var c = document.getElementById('alert');
function handleClick(e) {
e.preventDefault();
$('[role="alert"]').hide();
}
ReactDOM.unmountComponentAtNode(c);
ReactDOM.render(
<div className="alert alert-warning alert-dismissible" role="alert">
<button type="button" className="close" onClick={handleClick} aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>提示</strong> {msg}
</div> ,c
);
}
class Jiejing extends React.Component {
render() {
return (
<div className="jiejing col-xs-6 col-sm-6 col-md-6">
<div className="thumbnail">
<div className="caption">
<h3>{this.props.name}</h3>
<p><a href={ "shortcuts://open-shortcut?name=" + this.props.name} className="btn btn-primary" role="button" >打开</a>
<a href={ "shortcuts://x-callback-url/run-shortcut?name="+ this.props.name + "&input=INPUT&text=TEXT" } className="btn btn-default" role="button">运行</a></p>
</div>
</div>
</div>
);
}
}
class JiejingList extends React.Component {
render() {
const children = this.props.data.map((a) =>
<Jiejing name={a.name} />
);
return <div className="row">{children}</div>;
}
}
const element_nav =<nav className="navbar navbar-default navbar-fixed-bottom">
<div className="container">
<div className="form-group">
<input type="text" className="form-control" placeholder="查找"/>
<a href="shortcuts://create-shortcut" className="btn btn-default" role="button">新建捷径</a>
</div>
</div>
</nav>
ReactDOM.render(
element_nav,
document.getElementById('nav')
);
const element = <JiejingList data={data.jiejingList} />
ReactDOM.render(
element,
document.getElementById('root')
);
$(function(){
$('input').bind('keyup', function(event) {
if (event.keyCode == "13") {
preview_content()
}
});
function preview_content(){
$(".jiejing").hide()
$(".jiejing:contains("+$("input").val()+")").show()
$("input").blur()
}
});
<script type="text/babel">
var data ={"jiejingList":[{"name":"微信siri","xgsj":"2019年6月1日 18:12"},{"name":"听文章","xgsj":"2019年6月1日 18:12"},{"name":"听文章 1","xgsj":"2019年6月1日 18:12"},{"name":"照片改名","xgsj":"2019年6月1日 18:12"},{"name":"执行器","xgsj":"2019年6月1日 18:12"},{"name":"执行器执行部分","xgsj":"2019年6月1日 18:12"},{"name":"未命名快捷指令 1","xgsj":"2019年6月1日 18:12"},{"name":"执行器-变量替换","xgsj":"2019年6月1日 18:12"},{"name":"执行器-变量替换 1905","xgsj":"2019年6月1日 18:12"},{"name":"我的捷径","xgsj":"2019年6月1日 18:12"},{"name":"查询App价格","xgsj":"2019年6月1日 18:12"},{"name":"1Pasaword","xgsj":"2019年6月1日 18:12"},{"name":"查询App价格 1","xgsj":"2019年6月1日 18:12"},{"name":"微信公众号获取","xgsj":"2019年6月1日 18:12"},{"name":"扫一扫付款码","xgsj":"2019年6月1日 18:12"},{"name":"记一笔","xgsj":"2019年6月1日 18:12"},{"name":"我的app","xgsj":"2019年6月1日 18:12"},{"name":"备份我的工作流","xgsj":"2019年6月1日 18:12"},{"name":"扫一扫","xgsj":"2019年6月1日 18:12"},{"name":"网购历史价格查询","xgsj":"2019年6月1日 18:12"},{"name":"网购历史价格查询 1","xgsj":"2019年6月1日 18:12"},{"name":"制作二维码","xgsj":"2019年6月1日 18:12"},{"name":"长截屏","xgsj":"2019年6月1日 18:12"},{"name":"阿里小号（极速版）","xgsj":"2019年6月1日 18:12"},{"name":"微信公众号音视频解析","xgsj":"2019年6月1日 18:12"},{"name":"公交车上","xgsj":"2019年6月1日 18:12"},{"name":"安静","xgsj":"2019年6月1日 18:12"},{"name":"忘记qq邮箱密码","xgsj":"2019年6月1日 18:12"},{"name":"微信快捷信息","xgsj":"2019年6月1日 18:12"},{"name":"runoob","xgsj":"2019年6月1日 18:12"},{"name":"wordpress 1","xgsj":"2019年6月1日 18:12"},{"name":"发送文件到播放器","xgsj":"2019年6月1日 18:12"},{"name":"保存","xgsj":"2019年6月1日 18:12"},{"name":"获取页面源代码","xgsj":"2019年6月1日 18:12"},{"name":"未命名快捷指令","xgsj":"2019年6月1日 18:12"},{"name":"发邮件","xgsj":"2019年6月1日 18:12"},{"name":"朗读文章正文","xgsj":"2019年6月1日 18:12"},{"name":"MiniWeather","xgsj":"2019年6月1日 18:12"},{"name":"微信","xgsj":"2019年6月1日 18:12"},{"name":"Run JavaScript","xgsj":"2019年6月1日 18:12"},{"name":"Run JavaScript 1","xgsj":"2019年6月1日 18:12"},{"name":"Run JavaScript 2","xgsj":"2019年6月1日 18:12"},{"name":"API 示例","xgsj":"2019年6月1日 18:12"},{"name":"新建脚本","xgsj":"2019年6月1日 18:12"},{"name":"听歌","xgsj":"2019年6月1日 18:12"},{"name":"Video Parser","xgsj":"2019年6月1日 18:12"},{"name":"照片去背景","xgsj":"2019年6月1日 18:12"},{"name":"微信小盒子","xgsj":"2019年6月1日 18:12"},{"name":"天气折线图","xgsj":"2019年6月1日 18:12"},{"name":"社区作者下载数据可视化·分类","xgsj":"2019年6月1日 18:12"},{"name":"微信聊天背景生成","xgsj":"2019年6月1日 18:12"},{"name":"拾色器","xgsj":"2019年6月1日 18:12"},{"name":"疯狂图片弹幕","xgsj":"2019年6月1日 18:12"},{"name":"「用图」","xgsj":"2019年6月1日 18:12"},{"name":"步数可视化","xgsj":"2019年6月1日 18:12"},{"name":"电影","xgsj":"2019年6月1日 18:12"},{"name":"拒绝重复弹框Demo","xgsj":"2019年6月1日 18:12"},{"name":"爱心","xgsj":"2019年6月1日 18:12"},{"name":"网页拼接","xgsj":"2019年6月1日 18:12"},{"name":"查看二维码内容","xgsj":"2019年6月1日 18:12"},{"name":"从视频提取音频","xgsj":"2019年6月1日 18:12"},{"name":"爱心告白","xgsj":"2019年6月1日 18:12"},{"name":"��定时播放音乐","xgsj":"2019年6月1日 18:12"},{"name":"��定时播放音乐 1","xgsj":"2019年6月1日 18:12"},{"name":"一键支付（每天可领1次红包）","xgsj":"2019年6月1日 18:12"},{"name":"搜索骑士3.9.5～搜索你的快乐","xgsj":"2019年6月1日 18:12"},{"name":"1905-运行JavaScript","xgsj":"2019年6月1日 18:12"},{"name":"1905-运行JavaScript 1","xgsj":"2019年6月1日 18:12"},{"name":"弓长个章","xgsj":"2019年6月1日 18:12"},{"name":"Apple 微电影一个桶","xgsj":"2019年6月1日 18:12"},{"name":"今天看啥电影","xgsj":"2019年6月1日 18:12"},{"name":"捷径速览lite","xgsj":"2019年6月1日 18:12"},{"name":"语言控制","xgsj":"2019年6月1日 18:12"},{"name":"QQ--API","xgsj":"2019年6月1日 18:12"},{"name":"每日一词","xgsj":"2019年6月1日 18:12"},{"name":"腾讯地图链接 Opener","xgsj":"2019年6月1日 18:12"},{"name":"早安(good morning)","xgsj":"2019年6月1日 18:12"},{"name":"动漫之家","xgsj":"2019年6月1日 18:12"},{"name":"桌面还能这么玩","xgsj":"2019年6月1日 18:12"},{"name":"未命名快捷指令 2","xgsj":"2019年6月1日 18:12"}]}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js">
</script>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js">
</script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js">
</script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js">
</script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body);
},
false);
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="nav"></div>
<div id="msg"></div>
<div class="container bs-docs-container" id="root" style="height: 100"></div>
<script type="text/babel">
</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js">
</script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js">
</script>
</body>
</html>