ASP.NET-FineUI开发实践-4

最近实在没时间研究东西,FineUI一直也没进一步实践,但是还是很想学点东西,所以找了个课题研究了下,在论坛里看见了又下角的提醒,自己想了想做了一个,我不是大神,接触EXTJS很少,就是用到哪看哪,没有系统的学习,所以这次做的不细只是提供下思路和学习方法,可以让初学者借鉴探讨。以下环境为官方实例FineUI4.0.6。

1.JS文件

首先运行项目进入default.aspx,右键查看源文件看见引用了三个JS文件<script src="/extjs/ext-part1.js" type="text/javascript"></script><script src="/extjs/ext-part2.js" type="text/javascript"></script><script src="/extjs/lang/zh_CN.js" type="text/javascript"></script>

最后一个是语言包,前两个都是FineUI自己基于EXTJS写的js包,打开有看到ext-part1是压缩(没有格式)的,ext-part2没有压缩,可以看成是FineUI写的js方法的增强或者重写。

default.aspx 在最后还引用了default.js文件,打开后都是本页的一些配置文件,写在F.ready()里,页面加载执行。这里要重申下FineUI的NO js 是页面上尽量减少JS的使用,其实都是打包好的。基于EXTJS.NET 不可能没有JS。

2.实现右下角提醒准备

2.1又下角的提醒很常见,我借鉴了FineUI论坛里的这个

可以看见基本元素有标题,翻页,关闭,不可拖动,不可调整大小,在页面顶端等。这让我想到了window组件,window打开时就是层级置顶的,而且有标题、不可拖动、关闭、不可调整大小等属性。页面里的消息我选择了Label控件。

传图片是因为不能一下看懂的可以自己把代码敲上理解一下。 Lable里 Label="1" ShowLabel="false" 没用,我写的玩的。

2.2下面要准备的就是显示,FineUI window.cs文件里提供了获取显示窗体的客户端脚本的方法GetShowReference,还有其他各种重载,到最后用返回的是f_show的js方法。要显示我的window_tips就是要重写f_show方法,在ext-part2.js里一下就搜到了,复制粘贴,取个名字叫f_showTips,

简单的看一下就是重写iframeUrl和标题,然后再执行wnd.show()(wnd就是window的缩写)方法,这个就够用了wnd.show就不重写了,也在这个js里,搜索‘show:’不是很难看懂。同样找到了关闭的方法 f_hide也看到了怎么实现的 ,还是用这个,没必要写新的。

2.3显示和关闭准备好了就是信息的显示还有翻页功能,明显window的标题那一行就有标题关闭最大化什么的,要自定义添加俩按钮还得用脑子,一下子就想起来default.js里预备下了

这个是FineUI4.0新加的,在树菜单的顶上加了个设置的图标点完了显示个菜单。正常的往回缩怎么能有个设置按钮呢,.aspx文件里也没有这个的按钮所以肯定就是js自己做了什么。

看的懂的参数第一个是类型,第二个是提示,第三个不知道,第四个就是按钮点击触发的方法。要实验我的蒙的对不对要先把window_tips的ClientID传过去,详见页面上GetClientIDS方法,在js接一下,

怎么实践的就不说了就是传个带ShowHeader="true"的控件看看有没有加上就行,是成功了,但是跑到关闭那个X的右侧了,因为是新增的,插入到左侧我也不会,干脆连关闭一块新增,但是都是设置图标,应该跟tyoe有关系,gear是设置的意思,其他的type我也没不知道啊。显示的是个图标那肯定跟样式有关,果断F12

