图片 13

增强插件,EasyUI创建异步树形菜单和动态添加标签页tab

$("td").each(function(i,el){
   var td = parseFloat($(el).text());
   if(!isNaN(td)){
      $(el).text(td.toFixed(2));
   }
});
  • SWFObject
    2提供两种优化flash播放器的嵌入方法:基于标记的方法和依赖于js的方法。
  • SWFObject
    2提供一个js的API,为嵌入SWF文件和获取Flash播放器的相关信息提供了一个完整的工具箱。
  • 只用了一个很小的js文件 (10Kb / GZIPed: 3.9Kb)。
  • 是SWFObject 1.5, UFO and the Adobe Flash Player Detection
    Kit的继承者。
  • 拟统一所有现有的Flash播放器的嵌入方法,并提供了嵌入Adobe Flash
    Player内容新的标准
  • SWFObject v2.2

  • github地址

创建异步树形菜单

  1. 创建树形菜单的ul标签
    图片 1图片 2

    <ul class="easyui-tree" id="treeMenu">
    </ul>
    

    View Code

  2. 写js代码,对菜单的ul标签元素使用tree函数
    图片 3图片 4

    $(function(){
        $('#treeMenu').tree({
            url:'tree_data.json'  //url的值是异步获取数据的页面地址 
        });
    });
    

    View Code

  3. 写用来异步获取数据的php页面(tree_data.json页面)。
    返回的需是Json值(此处用数组代替从数据库获取的数据,以省略连接数据库过程)

    图片 5图片 6

    $result = [];
    
    //节点一
    $prodArr = [
        "id" => 1,
        "text" => "商品管理",
        "state" => "open",
        "children" => [
            [
                "id" => 2,
                "text" => "添加商品",
                "state" => "open",
                "attributes" => [
                    "url" => "http://abc.com/test.php"
                ]
            ],
            [
                "id" => 3,
                "text" => "修改商品",
                "state" => "open",
                "attributes" => [
                    "url" => "http://abc.com/test2.php"
                ]
            ]
        ]
    ];
    
    //节点二
    $newsArr = [
        "id" => 10,
        "text" => "新闻管理",
        "state" => "open",
        "children" => [
            [
                "id" => 12,
                "text" => "添加新闻",
                "state" => "open"
            ],
            [
                "id" => 13,
                "text" => "修改新闻",
                "state" => "open"
            ]
        ]
    ];
    
    //节点三
    $userArr = [
        "id" => 20,
        "text" => "用户管理",
        "state" => "open",
        "children" => [
            [
                "id" => 22,
                "text" => "添加用户",
                "state" => "open"
            ],
            [
                "id" => 23,
                "text" => "修改用户",
                "state" => "open"
            ]
        ]
    ];
    
    Array_push($result, $prodArr, $newsArr, $userArr);
    echo json_encode($result);
    

    View Code

    说明:
    节点的属性:
    id:节点ID,可以作为参数来异步向页面地址获取子节点数据
    text:节点文本
    state:节点状态。取值为open(缺省默认值)或close。当设置为close时,会自动异步获取子节点的数据
    checked:指明节点是否被选中。
    attributes:自定义属性
    children:以数组的形式包含子节点      
    (更多细节知识可查看easyui官网中tree知识点)

 到这,异步树形菜单就完成了。

 

在线实例

实例预览 addDomLoadEvent

实例预览 addLoadEvent

实例预览 createCSS

实例预览 createCSS Advanced

实例预览 createSWF

实例预览 createSWF Command

实例预览 embedSWF

实例预览 embedSWF Callback

实例预览 getFlashPlayerVersion

实例预览 getObjectById

实例预览 getQueryParamValue

实例预览 hasFlashPlayerVersion

实例预览 registerObject

实例预览 registerObject
Callback

实例预览 removeSWF

实例预览 showExpressInstall

实例预览 switchOffAutoHideShow

实例预览 switchOffAutoHideShow
Dynamic

动态添加标签页tab

  1.  创建用来包裹标签页tab的外层标签
    图片 7图片 8

    <div id="contentTabs" class="easyui-tabs" style="width:100%;height:100%;">
    </div> 
    

    View Code

  2. 在js中定义addTab函数
    图片 9图片 10

    function addTab(title, url){
        if ($('#contentTabs').tabs('exists', title)){
            $('#contentTabs').tabs('select', title);
        } else {
            var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
            $('#contentTabs').tabs('add',{
                title:title,
                content:content,
                closable:true
            });
        }
    }
    

    View Code

  3. 在树形菜单的点击事件函数中调用addTab函数
    图片 11图片 12

    $(function(){
        $("#treeMenu").tree({
            onClick:function(node){
                if (node.attributes !== undefined && node.attributes.url !== undefined) {
                    addTab(node.text,node.attributes.url);    
                }                                                                
            }
        });
    });
    

    View Code

 

最后,如图显示

图片 13

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图