当前位置:  编程技术>WEB前端
本页文章导读:
    ▪birdeye 绘制拓扑关系图       birdeye 绘制拓扑关系图 birdeye概述 BirdEye是一个开源的Adobe Flex图表制作组件。用于创建多维数据分析可视化界面。 birdeye 可以绘制 拓扑图，关系图，流程图，星空图，地图，饼图 等等.. birdeye.........
    ▪深入浅出JavaScript （五） 详解Document.write()方法              一直用document.write()方法向浏览器中显示数据用，把它当做Alert()使用， 看来这样用有些大材小用了，下面说说它的主要用处。         .........
    ▪关于Block Formatting Context－－BFC和IE的hasLayout      一、BFC是什么？BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及.........

[1]birdeye 绘制拓扑关系图
    来源: 互联网  发布时间: 2013-11-06
birdeye 绘制拓扑关系图
birdeye概述

BirdEye是一个开源的Adobe Flex图表制作组件。用于创建多维数据分析可视化界面。

birdeye 可以绘制 拓扑图，关系图，流程图，星空图，地图，饼图 等等..

birdeye 项目地址：http://code.google.com/p/birdeye/

birdeye 源码下载：http://code.google.com/p/birdeye/source/checkout  需要用SVN.

birdeye Demo:http://birdeye.googlecode.com/svn/branches/ng/examples/demo/BirdEyeExplorer.html

birdeye  svn源码地址：

svn checkout http://birdeye.googlecode.com/svn/trunk/ birdeye-read-only

checkout 大约几分钟的时间 下载下来的源码如下

每个文件夹里面对应了一类图形. 导入的项目可能会报错,注意查看每个文件夹下的lib目录下的swc文件 引入即可。

ravis 下是拓扑图

导入工程后，运行Level4.mxml

birdeyeravis 传递数据的方式也是通过xml

xml结构如下：

节点

<Node id="1" name="0" desc="This is a description" nodeColor="0x333333" nodeSize="32" nodeClass="earth" nodeIcon="center" x="10" y="10" />

name-就是显示名, desc-是描述,可以不显示. nodeColot -是节点颜色. nodeSize-节点大小.  nodeClass-节点样式, nodeIcon-不清楚属性，

连接的关系xml

<Edge fromID="1" toID="2" edgeLabel="No Change" flow="50" color="0x556b2f" edgeClass="sun" edgeIcon="NoChange" />

fromID toID就不用说了，edgeLabel-线上的显示名  color -线的颜色, edgeClass-线的样式