嗯,被发现了,他旁边那个就是向左样式是x-tool-img x-tool-collapse-left,collapse是隐藏属性,隐藏-向左,左右关闭就都出来了,

  window_tips.addTool({
    type: ‘left‘,
    tooltip: ‘上一条‘,
    regionTool: true,
    handler: function (event, toolEl, panelHeader) {

});

  window_tips.addTool({
    type: ‘right‘,
    tooltip: ‘下一条‘,
    regionTool: true,
    handler: function (event, toolEl, panelHeader) {

    }
});

  window_tips.addTool({
    type: ‘close‘,
    tooltip: ‘关闭‘,
    regionTool: true,
    handler: function (event, toolEl, panelHeader) {
            window_tips.hide();//关闭方法
        }
    });

  关闭按钮我把关闭方法加上了。

2.4还有就是window的显示位置,提醒肯定是在右下角,在官方的教程里提到位置黄金分割点,在ext-part2.js wnd.show()里找到了定义位置的方法,

if (left !== ‘‘ && top !== ‘‘) {
                panel.setPosition(parseInt(left, 10), parseInt(top, 10));
            } else {
                var bodySize = target.window.Ext.getBody().getViewSize();
                var panelSize = panel.getSize(), leftTop;
                if (isGoldenSection) {
                    leftTop = _calculateGoldenPosition(bodySize, panelSize);
                } else {
                    leftTop = _calculateCenterPosition(bodySize, panelSize);
                    //panel.alignTo(target.Ext.getBody(), "c-c");
                }
                panel.setPosition(leftTop.left, leftTop.top);
            }

  找能看的懂的,不多解释,总之在f_showTips下面加个方法

 f_tipsPosition:function(){

    var left =  Ext.getBody().getViewSize().width - 4 - this.width;

    var top =  Ext.getBody().getViewSize().height - 4 - this.height;

    this.f_property_left=left;

    this.f_property_top=top;
    this.setPosition(left, top);
},

  在default.js里触发,window_tips.f_tipsPosition();就行了。

2.5左右信息的图标有了,还没有方法,可以写成dopostback获取,也可以执行JS,当然是写JS,把数据放个参数里,是个json再用js解析,不提了,直接看代码。

3.完成 f_tipsPosition没粘

ext-part2.js

     //显示提醒窗体;
     //iframeUrl窗体的url,目前未考虑传‘‘;
     //windowTitle窗体的title,目前未考虑传‘‘;
     //txthtml窗体显示的数据
     //width窗体的宽,目前未考虑传‘‘;
     //height窗体的高,目前未考虑传‘‘;
     f_showTips: function (iframeUrl, windowTitle,txthtml, width, height) {

            if (typeof (iframeUrl) === ‘undefined‘) {
            	iframeUrl = this.f_iframe_url;
            }
            if (typeof (windowTitle) === ‘undefined‘) {
            	windowTitle = this.title;
            }

            window.label_html=txthtml;//显示数据存到全局参数里

            window.label_html_num=0;//第一次打开重置查看到第几条
            this.f_showtips_label(label_html);//显示方法,传入数据

            windowTitle="消息提醒"+"   "+(label_html_num+1)+"/"+txthtml.length;//拼写标题

            //原show方法
            F.wnd.show(this, iframeUrl, windowTitle, this.f_property_left, this.f_property_top, this.f_property_position, this.id + ‘_Hidden‘, width, height);

        },
        //显示信息方法
        //txthtml信息
        //t翻页方向
        f_showtips_label:function(txthtml,t){
        	//计算翻到第几页了
        	var nub=label_html_num;
        	if (t==‘left‘) {label_html_num=window.label_html_num-1;}
        	if (t==‘right‘) {label_html_num=window.label_html_num+1;}
        	if (typeof (txthtml[label_html_num]) == ‘undefined‘) {
        		label_html_num=nub;
        	}
        	//设置标题
        	this.setTitle("消息提醒"+"   "+(label_html_num+1)+"/"+txthtml.length);
        	//显示信息,JQ方法,ID写死了,JSON格式所以写成 txthtml[0]
        	$(‘#window_tips_window_tips_label-inputEl‘).text(txthtml[label_html_num]);
        }

  default.js

 //新增翻页按钮
    window_tips.addTool({
        type: ‘left‘,
        tooltip: ‘上一条‘,
        regionTool: true,
        handler: function (event, toolEl, panelHeader) {
            window_tips.f_showtips_label(label_html, ‘left‘);//触发翻页方法
        }
    });

    //新增翻页按钮
    window_tips.addTool({
        type: ‘right‘,
        tooltip: ‘下一条‘,
        regionTool: true,
        handler: function (event, toolEl, panelHeader) {
            window_tips.f_showtips_label(label_html, ‘right‘);//触发翻页方法
        }
    });

    //新增关闭按钮
    window_tips.addTool({
        type: ‘close‘,
        tooltip: ‘关闭‘,
        regionTool: true,
        handler: function (event, toolEl, panelHeader) {
            window_tips.f_hide();
        }
    });

    //定位坐标
    window_tips.f_tipsPosition();

    //网上找的
    Ext.EventManager.onWindowResize(window_tips.f_tipsPosition, window_tips); //window大小改变时,重新设置位置

    Ext.EventManager.on(window, ‘scroll‘, window_tips.f_tipsPosition, window_tips); //滚动时重新设置位置

  传值

protected void MenuButton1_Click(object sender, EventArgs e)
        {
            List<string> liststr = new List<string>();
            liststr.Add("消息一");
            liststr.Add("消息二");

            var resultObj = JsonConvert.SerializeObject(liststr);

            PageContext.RegisterStartupScript(window_tips.GetShowTips(String.Empty, String.Empty, Unit.Empty, Unit.Empty, resultObj));

        }

  Window.cs加了方法

/// <summary>
        /// 返回右下角提醒JS
        /// </summary>
        /// <param name="iframeUrl">地址</param>
        /// <param name="windowTitle">标题</param>
        /// <param name="width">宽</param>
        /// <param name="height">高</param>
        /// <param name="innerHtml">JSON值提醒的HTML</param>
        /// <returns></returns>
        public string GetShowTips(string iframeUrl, string windowTitle, Unit width, Unit height, string innerHtml)
        {
            if (!String.IsNullOrEmpty(iframeUrl))
            {
                iframeUrl = ResolveIFrameUrl(iframeUrl);
            }

            iframeUrl = JsHelper.GetJsStringWithScriptTag(iframeUrl);
            windowTitle = JsHelper.GetJsString(windowTitle);

            if (width != Unit.Empty && height != Unit.Empty)
            {
                return String.Format("{0}.f_showTips({1},{2},{3},{4},{5});", ScriptID,
                    iframeUrl,
                    windowTitle,
                    innerHtml,
                    width.Value,
                    height.Value);
            }
            else
            {
                return String.Format("{0}.f_showTips({1},{2},{3});", ScriptID,
                   iframeUrl,
                   windowTitle,
                   innerHtml
                   );
            }
        }

  

4.扩展

遗憾的是没有时间在完善下,标题,传iframeUrl,标题,定义大小都没写。显示和隐藏的滑动效果没有,这个还得学...,很突兀的显示和关闭了,FineUI并没有提供动画的方法。

5.后记

其实实现的方法有很多,我又不是专业的,自己弄出来有成就感,只是给刚入门的人看的,想说的是FineUI中提供了很多现成的可以学习的代码,肯研究的都能自己做点东西,FineUI是开源的后台的C#方法和js方法都是现成的谁也没说不能改。谁要是有现成的例子给我也共享个,我很愿意学习学习。

时间: 2024-10-23 00:19:03

ASP.NET-FineUI开发实践-4的相关文章

ASP.NET5+EntityFramework7开发实践(三)

1.说明 在<ASP.NET5+EntityFramework7开发实践(一)>介绍过仓储模式,只是没有在控制器中如何使用? 本章重新补充一下.注意,也会使用ASP.NET5中的依赖注入. 2.仓储模式 先看接口: 1 public interface IRoleRepository:IDisposable 2 { 3 //IEnumerable和IQueryable 4 //二者在EF都会延迟加载,不同的是: 5 //IEnumerable是数据加载到内存,刷选在内存中的数据上执行 6 //

FineUI开发实践-目录

FineUI初学手册 下载,实例项目搭建 ASP.NET-FineUI开发实践-1 实际开发环境是FineUI 4.0.4,编辑页面回发,__doPostBack应用 ASP.NET-FineUI开发实践-2 1.Window控件显示2.显示隐藏控件4.直接通过行号修改指定列内容5.获取iframe ASP.NET-FineUI开发实践-3 1.参照模拟数据库分页通过缓存重写内存分页,优化页面响应速度2.得到指定行指定列的值后台3.按钮至少选择一项的通用方法,OnClientClick+=累加.

ASP.NET5+EntityFramework7开发实践(一)

 1.创建项目 创建“空白解决方案”,名为GiveCase. 在解决方案里,添加ASP.NET5 Empty模板项目,名为GiveCase.Web.  2.实体类 实体基类: 1 /// <summary> 2 /// 实体 抽象基类 3 /// </summary> 4 /// <typeparam name="TKey">主键类型</typeparam> 5 public abstract class EntityBase<TK

ASP.NET-FineUI开发实践-9(四)

现在是这么个问题,在开发中表格是动态出来的,就是标准板是全部字段列出,客户要根据情况列出自己想要的,在增加操作页面的同时要是能用前台自带的功能直接保存到后台就好了,现在的列显示和隐藏是不回发的. 1.FineUI引用的extjs是ext-part1.js,这就不说了,以前截过图,这个文件是压缩的,参数也是简化的不好看,其实这个就是ext-all.js,ext-all哪来的呢,就是extjs官方实例里下的,下来之后也是压缩的,旁边还有个不压缩的,ext-all-debug.js ,完全可以看,那我

ASP.NET MVC5 网站开发实践(二) Member区域 - 添加文章

转自:http://www.cnblogs.com/mzwhj/p/3592895.html 上次把架构做好了,这次做添加文章.添加文章涉及附件的上传管理及富文本编辑器的使用,早添加文章时一并实现. 要点: 富文本编辑器采用KindEditor.功能很强大,国人开发,LGPL开源,自己人的好东西没有理由不支持. 附件的上传同样基于KindEditor实现,可以上传图片,flash,影音,文件等. 目录 ASP.NET MVC5 网站开发实践 - 概述 ASP.NET MVC5 网站开发实践(一)

【新书推荐】《微软开源跨平台移动开发实践》带你走近微软开源开源跨平台技术

上周收到本书作者李争送的一本12月份的新书<微软开源跨平台移动开发实践——利用ASP.NET Core 1.0 .Apache Cordova.Xamarin和Azure快速构建移动应用解决方案>.这本书的名字超长.这本书也是超薄,只有220页,一个周末时间就读完了,但是这本书的内容确是超丰富,浓缩了微软这三年向开源和跨平台领域的转变,微软在开源和跨平台领域构建出来的一套技术体系.从服务端的NET Core.ASP.NET 和 Web APi ,到Web端的 Typescript脚本语言,再到

ASP.NET程序开发范例宝典

在整理资料时发现一些非常有用的资料源码尤其是初学者,大部分是平时用到的知识点,可以参考其实现方法,分享给大家学习,但请不要用于商业用途. 如果对你有用请多多推荐给其他人分享. 点击对应章节标题下载本章节下所有源代码. 目录: 第2章 HTML开发与实践 15 2.1 框架的使用 16 实例009 使用FrameSet框架布局聊天室 16 实例010 使用IFrame框架布局企业管理系统 17 2.2 滚屏的实现 18 实例011 滚动显示博客公告 18 实例012 滚屏效果并实现超级链接 20

ASP.NET跨平台最佳实践

前言 八年的坚持敌不过领导的固执,最终还是不得不阔别已经成为我第二语言的C#,转战Java阵营.有过短暂的失落和迷茫,但技术转型真的没有想象中那么难.回头审视,其实单从语言本身来看,C#确实比Java更优秀(并非C#天生丽质,而是它站在了巨人的肩膀上). 本文并非为.NET正名而来,而仅仅是分享作者近几年在ASP.NET跨平台方面的研究与实践经验,算是对八年的.NET之路作一个阶段性的总结. .NET技术自诞生以来,便一直因其跨平台能力差而广受诟病.这里面有微软有意为之,也有别有用心之人在混淆视

asp.net 网站开发流程总结

由于这学期要做asp.net的网站开发,导师让我们在前期做详细的计划说明,时间安排.由于网站开发流程不知道,以及需要学什么指示都是盲懂,所以计划安排需在了解大致流程之后才能做出来,一下是询问同学和在网上查阅,总结出的粗略的网站开发流程以及一些所需要学的知识.可能存在很多漏洞和缺陷,如大家看到了也希望大家指导..... 总结一 asp.net建网站的主要步骤 1. 首先是需求分析了,分析你打算做哪些功能,涉及哪些因素以及他们的关联关系等等. 2. 数据库设计,根据功能定义出可能的数据对象,设计出数

【新书推荐】《微软开源跨平台移动开发实践》--带你走近微软开源开源跨平台技术

上周收到本书作者李争送的一本12月份的新书<微软开源跨平台移动开发实践——利用ASP.NET Core 1.0 .Apache Cordova.Xamarin和Azure快速构建移动应用解决方案>.这本书的名字超长.这本书也是超薄,只有220页,一个周末时间就读完了,但是这本书的内容确是超丰富,浓缩了微软这三年向开源和跨平台领域的转变,微软在开源和跨平台领域构建出来的一套技术体系.从服务端的NET Core.ASP.NET 和 Web APi ,到Web端的 Typescript脚本语言,再到