jQuery UI Datepicker

日期控件采用JQuery UI的组件之中的datepicker插件,详细使用请查看 jqueryui.com

<link rel="stylesheet" type="text/css" href="Content/Themes/base/jqueryui/1.9/jquery-ui.min.css">
<script type="text/javascript" src="Scripts/jqueryui/1.9/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="Scripts/jqueryui/1.9/jquery.ui.datepicker.min.js"></script>
<script type="text/javascript" src="Scripts/jqueryui/1.9/i18n/jquery.ui.datepicker-zh-CN.min.js"></script>

<script type="text/javascript">
	$(function(){
		$("#txtTestStartDate").datepicker();
	})
</script>

时间控件

时间控件采用JQuery UI的组件之中的datepicker插件的扩展变体timepicker

<link rel="stylesheet" type="text/css" href="Content/Themes/base/jqueryui/1.9/jquery-ui.min.css">
<script type="text/javascript" src="Scripts/jqueryui/1.9/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="Scripts/jqueryui/1.9/jquery.ui.datepicker.min.js"></script>
<script type="text/javascript" src="Scripts/jqueryui/1.9/i18n/jquery.ui.datepicker-zh-CN.min.js"></script>
<script type="text/javascript" src="Scripts/jqueryui/1.9/jquery.ui.timepicker.min.js"></script>
<script type="text/javascript" src="Scripts/jqueryui/1.9/i18n/jquery.ui.timepicker-zh-CN.min.js"></script>

<script type="text/javascript">
	$(function(){
		$("#txtTestStartTime").timepicker();
	})
</script>

日期时间控件

日期时间控件采用JQuery UI的组件之中的datepicker插件的扩展变体timepicker

<link rel="stylesheet" type="text/css" href="Content/Themes/base/jqueryui/1.9/jquery-ui.min.css">
<script type="text/javascript" src="Scripts/jqueryui/1.9/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="Scripts/jqueryui/1.9/jquery.ui.datepicker.min.js"></script>
<script type="text/javascript" src="Scripts/jqueryui/1.9/i18n/jquery.ui.datepicker-zh-CN.min.js"></script>
<script type="text/javascript" src="Scripts/jqueryui/1.9/jquery.ui.timepicker.min.js"></script>
<script type="text/javascript" src="Scripts/jqueryui/1.9/i18n/jquery.ui.timepicker-zh-CN.min.js"></script>

<script type="text/javascript">
	$(function(){
		$("#txtTestStartDateTime").datetimepicker();
	})
</script>

百度编辑器 Ueditor

百度编辑器,美观好用,我们稍做优化。详细的使用请查询 ueditor.baidu.com

我是Ediotr ,下面是我基本模式:

<script type="text/javascript">
    //初始化编辑器的路径,此代码一定要放置在加载editor脚本之前
    window.UEDITOR_HOME_URL = "Scripts/ueditor/1.2.3/";    
</script>

<link href="Scripts/ueditor/1.2.3/themes/default/ueditor.css" rel="stylesheet" type="text/css" />
<script src="Scripts/ueditor/1.2.3/editor_config.js" type="text/javascript"></script>
<script src="Scripts/ueditor/1.2.3/editor_all_min.js" type="text/javascript"></script>

<textarea name="txtTextContent"></textarea>
<script type="text/javascript">
	$(function(){
		//加载富文本编辑器
        var editor = new UE.ui.Editor({ 
		        initialContent: "", 
		        zIndex: 1, 
		        autoFloatEnabled: false, 
		        toolbars: [ BdEditor.Config.toolbars.base] 
		    });
        editor.render($("textarea[name=txtTextContent]")[0]);
        editor.addListener("selectionchange", function () {
            var state = editor.queryCommandState("source");
            var btndiv = $("#btns");
            if (btndiv && state == -1) {
                disableBtn("enable");
            }
        });

	})
</script>

editor 标准模式

标准模式是在editor的基础,封装的一种工具栏的样式,使用BdEditor.Config.toolbars.standard

我是Ediotr ,下面是我标准模式:

//加载富文本编辑器
	var editor = new UE.ui.Editor({ 
	    initialContent: "", 
	    zIndex: 1, 
	    autoFloatEnabled: false, 
	    toolbars: [ BdEditor.Config.toolbars.standard] 
	});			

editor 完整模式

标准模式是在editor的基础,封装的一种工具栏的样式,使用BdEditor.Config.toolbars.full

我是Ediotr ,下面是我完整模式:

//加载富文本编辑器
	var editor = new UE.ui.Editor({ 
	    initialContent: "", 
	    zIndex: 1, 
	    autoFloatEnabled: false, 
	    toolbars: [ BdEditor.Config.toolbars.full] 
	});			

介绍常用的一些树控件