xml和SpringGraph绘制拓扑图的xml结构有点相似吧…

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:ravis="org.un.cava.birdeye.ravis.graphLayout.visual.*"
                xmlns:lc="org.un.cava.birdeye.ravis.components.ui.controls.layouterControls.*"
                xmlns:vc="org.un.cava.birdeye.ravis.components.ui.controls.vgraphControls.*"
                xmlns:flexlib="http://code.google.com/p/flexlib/"
                creationComplete="init();" width="100%" height="100%" >

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            
            import org.un.cava.birdeye.ravis.components.ui.controls.layouterControls.LayoutSelector;
            import org.un.cava.birdeye.ravis.components.ui.controls.layouterControls.PhiDial;
            import org.un.cava.birdeye.ravis.components.ui.controls.vgraphControls.EdgeRendererSelector;
            import org.un.cava.birdeye.ravis.graphLayout.data.Graph;
            import org.un.cava.birdeye.ravis.graphLayout.data.IGraph;
            import org.un.cava.birdeye.ravis.graphLayout.layout.ConcentricRadialLayouter;
            import org.un.cava.birdeye.ravis.graphLayout.layout.IAngularLayouter;
            import org.un.cava.birdeye.ravis.graphLayout.layout.ILayoutAlgorithm;
            import org.un.cava.birdeye.ravis.graphLayout.layout.ParentCenteredRadialLayouter;
            import org.un.cava.birdeye.ravis.graphLayout.visual.IEdgeRenderer;
            import org.un.cava.birdeye.ravis.graphLayout.visual.IVisualNode;
            import org.un.cava.birdeye.ravis.graphLayout.visual.VisualGraph;
            import org.un.cava.birdeye.ravis.graphLayout.visual.edgeRenderers.DirectedBalloonEdgeRenderer;
            
            import renderers.edgelabels.mxml.basicEdgeLabelRenderer;
            
            private var graph:IGraph;
            private var layouter:IAngularLayouter;
            private var selectedEdgeRenderer:IEdgeRenderer;
            private var startRoot:IVisualNode;
            private var itemCount:int = 0;
            private var initDone:Boolean = false;
            

            private function init():void{
                var strXML:String = 
                      "<graph>" + 
                "<Node id=\"1\" name=\"\" nodeColor=\"0xaf3a99\" nodeSize=\"0\" nodeIcon=\"center\" />" +  
                    "<Node id=\"2\" name=\"B60R\" nodeColor=\"0xaf3a42\" nodeSize=\"50\" />" +  
                    "<Node id=\"3\" name=\"H01L\" nodeColor=\"0xaf3a42\" nodeSize=\"50\" />" +  
                    "<Node id=\"4\" name=\"B24B\" nodeColor=\"0xaf3a42\" nodeSize=\"50\" />" +  
                    "<Node id=\"5\" name=\"H01M\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"6\" name=\"B25J\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"7\" name=\"G05B\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"8\" name=\"H04L\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"9\" name=\"H01R\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"10\" name=\"G05G\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"11\" name=\"H05K\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"12\" name=\"H01H\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"13\" name=\"H03H\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"14\" name=\"G06F\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"15\" name=\"H04Q\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"16\" name=\"A63B\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"17\" name=\"G06T\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"18\" name=\"E05B\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\      

      
      
    
[2]深入浅出JavaScript （五） 详解Document.write()方法
    来源: 互联网  发布时间: 2013-11-06

        一直用document.write()方法向浏览器中显示数据用，把它当做Alert()使用， 看来这样用有些大材小用了，下面说说它的主要用处。

 

        document.write()方法可以用在两个方面：

         1.页面载入过程中，用脚本加入新的页面内容。

         2.用延时脚本创建本窗口或新窗口的内容。

 

         该方法需要一个字符串参数，它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括HTML标记语言。如下面代码，教务系统框架载入子页

                    <!--将框架放入单元格中-->
                    <td class="index-table-middle-center" valign="top" id="content-container">
                        <div id="loading">
                            //加载效果图标
                            <img src=/blog_article/"images/loading.gif alt="loading" border="0" />
                        </div>
                        <script type="text/javascript">
                            //调用JS的OutputIFrame函数，形成框架
                            Index.OutputIframe();
                        </script>
                    </td>


         JS代码

//输出框架
Index.OutputIframe = function () {
    var scrolling = $.isIE6 == true ? 'yes' : 'auto';
    document.write('<iframe id="content" width="100%" height="100%"  + scrolling + '" onload="$(\'#loading\').hide();$(this).show();" src=/blog_article/""></iframe>/index.html');
};


　　在载入页面后，浏览器输出流自动关闭。在此之后，任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流，它将清除当前页面内容(包括源文档的任何变量或值)。因此，假如希望用脚本生成的HTML替换当前页面，就必须把HTML内容连接起来赋给一个变量，使用一个document.write()方法完成写操作。


　　关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写完内容后，必须关闭输出流。在延时脚本的最后一个document.write()方法后面，必须确保含有document.close()方法，不这样做就不能显示图像和表单。并且，任何后面调用的document.write()方法只会把内容追加到页面后，而不会清除现有内容来写入新值。

 

        为了演示document.write()方法，我们提供了同一个应用程序的两个版本。一个向包含脚本的文档中写内容，另—个向—个单独的窗口写内容。

　　示例1创建一个按钮，它为文档组合新的HTML内容，包括新文档标题的HTML标记和标记的颜色属性。

       示例中有一个读者所不熟悉的操作符+＝，它把其右侧的字符串加到其左侧的变量中，这个变量用来存放字符串，这个操作符能很方便地把几个单独的语句组合成—个长字符串。使用组合在newContent变量中的内容document.write()语句可以把所有新内容写到文档中，完全清除示例1中的内容。

 

       然后需要调用document.close()语句关闭输出流。当载入该文档并单击按钮时，可以注意到浏览器标题栏中的文档标题因此而改变。当回到原始文档并再次单击该按钮时，可以看到动态写入的第二个页面的载入速度甚至比重载原始文档还要快。

        示例1 在当前窗口使用document.write()。

<html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>

<script language="JavaScript">
  //重新写入函数
  function RepeatWrite(){
    // 保存写入的内容
    var newContent = "<html><head><title>A New Doc</title></head>"
    newContent += "<body bgcolor='aqua'><h1>This document is brand new.</h1>"
    newContent += "Click the Back button to see original document."
    newContent += "</body></html>"
    // 写入新的内容
    document.write(newContent);
    document.close();
  }
  
</script>
</head>
<body>
  <form>
  	<!--单击按钮调用写入函数-->
    <input type="button" value="Replace Content" onClick="RepeatWrite()">
  </form>
</body>
</html>


          示例2中，情况有点复杂，因为脚本创建了一个子窗口，整个脚本生成的文档都将写入该窗口中。为了使新窗口的引用在两个函数中保持激活状态，我们将newWindow变量声明为全局变量。

 

         页面载入时，onLoad事件处理调用makeNewWindow()函数，该函数生成一个空的子窗口。另外，我们在window.open()方法的第三个参数中加入一个属性，使子窗口的状态栏可见。

 

         页面上的按钮调用subWrite()方法，它执行的第一个任务是检查子窗口的closed属性。假如关闭了引用窗口，该属性（只在较新的浏览器版本中存在）返回true。如果是这种情况（假如用户手动关闭窗口），该函数再次调用makeNewWindow()函数来重新打开那个窗口。

 

         窗口打开后，新的内容作为字符串变量组合在一起。与示例1一样，一次性写入内容（虽然对单独的窗口没有必要），接下来调用close()方法。但是注意一个重要的区别：write() 和 close()方法都明显地指定了子窗口。

 

<html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Subwindow</title>
<script language="JavaScript">
  //生命一个全局变量
  var newWindow;
  //打开一个新的窗口
  function makeNewWindow(){
    newWindow = window.open("","","status,height=200,width=300")
  }
  //判断新窗口是否关闭，如果关闭重新打开
  function subWrite(){
    // make new window if someone has closed it
    if(newWindow.closed){
      makeNewWindow()
    }
    // 是新窗口获得焦点
    newWindow.focus()
    //保存写入内容
    var newContent = "<html><head><title>A New Doc</title></head>"
    newContent += "<body bgcolor='coral'><h1>This document is brand new.</h1>"
    newContent += "</body></html>"
    // 将HTML代码写入新窗口中
    newWindow.document.write(newContent)
    newWindow.document.close()    // close layout stream
  }
</script>
</head>

<body onLoad="makeNewWindow()">
  <form>
    <input type="button" value="Write to Subwindow" onClick="subWrite()">
  </form>
</body>
</html>


 

作者：lilongsheng1125 发表于2013-1-23 10:38:44 原文链接
阅读：57 评论：0 查看评论

    
[3]关于Block Formatting Context－－BFC和IE的hasLayout
    来源:    发布时间: 2013-11-06

一、BFC是什么？

BFC（Block Formatting Context）直译为“块级格式化范围”。

是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。

另一个通俗点的解释是：在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。任何被渲染的元素都属于一个 box ，并且不是 block ，就是 inline 。即使是未被任何元素包裹的文本，根据不同的情况，也会属于匿名的 block boxes 或者 inline boxes。所以上面的描述，即是把所有的元素划分到对应的 formatting context 里。

其一般表现规则，我整理了以下这几个情况：

1、在创建了 Block Formatting Context 的元素中，其子元素按文档流一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。

    根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。也就是处于同一个BFC中的两个垂直窗口的margin会重叠。

    根据 CSS 2.1 8.3.1 Collapsing margins 第三条，生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。所以解决这种问题的办法是要为两个容器添加具有BFC的包裹容器。

2、在 Block Formatting Context 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的 Block Formatting Context 。

3、Block Formatting Context就是页面上的一个隔离的独立容器，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。

4、根据 CSS 2.1 9.5 Floats 中的描述，创建了 Block Formatting Context 的元素不能与浮动元素重叠。

    表格的 border-box、块级的替换元素、或是在普通流中创建了新的 block formatting context（如元素的 'overflow' 特性不为 'visible' 时）的元素不可以与位于相同的 block formatting context 中的浮动元素相重叠。

5 、当容器有足够的剩余空间容纳 BFC 的宽度时，所有浏览器都会将 BFC 放置在浮动元素所在行的剩余空间内。 

6、 在 IE6 IE7 IE8 Chrome Opera 中，当 BFC 的宽度介于 "容器剩余宽度" 与 "容器宽度" 之间时，BFC 会显示在浮动元素的下一行；在 Safari 中，BFC 则仍然保持显示在浮动元素所在行，并且 BFC 溢出容器；在 Firefox 中，当容器本身也创建了 BFC 或者容器的 'padding-top'、'border-top-width' 这些特性不都为 0 时表现与 IE8(S)、Chrome 类似，否则表现与 Safari 类似。 

经验证，最新版本的浏览中只有firefox会在同一行显示，其它浏览器均换行。

7、 在 IE6 IE7 IE8 Opera 中，当 BFC 的宽度大于 "容器宽度" 时，BFC 会显示在浮动元素的下一行；在 Chrome Safari 中，BFC 则仍然保持显示在浮动元素所在行，并且 BFC 溢出容器；在 Firefox 中，当容器本身也创建了 BFC 或者容器的 'padding- top'、'border-top-width' 这些特性不都为 0 时表现与 IE8(S) 类似，否则表现与 Chrome 类似。

经验证，最新版本的浏览中只有firefox会在同一行显示，其它浏览器均换行。

8、根据CSS2.1 规范第10.6.7部分的高度计算规则，在计算生成了 block formatting context 的元素的高度时，其浮动子元素应该参与计算。

如果还有其它情况，请各位回得中补充，我会及时更新！

下面先看一个比较典型的例子：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
* { padding:0; margin:0; }
#red, #yellow, #orange, #green { width:100px; height:100px; float:left; }
#red { background-color:red; }
#yellow { background-color:yellow; }
#orange { background-color:orange; }
#green { background-color:green
    
最新技术文章:
 




特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3