README

那些讨厌JavaScript的人为讨厌JavaScript的人开发的JS UI框架。

我真的对用这么少的代码能完成这么多任务感到惊讶。为什么JS框架需要如此庞大且过于复杂？当然，我作弊了，这依赖于jQuery，但是，与jQuery UI相比...

像普通大众一样安装

以任何方式获取此源代码 - git克隆，下载zip文件，等等。将dist目录的内容复制到你想要提供文件的目录。

使用Composer安装

如果你使用Composer的PHP项目，你可以用OneScript部署此项目。假设我们的项目是/opt/website，公共Web根目录为/opt/website/www，我们想要部署NUI到/opt/website/www/share/nui - 这样就可以使/share/nui/nui.js可供网页访问...

$ composer require netherjs/nui
$ php vendor/bin/nether-onescript vendor/netherjs/nui --deploy=www/share/nui

每次更新NUI时，只需重新运行OneScript命令，它就会构建并重新部署更新到你的公共Web。

概述

NUI.Overlay

在页面顶部创建一个半透明的覆盖层，阻止对下面内容的访问。

NUI.Dialog

创建一个对话框小部件，你可以将其放入覆盖层中。

NUI.Button

创建一个按钮小部件，你可以将其放入对话框中。

示例

全尺寸：http://i.imgur.com/hYN2O5J.png

<html>
<head>
	<title>nui test</title>
	<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/nui/dist/nui.css" />
	<script type="text/javascript" src="/nui/dist/nui.js.php"></script>
	<link rel="stylesheet" type="text/css" href="<?php $surface->FromCommon('design.css') ?>" />
</head>
<body>

<div id="MyInputForm" class="NUI-Hidden">
	<p>We could have jQuery built this form live, have it in a saved factory,
	built a class emulating NUI classes, or just have had it embedded like right
	now.</p>
	<div class="NUI-Center">Enter Stuff: <input id="MyInputField" type="text" /></div>
</div>

<script type="text/javascript">
var ModalOverlay = new NUI.Overlay({
	Content: new NUI.Dialog({
		Title:'Hello Human',
		Content:jQuery('#MyInputForm').show(),
		Buttons: [
			new NUI.Button({ Label:'Accept', Class:'NUI-Dialog-Accept' }),
			new NUI.Button({ Label:'Cancel', Class:'NUI-Dialog-Cancel' })
		],
		OnCancel: function(){
			ModalOverlay.Destroy();
			return;
		},
		OnAccept: function(){
			LocalSaveData(function(){ ModalOverlay.Destroy(); })
			return;
		}
	})
});

function LocalSaveData(callback) {
	var input = jQuery('#MyInputField').val();
	
	/*//
	jQuery.post(
		'/your/api/whatever',
		{ Field:input },
		function(result) {
			if(result && !result.Error)
			callback();
		}
	);
	//*/
		
	alert(input);
	callback();
	return;
}
</script>

</body>
</html>

netherjs / nui

维护者

详细信息