Watch Star Fork

jeArts / JEUIJavaScript

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
JEUI 是一款国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,国内很多程序员javascript不熟, 大大影响了开发速度. 因此JEUI不需要开发人员去关心javascript怎么写, 只要写标准html就可以了,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发。 http://www.jemui.com/
一键复制 编辑 原始数据 按行查看 历史
tabs.html 6.01 KB jeSinArts 提交于 2017-07-13 16:00 . jeui 1.0.2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>je-table</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="wcodeth=device-wcodeth, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/jeui.css" media="all">
<script type="text/javascript" src="js/modules/jeui.js"></script>
</head>
<body>
<div class="je-p20">
<blockquote class="je-quote je-f16">
默认的Tabs <div class="je-din je-ml30" tab="9" title="自动添加" id="tadadd">添加</div>
</blockquote>
<div id="je-tabs" class="je-tabs je-mt10 je-mb30">
<ul class="je-tabs-title">
<li>网站设置</li>
<li>用户管理<em class="close"></em></li>
<li>权限分配<em class="close"></em></li>
<li>商品管理<em class="close"></em></li>
<li>订单管理<em class="close"></em></li>
</ul>
<div class="je-tabs-content">
<div class="je-tabs-item">
<p>响应式Web设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。</p>
<p>如今客户不仅仅使用iPhone和笔记本,而且使用iMac的27英寸显示器,10英寸的Kindle和很多平板设备。这些设备可能会使用不同的浏览器,并且每种表格因素和浏览器的组合都可能导致不同的页面渲染。并且这些行为可能在每个版本上都不太一样。</p>
</div>
<div class="je-tabs-item">
<p>响应式Web设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。</p>
</div>
<div class="je-tabs-item">3</div>
<div class="je-tabs-item">4</div>
<div class="je-tabs-item">5</div>
</div>
</div>
<blockquote class="je-quote je-f16">
简洁式的Tabs
</blockquote>
<div id="je-tabs2" class="je-tabs brief je-mt10 je-mb30">
<ul class="je-tabs-title">
<li>网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="je-tabs-content">
<div class="je-tabs-item">
<p>响应式Web设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。</p>
<p>如今客户不仅仅使用iPhone和笔记本,而且使用iMac的27英寸显示器,10英寸的Kindle和很多平板设备。这些设备可能会使用不同的浏览器,并且每种表格因素和浏览器的组合都可能导致不同的页面渲染。并且这些行为可能在每个版本上都不太一样。</p>
</div>
<div class="je-tabs-item">
<p>响应式Web设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。</p>
</div>
<div class="je-tabs-item">3</div>
<div class="je-tabs-item">4</div>
<div class="je-tabs-item">5</div>
</div>
</div>
<blockquote class="je-quote je-f16">
卡片式的Tabs
</blockquote>
<div id="je-tabs3" class="je-tabs card je-mt10 je-mb10">
<ul class="je-tabs-title">
<li>网站设置</li>
<li>用户管理<em class="close"></em></li>
<li>权限分配<em class="close"></em></li>
<li>商品管理<em class="close"></em></li>
<li>订单管理<em class="close"></em></li>
</ul>
<div class="je-tabs-content">
<div class="je-tabs-item">
<p>响应式Web设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。</p>
<p>如今客户不仅仅使用iPhone和笔记本,而且使用iMac的27英寸显示器,10英寸的Kindle和很多平板设备。这些设备可能会使用不同的浏览器,并且每种表格因素和浏览器的组合都可能导致不同的页面渲染。并且这些行为可能在每个版本上都不太一样。</p>
</div>
<div class="je-tabs-item">
<p>响应式Web设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。</p>
</div>
<div class="je-tabs-item">3</div>
<div class="je-tabs-item">4</div>
<div class="je-tabs-item">5</div>
</div>
</div>
</div>
<script type="text/javascript">
jeui.use(["jquery","jeTabs"],function () {
var tab = $("#je-tabs").jeTabs();
$("#tadadd").on("click",function(){
var uid = jeui.uuid()
tab.addTabs({
title: '新选项'+ uid //用于演示
,content: '内容'+ uid
})
})
$("#je-tabs2").jeTabs({tabIndex:2});
$("#je-tabs3").jeTabs();
})
</script>
<!--
http://www.qdfuns.com/notes/13967/3cdebc6a132f33a3e65aa2b6019a7487.html
http://www.jq22.com/demo/jQueryNavHover20161129/
-->
</body>
</html>

搜索帮助