`
zhaixp1949
  • 浏览: 7592 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

template模板，Jquery插件[demo]

 
阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery plugin template</title>
<style type="text/css">
*{font-size:14px;}
table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;width:100%}
th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}

table table{border-left:0px solid #888;border-top:0px;}
table table tr:last-child > td{border-bottom:0px}
table table tr > td:last-child{border-right:0px}
table table tr > th:last-child{border-right:0px}
table tr td.pad0{padding: 0px;}

.box{background-color: #788990;}
.box td{background-color: #788990;}
.box th{background-color: #788990;}
</style>
<script src="../jquery-1.11.3.js"></script>
<script src="jquery.tpl.1.0.js"></script>
<script type="text/javascript">
var d1 = {name : "Shawn", job : "Engineer"};
var d2 = {data : {name : "Cook", job : "CEO"}};
var d3 = [
{name : "Jackson", job : "Engineer", gender : "M"}
,{name : "Sharui", job : "Engineer", gender : "F"}
,{name : "Tim Cook", job : "CEO"}
,{name : "Jack Ma", gender : "M"}
];
var d4 = {
name : "Jackson"
,bill : [
{month : "January", spend : 500, desc : "none"}
,{month : "February", spend : 1500, desc : "traffic, oil"}
]
};
var d5 = {
name : "Jackson"
,bill : [
{month : "January",
detail : [
{item : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{item : "交通费", fee : 1000, desc : "邮费支出"}
,{item : "通信费", fee : 200, desc : "电话费"}
]
}
,{month : "February",
detail : [
{item : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{item : "交通费", fee : 1000, desc : "邮费支出"}
,{item : "汽车保养费", fee : 800, desc : "被黑了"}
,{item : "通信费", fee : 200, desc : "电话费"}
]
}
]
};
var d6 = {
name : "XX南京分公司"
,bill : [
{name : "业务部门",
detail : [
{name : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{name : "交通费", fee : 1000, desc : "邮费支出"}
,{name : "通信费", fee : 200, desc : "电话费"}
]
}
,{name : "行政部门",
detail : [
{name : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{name : "交通费", fee : 1000, desc : "邮费支出"}
,{name : "汽车保养费", fee : 800, desc : "被黑了"}
,{name : "通信费", fee : 200, desc : "电话费"}
]
}
]
};

var d7 = [
{
id : "a001"
,name : "曹操"
,gender : "M"
,birthday : new Date(155, 10, 1) //"155-11-01"
,fav : ["登山", "美女", "打架"]
,country : "魏"
,imgPath : "c:/a001.jpg"
,desc : "字孟德，一名吉利，小字阿瞒，沛国谯县（今安徽亳州）人"
}
,{
id : "a002"
,name : "刘备"
,gender : "M"
,birthday : new Date(161, 9, 1) //"161-10-01"
,fav : ["篮球", "登山", "阅读"]
,country : "蜀"
,imgPath : "c:/a002.jpg"
,desc : "字玄德，东汉末年幽州涿郡涿县人"
}
,{
id : "a003"
,name : "武则天"
,gender : "F"
,birthday : new Date(624, 1, 17) //"624-02-17"
,fav : ["阅读","暗访"]
,country : "唐"
,imgPath : "c:/a003.jpg"
,desc : "名武曌，并州文水（今山西文水县东）人"
}
,{
id : "a004"
,name : "Shawn Zhai"
,gender : "M"
,birthday : new Date(1982, 9, 1)
,imgPath : "c:/a004.jpg"
,desc : "江苏 南京"
}
];
$(document).ready(function(){
var tpls = [];

var cfg = {debug:true, dateFormat:"公元yyyy年MM月dd日"};

var tpl1 = $(".tpl1").tpl(d1, cfg); tpls[tpls.length] = tpl1;

var tpl2 = $(".tpl2").tpl(d2, cfg); tpls[tpls.length] = tpl2;

var tpl3 = $(".tpl3").tpl(d3, cfg); tpls[tpls.length] = tpl3;

var tpl4 = $(".tpl4").tpl(d4, cfg); tpls[tpls.length] = tpl4;

var tpl5 = $(".tpl5").tpl(d5, cfg); tpls[tpls.length] = tpl5;

var tpl6 = $(".tpl6").tpl(d6, cfg); tpls[tpls.length] = tpl6;

var tpl7 = $(".tpl7").tpl(d7, cfg); tpls[tpls.length] = tpl7;

$.each(tpls, function(i,n){
tpls[i].find("[jbind]").mouseover(function(e){
var jd = $(this);
var jbind = jd.attr("jbind");
var d = jd.data();
var ks = [];
for(var k in d){
ks[ks.length] = k;
}

if(ks.length === 0){
ks = "预计加载:[" + jbind + "], 实际未加载任何数据";
}else{
//ks = "预计加载:[" + jbind + "], 实际加载:[" + ks.join(",") + "]";
ks = "预计加载:[" + jbind + "], 实际加载:" + json2str(d, "_prt");
}
jd.attr("title", ks);
jd.addClass("box");

if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;

});
tpls[i].find("[jbind]").mouseout(function(e){
var jd = $(this);
jd.removeClass("box");

if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
});
});


});

function fnRenderGender(tpl, data, config){
if(data.v === "M"){
data.v = "男";
}else if(data.v === "F"){
data.v = "女";
}else{
data.v = "保密";
}
return data;
}

function fnRenderIndex(tpl, data, config){
$(this).append(data.v + 1);
return false;

}
function fnRenderIndexInput(tpl, data, config){
$(this).val(data.v + 1);
return false;

}
function fnView(jdom){
$(".tpl7View").tpl(jdom.data());
}

function json2str(o, exp) {
var arr = [];
var fmt = function(s) {
if (typeof s == 'object' && s != null) return json2str(s, exp);
return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
}
if(o.constructor == Array){
for (var i in o){
if(i === exp) continue;
arr.push(fmt(o[i]));
}
return '[' + arr.join(',') + ']';
}else{
for (var i in o){
if(i === exp) continue;
arr.push("'" + i + "':" + fmt(o[i]));
}
return '{' + arr.join(',') + '}';
}
}

var a=$("div:first").attr("aaaaaa");
</script>
</head>
<body>
<hr/>
测试数据1
<div>
<table>
<thead>
<tr><th>姓名</th><th>工作</th></tr>
</thead>
<tbody>
<tr class="tpl1">
<td jdata="name"></td><td jdata="job"></td>
</tr>
</tbody>
</table>
</div>

<hr/>
测试数据2
<div class="tpl2">
<table jdata="data" jbind="data">
<thead>
<tr><th>姓名</th><th>工作</th></tr>
</thead>
<tbody>
<tr>
<td jdata="name"></td><td jdata="job"></td>
</tr>
</tbody>
</table>
</div>

<hr/>
测试数据3
<div>
<table>
<thead>
<tr><th>序号</th><th>姓名</th><th>工作</th><th>性别</th></tr>
</thead>
<tbody>
<tr class="tpl3">
<td jdata="index" jbind="name,job,gender" jrender="fnRenderIndex"></td>
<td jdata="name" jbind="name,job,gender"></td>
<td jdata="job" jbind="name,job,gender"></td>
<td jdata="gender" jbind="name,job,gender" jrender="fnRenderGender"></td>
</tr>
</tbody>
</table>
</div>

<hr/>
测试数据4
<div>
<table>
<thead>
<tr><th>姓名</th><th>账单</th></tr>
</thead>
<tbody>
<tr class="tpl4">
<td jdata="name"></td>
<td class="pad0">

<table>
<thead>
<tr><th>序号</th><th>月份</th><th>支出费用</th><th>描述</th></tr>
</thead>
<tbody>
<tr jdata="bill" jbind="bill">
<td jdata="index"></td>
<td jdata="month"></td>
<td jdata="spend"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>
</div>

<hr/>
测试数据5
<div>
<table>
<thead>
<tr><th>姓名</th><th>账单</th></tr>
</thead>
<tbody>
<tr class="tpl5">
<td jdata="name"></td>
<td class="pad0">

<table>
<thead>
<tr><th>序号</th><th>月份</th><th>详情</th></tr>
</thead>
<tbody>
<tr jdata="bill" jbind="bill">
<td jdata="index"></td>
<td jdata="month"></td>
<td class="pad0">

<table>
<thead>
<tr><th>序号</th><th>条目</th><th>支出费用</th><th>详情</th></tr>
</thead>
<colgroup>
<col width="10%" />
<col width="20%" />
<col width="20%" />
<col width="50%" />
</colgroup>
<tbody>
<tr jdata="detail" jbind="detail">
<td jdata="index" jrenderFn="fnRenderIndex"></td>
<td jdata="item"></td>
<td jdata="fee"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>
</div>

<hr/>
测试数据6
<div>
<table>
<thead>
<tr><th>分公司名称</th><th>账单</th></tr>
</thead>
<tbody>
<tr class="tpl6">
<td jdata="name"></td>
<td class="pad0">

<table>
<thead>
<tr><th>序号</th><th>部门名称</th><th>详情</th></tr>
</thead>
<tbody>
<tr jdata="bill">
<td jdata="index" jrender="fnRenderIndex"></td>
<td jdata="name"></td>
<td class="pad0">

<table>
<thead>
<tr><th jbind="bill">序号</th><th>条目名称</th><th>支出费用</th><th>详情</th></tr>
</thead>
<colgroup>
<col width="10%" />
<col width="20%" />
<col width="20%" />
<col width="50%" />
</colgroup>
<tbody>
<tr jdata="detail" jbind="detail">
<td jdata="index" jrender="fnRenderIndex"></td>
<td jdata="name"></td>
<td jdata="fee"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>
</div>


<hr/>
测试数据7
<div>
<table>
<thead>
<tr><th>序号</th><th>姓名</th><th>性别</th><th>生日</th><th>爱好</th><th>简介</th></tr>
</thead>
<tbody>
<tr class="tpl7" jbind="index,name,gender,birthday,fav,country,desc" onclick="fnView($(this))">
<td jdata="index" jrender="fnRenderIndex"></td>
<td jdata="name"></td>
<td jdata="gender" jrender="fnRenderGender"></td>
<td jdata="birthday"></td>
<td jdata="fav"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>
<div>
<form>
<table>
<tbody class="tpl7View">
<tr>
<td>序号</td>
<td><input jdata="index" jrender="fnRenderIndexInput" value=""/></td>
</tr>
<tr>
<td>姓名</td>
<td><input jdata="name" value=""/></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" jdata="gender" value="M"/>男
<input type="radio" jdata="gender" value="F"/>女
</td>
</tr>
<tr>
<td>生日</td>
<td><input jdata="birthday" value=""/></td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" jdata="fav" value="登山"/>登山
<input type="checkbox" jdata="fav" value="篮球"/>篮球
<input type="checkbox" jdata="fav" value="阅读"/>阅读
<input type="checkbox" jdata="fav" value="美女"/>美女
<input type="checkbox" jdata="fav" value="打架"/>打架
<input type="checkbox" jdata="fav" value="暗访"/>暗访
</td>
</tr>
<tr>
<td>朝代</td>
<td>
<select jdata="country">
<option value="">请选择</option>
<option value="魏">魏国</option>
<option value="蜀">蜀国</option>
<option value="唐">唐朝</option>
</select>
</td>
</tr>
<tr>
<td>简介</td>
<td>
<textarea jdata="desc"></textarea>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<br/><br/><br/><br/><br/>
</body>
</html>
分享到：
| template模板，Jquery插件[js]
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery前台模板demo（很实用的）

    "jQuery前台模板demo"就是这样一个实用的工具，它结合了jQuery的强大功能和易用性，为前端设计提供了一套便捷的解决方案。 **一、jQuery简介** jQuery是一款高效、简洁的JavaScript库，它简化了HTML文档遍历、事件...

    基于jQuery开发的javascript模板引擎-jTemplates

    jTemplates作为一款jQuery插件，提供了一种高效、简洁的方式来处理动态数据和HTML模板的结合，简化了前端开发工作。通过理解其核心原理和实践示例，开发者可以更好地利用jTemplates提升Web应用的交互性和性能。

    jquery-confirm Demo|Karle

    `jQuery-confirm`是一个强大的jQuery插件，它提供了丰富的对话框和确认框功能，能够轻松地整合到使用`font-awesome`和`bootstrap`的项目中，为用户界面添加更加美观和交互性的提示信息。该插件由Karle开发，其Demo...

    jquery.jtemplates 实例

    jQuery.jTemplates是基于Mustache模板语言理念的一个jQuery插件，它的主要功能是将JSON数据与HTML模板结合，生成动态内容。通过预定义的模板和JavaScript对象，开发者可以轻松地创建动态、响应式的网页界面，避免了...

    jquery UI组件集合

    7. 模板（Template）：jQuery UI 的模板功能允许开发者创建和管理重复的数据结构，通过简单的标记语言来渲染动态数据。 8. 效果（Effects）：jQuery UI 提供了一系列内置的动画效果，如淡入淡出、滑动、切换等，...

    requireJsDemo入门Demo

    7. **jQuery模板（jQuery Template）**：`jquery.tmpl.min.js`是jQuery的一个模板插件，它允许使用简单的模板语法将数据渲染到HTML中，方便数据驱动的前端开发。 8. **CSS加载（CSS Loader）**：在某些情况下，可能...

    WgBoard - Responsive Admin/Dashboard Template 后台管理模板

    15+页面 10+插件 jQuery 2.2.0 jQuery UI Bootstrap 3.3.7 Roboto Google Font Font Awesome Icons Elegant Icons Themify icons Chart.js jQuery Vector Maps jQuery custom content scroller jQuery Circle ...

    requirejs_Demo演示

    template.html`可以用来加载HTML模板。 6. **异步加载**：requireJS的一大优势在于其异步加载特性，允许脚本按需加载，而不是一次性加载所有脚本，这显著提高了页面的加载速度。 7. **Shim配置**：对于不支持AMD的...

    vue项目中使用ztree树形插件.pdf

    在Vue组件的模板中创建一个容器元素，并为其设置固定的高度，以便ZTree插件正确显示。 ```html &lt;template&gt; &lt;ul id="treeDemo" class="ztree"&gt; &lt;/template&gt; ``` 2. **配置数据及设置：** 在Vue组件的数据...

    前端UI模板metronic_v6.0.4.zip

    Metronic在此基础上进一步拓展，集成了大量的前端JavaScript和CSS插件，如jQuery插件、图表库、表单验证、滑块、轮播图等，使得开发者在创建交互性丰富的界面时无需从零开始。 Metronic v6.0.4是这一系列的一个重要...

    Admin Dashboard Template

    同时，模版中的JavaScript插件和jQuery扩展也提供了丰富的交互功能，如日期选择器、下拉菜单、滑块等，增强了后台管理界面的动态效果。 标签中提到了"后台管理模版"、"bootstrap"和"Admin Dashbo"，这表明这个模版...

    时间插件pickerDateRange

    3. HTML模板文件（如`template.html`）：插件的UI结构可能会以HTML模板的形式存在，方便插入到页面中。 4. 图标资源（如`.png`或`.svg`文件）：可能包含用于表示日期和时间的图标。 5. 示例或者测试文件（如`demo....

    webpack3多页面demo

    **Webpack 3 多页面应用开发详解** 在前端开发领域，Webpack 作为一款强大的模块打包工具...随着对Webpack的深入理解和实践，你可以根据项目需求进一步优化配置，例如添加代码分割、按需加载、预编译模板等高级特性。

    Angularjs自定义指令实现分页插件(DEMO)

    - `template`或`templateUrl`：定义分页组件的HTML模板，通常包括“上一页”、“下一页”按钮以及页码列表。 - `scope`：定义指令的隔离作用域，接收`pageConfig`作为参数，这样可以方便地与父控制器进行数据交互...

    kplphp.zip

    码云模板地址：https://gitee.com/JefferyCai/kplphp_template [暂不开放，请加QQ群获取] mysql数据库文件请加以下QQ群获取。 后台框架测试地址 http://139.9.38.224:6602 [主后台框架] admin admin ...

    基于html5 css3 jq es6 ，汇新优科官网.zip

    这个版本引入了许多新的语法特性，如类（classes）、箭头函数（arrow functions）、模板字符串（template literals）、解构赋值（destructuring assignment）、let和const变量声明、Promise对象（用于异步编程）以及...

    SSM-Template:SpringMVC，Mybatis，Spirng

    这个SSM-Template项目提供了一个后台管理系统的Demo，整合了前端资源，为开发者快速搭建应用提供了便利。 首先，SpringMVC是Spring框架的一部分，主要负责处理HTTP请求并返回响应。它采用了模型-视图-控制器（MVC）...

    bootstrap-table formatter 使用vue组件的方法

    `BtAddVueCom` 接受一个对象参数，这个对象包含了 Vue 实例的配置，如模板（template）、数据（data）等，并返回一个唯一 ID 用于在 DOM 中定位生成的 Vue 组件。 `BtEventHub` 是一个 RxJS Subject，用于协调 Vue ...

    backbone-sortable:一种可排序的小部件，该小部件使用HTML5拖放API进行收藏

    template: _.template('&lt;li&gt;&lt;%= name %&gt;&lt;/li&gt;') }), collection: new MyCollection([{name: 'Item 1'}, {name: 'Item 2'}, {name: 'Item 3'}]) }); var myView = new MyView(); myView.render(); // 渲染并添加...

Magicbox
Global site tag (gtag.js) - Google Analytics