All Downloads are FREE. Search and download functionalities are using the official Maven repository.

META-INF.resources.asset.ajaxjs-ui.doc.include.navmenu.jsp Maven / Gradle / Ivy

Go to download

AJAXJS Web aims to full-stack, not only the server-side framework, but also integrates the front-end library. It'€™s written in HTML5 + Java, a successor to the JVM platform, efficient, secure, stable, cross-platform and many other advantages, but it abandoned the traditional enterprise architecture brought about by the large and bloated, emphasizing the lightweight, and fast, very suitable for the Internet fast application.

There is a newer version: 1.3.0
Show newest version
<%@page pageEncoding="UTF-8"%>

一般的下拉菜单


下拉菜单控件, 纯 CSS 打造，无须 JavaScript。例子如下：



演示：




 

另有简单一点的 display:none/block 版，没有 CSS3 动画。


	

 


按照样式要求慢慢修正按钮与显示内容之间的界面融合；需要手动设置内容高度、宽度；内容层叠要调整 z-index 优先级；相关原理文章《利用 hover 伪类创建纯 CSS 收缩面板 》。




如何解决点击之后马上隐藏面板？由于 js（单击事件） 没有控制 CSS 的 :hover 伪类的方法，故所以必须使用以下技巧：




var menuPanel = el.parentNode;
menuPanel.style.display = 'none';
setTimeout(function(){
  menuPanel.style.display = '';
}, 500);



展开闭合器


常用于展开正文详情。提供过渡效果的图层，如果不需要把 div class="mask" 去掉即可。注意加入容器的 padding 会导致关闭时高度异常。



属性说明：



	
		

			属性
			含义
			类型
			是否必填，默认值
		

	
	
		

			openHeight
			展开状态的高度
			Number
			n, 200
		

		

			closeHeight
			闭合状态的高度
			Number
			n, 50
		

		

			<slot>
			正文内容扩展
			String
			n
		

	




例子：


<aj-expander :close-height="50">……</aj-expander>




演示：



	
1、什么是WebpackWebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
2、为什要使用WebPack今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
a:模块化，让我们可以把复杂的程序细化为小的文件;
b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
c:scss，less等CSS预处理器


	







 

折叠菜单 Accordion


折叠菜单的特点是同一时间只展开一个区域，其他区域则处于闭合状态。



属性说明：



	
		

			属性
			含义
			类型
			是否必填，默认值
		

	
	
		

			<slot>
			菜单内容
			String
			y
		

	




例子：


<aj-accordion-menu>……</aj-accordion-menu>




演示：




© 2015 - 2024 Weber Informatics LLC | Privacy Policy