<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<link rel="stylesheet" href="../css/userapp.css">
<script src="../js/mui.js"></script>
<style>
html,
body {
background-color: white;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding-top: 0;
}
.title {
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
}
.mui-bar-tab {
top: 0px;
width: 25.04%;
}
.categorycontent {
width: 75%;
float: right;
}
.mui-bar-tab .mui-tab-item {
display: inline-table;
padding: 10px;
width: 100%;
color: #000000;
height: 40px;
border-bottom: 1px solid #D7D7D7;
}
.mui-table-view-chevron .mui-table-view-cell {
padding: 10px;
}
.leftlist {
margin: 0;
padding-left: 0;
}
.mui-bar-tab .mui-tab-item.mui-active {
color: orange;
background-color: white;
}
.mui-bar .mui-bar-tab {
height: 100%;
}
.mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
height: 100%;
background-color: #efeff4;
font-size: 12px;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
font-size: 12px;
padding: 11px 7px;
border-width: 0px;
}
.mui-grid-view.mui-grid-9 {
background: white;
}
.mui-table-view:after {
background: white;
}
</style>
</head>
<body class="mui-plus mui-android mui-android-4 mui-android-4-4 mui-android-4-4-4">
<div class="mui-content categorycontent">
<nav id="categoryleft" class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#category1">测试左</a>
</nav>
<div id="categoryright">
<div id="category1" class="mui-control-content mui-active">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-col-xs-4" categoryid="114" categoryname="测试右">测试右</li>
</ul>
</div>
</div>
</div>
<script>
mui.init({
swipeBack: false
});
//列表点击事件
mui('#categoryright').on('tap', 'li', function() {});
/****************** JS 实现 JSON查询 **********************/
// 定义常用的函数
var index = function(s, find) {
return s.indexOf(find) + 1;
}
// 扩展原型方法
var _proto = Object.prototype;
// 缓存,解决快速查找
var _cache = {};
// 扩展运算符
var _alias = [
/@/g, "_e.",
/AND/gi, "&&",
/OR/gi, "||",
/<>/g, "!=",
/NOT/gi, "!",
/([^=<>])=([^=]|$)/g, '$1==$2'
];
var _rQuote = /""/g;
var _rQuoteTemp = /!~/g;
// 编译
var _complite = function(code) {
return eval("0," + code);
}
// 将扩展符号转换成标准的JS符号
var _interpret = function(exp) {
exp = exp.replace(_rQuote, "!~");
var arr = exp.split('"');
var i, n = arr.length;
var k = _alias.length;
for (var i = 0; i < n; i += 2) {
var s = arr[i];
for (var j = 0; j < k; j += 2) {
if (index(s, _alias[j]) > -1) {
s = s.replace(_alias[j], _alias[j + 1]);
}
}
arr[i] = s;
}
for (var i = 1; i < n; i += 2) {
arr[i] = arr[i].replace(_rQuoteTemp, '\\"');
}
return arr.join('"');
}
// 定义模函数
var _templ = function(_list) {
var _ret = [];
var _i = -1;
for (var _k in _list) {
var _e = _list[_k];
if (_e != _proto[_k]) {
if ($C) {
_ret[++_i] = _e;
}
}
}
return _ret;
}.toString();
// 扩展查询的方法
_proto.Query = function(exp) {
if (!exp) {
return [];
}
var fn = _cache[exp];
try {
if (!fn) {
var code = _interpret(exp);
code = _templ.replace("$C", code);
fn = _cache[exp] = _complite(code);
}
return fn(this);
} catch (e) {
return [];
}
}
</script>
</body>
</html>
js 查询 json 调用Query方法 点击“测试右”则列表点击事件报错
2 个回复
DCloud_UNI_FXY
贴一下你的完整代码。
貅寅 (作者)
js 查询 json 调用Query方法 点击“测试右”则列表点击事件报错
DCloud_UNI_FXY
下个版本修复此bug。但建议不要直接给Object扩展原型方法。像你需求，你可以做成一个工具类，这样可以减少与其他类库的冲突。
2015-05-26 14:56
貅寅 (作者)
回复 DCloud_UNI_FXY:好的
2015-05-26 15:36