zTree

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。详细的使用请查询 www.ztree.me

    <link rel="stylesheet" type="text/css" href="Content/Themes/base/ztree/3.3/zTreeStyle.css">
    <script type="text/javascript" src="Scripts/ztree/3.3/jquery.ztree.core-3.3.min.js"></script>
    
    <ul id="zvTestZTree" class="ztree"></ul>
    
    <script type="text/javascript">
    	$(function(){
    		var setting = {	};
    
    		var zNodes =[
    			{ name:"父节点1 - 展开", open:true,
    				children: [
    					{ name:"父节点11 - 折叠",
    						children: [
    							{ name:"叶子节点111"},
    							{ name:"叶子节点112"},
    							{ name:"叶子节点113"},
    							{ name:"叶子节点114"}
    						]},
    					...
    					{ name:"父节点13 - 没有子节点", isParent:true}
    				]},
    			...
    		];
    		$.fn.zTree.init($("#zvTestZTree"), setting, zNodes);
    	})
    </script>

    介绍常用的一些窗口控件

    Beyondbit Window

    Beyondbit.Web.Windows.1.0.js 提供常用的弹出窗口操作。

    <script type="text/javascript">
    $(function(){
    	var dialog = Beyondbit.Web.WindowManager.create({
    		id:"dialogTestBeyondbitWindow",
    		title:"上海互联网软件有限公司",
    		url:"http://www.beyondbit.com",
    		width:800,
    		height:700
    	});
    
    	$("#btnTestWindowbBeyondbit").click(function(){
    		dialog.show();
    	})
    })
    </script>

    Beyondbit Window 弹出内容窗口

    弹出一段已经存在在页面上的一段内容。

    标题:

    内容:

    <script type="text/javascript">
    $(function(){
    	var dialog = Beyondbit.Web.WindowManager.create({
    		id:"btnTestWindowbBeyondbitContent",
    		title:"上海互联网软件有限公司",
    		content:$("#boxTestWindowBeyondbitContent").detach(),
    		width:400,
    		height:300
    	});
    
    	$("#btnTestWindowbBeyondbitContent").click(function(){
    		dialog.show();
    	})
    })
    </script>

    介绍一些常用的上传控件。

    Uploadify

    Uploadify 是基于jQuery的扩展的一种上传插件。详细使用请查看 www.uploadify.com/

    <link rel="stylesheet" type="text/css" href="scripts/uploadify/3.2/uploadify.css" />
    <script type="text/javascript" src="scripts/uploadify/3.2/jquery.uploadify.min.js"></script>
    
    <div id="fileQueue"></div>
    <input id="file_upload" name="file_upload" type="file" multiple="true">
    
    <script type="text/javascript">
    	$(function(){
    		$('#file_upload').uploadify({
    			'swf'      : 'scripts/uploadify/3.2/uploadify.swf',
    			'uploader' : 'upload.asp',
    			queueID:"fileQueue",
    		});
    	})	
    </script>

    UploadifyEx

    UploadifyEx 是基于uploadify的一种初级封装,可以应用附件的增、删、初始化。如UploadifyEx不能满足您的应用,请使用Uploadify自定义。

    <div id="fileQueueEx"></div>
    <input id="file_upload_ex" name="file_upload" type="file" multiple="true">
    
    <input type="button" id="btnUpload" class="btnskin_b" value="上传" />
    <input type="button" id="btnUploadCancel"  class="btnskin_b" value="取消上传" />
    <script type="text/javascript">
    	$(function() {
    		$('#file_upload_ex').uploadifyEx({
    			'swf'      : 'scripts/uploadify/3.2/uploadify.swf',
    			'uploader' : 'upload.asp',
    			queueID:"fileQueueEx",
    			detailsUrl:'http://www.beyondbit.com/id=',
    			uploadControl:$("#btnUpload"),
    			uploadCancelControl:$("#btnUploadCancel"),
    			initData:[{
    					name:"file name",
    					size:"1024",
    					id:1
    				},
    				{
    					name:"file name two",
    					size:"128240020",
    					id:2
    				}]
    		});
    	});
    </script>

    alert

    Beyondbit.Web.MessageBox.alert 是用来提示消息!

    <script type="text/javascript" src="Scripts/base/Beyondbit.Web.MessageBox.1.0.js"></script>
    
    <script type="text/javascript">
    	$(function(){
    		$("#btnTestAlert").click(function(){
    			Beyondbit.Web.MessageBox.alert("这是alert");
    		});
    	})
    </script>

    confirm

    Beyondbit.Web.MessageBox.confirm !

    <script type="text/javascript">
    	$(function(){
    		$("#btnTestConfirm").click(function(){
    			Beyondbit.Web.MessageBox.confirm("确定要删除吗?",function(value){
    				Beyondbit.Web.MessageBox.alert("你选择的是:" + value);
    			});
    		});
    	})
    </script>

    prompt

    Beyondbit.Web.MessageBox.prompt !

    <script type="text/javascript">
    	$(function(){
    		$("#btnTestPrompt").click(function(){
    			Beyondbit.Web.MessageBox.prompt("系统","你的名字?",function(value){
    				Beyondbit.Web.MessageBox.alert("你的名字:" + value);
    			});
    		});
    	})
    </script>

    loading

    Beyondbit.Web.MessageBox.loading !

    <script type="text/javascript">
    	$(function(){
    		$("#btnTestLoading").click(function(){
    			Beyondbit.Web.MessageBox.loading();
    		});
    	})
    </script>