程序博客网 > 淘宝搜索接口api

写给自己！

来源：互联网 发布：淘宝搜索接口api 编辑：程序博客网 时间：2024/06/05 23:39

为了巩固自己的学习，直接把代码拿过来了。方便以后再看。

@{    Layout = null;}<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Fluid Layout - jQuery EasyUI Demo</title>    <link href="~/script/jquery-easyui-1.4.4/themes/default/easyui.css" rel="stylesheet" />    <link href="~/script/jquery-easyui-1.4.4/themes/icon.css" rel="stylesheet" />    <link href="~/script/jquery-easyui-1.4.4/demo/demo.css" rel="stylesheet" />    <script src="~/script/jquery-easyui-1.4.4/jquery.min.js"></script>    <script src="~/script/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>    <script>        $(function () {            binClick();        });        function binClick() {            $(".x").click(function () {                var title = $(this).text();                var url = $(this).attr("url")                var IsExt = $("#tt").tabs("exists", title);//判断页标签 是否存在;                if (IsExt)                {                    $("#tt").tabs("select", title)                    return;                }                $('#tt').tabs('add', {                    title: title,                    content: show(url),                    closable: true                });            });        }        function show(url) {            var strhtml = '<iframe src="' + url + '" scrolling="no" width="100%" height="100%" frameborder="0"></iframe>';            return strhtml;        };    </script></head><body class="easyui-layout">    <div data-options="region:'north',border:false" style="height:100px;background:#B3DFDA;padding:1px;overflow:hidden" >        <img src="~/script/Photo/mxcp200652421492871117.jpg" style="width:100%;height:100%" />    </div>    @*左边布局*@    <div data-options="region:'west',split:true,title:'West'" style="width: 150px; padding: 1px; overflow: hidden">        <div class="easyui-accordion" data-options="multiple:true" style="width: 500px; height: auto; ">            <div title="XXX管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;" >                <a href="javascript:void(0)"class="x" url="/home/list">XXX管理</a>            </div>            <div title="YYY管理" style="padding:10px;" data-options="iconCls:'icon-ok'">                <a href="javascript:void(1)"class="y">YYY管理</a>            </div>        </div>    </div>    @*左边布局结束*@    @*底部布局*@    <div data-options="region:'south',border:false" style="height:30px;background:#A9FACD;padding:10px;text-align:center;">版权 &copy;所有</div>    @*底部布局结束*@    @*中单页标签布局*@    <div data-options="region:'center',title:'Center'">        <div class="easyui-tabs" style="width:700px;height:250px" fit="true" id="tt">            <div title="欢迎使用xxx" style="padding:10px" data-options="iconCls:'icon-help',closable:true">              欢迎使用xxx            </div>        </div>        </div></body></html>

上述代码用了JqueryEasyUI的布局。下面，就来看一下这个东西。
EasyUI Layout 布局
布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。
这里写图片描述

依赖

·panel
·resizable

用法

创建布局（Layout）

1、通过标记创建布局（Layout）。

添加 ‘easyui-layout’ class 到 <div> 标记。 

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div></div>

2、在整个页面上创建布局（Layout）。

<body class="easyui-layout">    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div></body>

3、创建嵌套布局。 请注意，内部布局的西区面板是折叠的。

<body class="easyui-layout">    <div data-options="region:'north'" style="height:100px"></div>    <div data-options="region:'center'">        <div class="easyui-layout" data-options="fit:true">            <div data-options="region:'west',collapsed:true" style="width:180px"></div>            <div data-options="region:'center'"></div>        </div>    </div></body>

4、通过 ajax 加载内容。 布局（layout）是基于面板（panel）创建的。各区域面板提供从 URL 动态加载内容的内建支持。使用动态加载技术，用户可以让他们的布局页面更快地显示。

<body class="easyui-layout">    <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>    <div data-options="region:'center',href:'center_content.php'" ></div></body>

折叠布局面板（Collpase Layout Panel）

$('#cc').layout();// collapse the west panel$('#cc').layout('collapse','west');

通过工具按钮添加西区面板

$('#cc').layout('add',{    region: 'west',    width: 180,    title: 'West Title',    split: true,    tools: [{        iconCls:'icon-add',        handler:function(){alert('add')}    },{        iconCls:'icon-remove',        handler:function(){alert('remove')}    }]});

布局选项（Layout Options）

这里写图片描述

区域面板选项（Region Panel Options）

区域面板选项（Region Panel Options）是定义在面板（panel）组件中，下面是一些共同的和新增的属性： ##
这里写图片描述

方法

这里写图片描述

EasyUI Tabs 标签页/选项卡

这里写图片描述
**

依赖

  • panel
  • linkbutton

用法

创建标签页（Tabs）

1、通过标记创建标签页（Tabs） 从标记创建标签页（Tabs）更容易，我们不需要写任何 JavaScript 代码。记住把 ‘easyui-tabs’ class 添加到
标记。每个标签页面板（tab panel）通过子
标记被创建，其用法与面板（panel）一样。

$('#tt').tabs({    border:false,    onSelect:function(title){        alert(title+' is selected');    }});

2、编程创建标签页（Tabs）
现在我们编程创建标签页（Tabs），我们同时捕捉 ‘onSelect’ 事件。

$('#tt').tabs({    border:false,    onSelect:function(title){        alert(title+' is selected');    }});

添加新的标签页面板（tab panel）

通过迷你工具添加一个新的标签页面板（tab panel），迷你工具图标（8x8）放置在关闭按钮前。

// 添加一个新的标签页面板（tab panel）$('#tt').tabs('add',{    title:'New Tab',    content:'Tab Body',    closable:true,    tools:[{        iconCls:'icon-mini-refresh',        handler:function(){            alert('refresh');        }    }]});```获取选中的标签页（Tab）<div class="se-preview-section-delimiter"></div>

// 获取选中的标签页面板（tab panel）和它的标签页（tab）对象
var pp = $(‘#tt’).tabs(‘getSelected’);
var tab = pp.panel(‘options’).tab; // 相应的标签页（tab）对象
“`
这里写图片描述
这里写图片描述

这里写图片描述
事件

时间及其标签页面版这里就不一一描述了。链接送上http://www.jeasyui.net/plugins/160.html

时间及其标签页面版这里就不一一描述了。链接送上http://www.jeasyui.net/plugins/160.html

接下来，在看一些 其他的有关于JqueryEasyUI的知识。

EasyUI Pagination 分页

用法通过标记创建分页（pagination）。<div id="pp" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;"    data-options="total:2000,pageSize:10"></div>使用 javascript 创建分页（pagination）。<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>$('#pp').pagination({    total:2000,    pageSize:10});让我们通过面板（panel）和分页（pagination）插件创建 ajax 分页（pagination）。当用户选择一个新的页面时，面板（panel）将显示指定页面的相应内容。<div id="content" class="easyui-panel" style="height:200px"    data-options="href:'show_content.php?page=1'"></div><div class="easyui-pagination" style="border:1px solid #ccc;"    data-options="    total: 2000,    pageSize: 10,    onSelectPage: function(pageNumber, pageSize){    $('#content').panel('refresh', 'show_content.php?page='+pageNumber);    }"></div>顶部的面板（panel）默认显示第一个页面的内容。当用户导航页面时，'onSelectPage' 事件将被触发，该事件为内容面板（panel）调用 'refresh' 方法来加载带有一个新的 URL 参数的新页面内容。属性及其实践方法见链接。http://www.jeasyui.net/plugins/155.html
1 0
淘宝搜索接口api 淘宝搜索接口api
原创粉丝点击
热门IT博客
windows 7桌面没了windows 7桌面没了
一叶而知秋的类似句子一叶而知秋的类似句子
爱编程(北京)教育
c语言教程电子书
kmeans聚类算法
mac osx使用教程
手机淘宝装修与pc同步
淘宝网秒杀系统异常
南昌市金域名都二手房
mac office 账号
北京高瓴投资大数据
初中数学辅导网络
天界宠物进化数据
论坛发帖java代码实现
数据分析职业发展
mac相簿照片如何拷贝
python一般用什么界面
php header setcookie
mysql同时执行多条语句
js伪造referer来路
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 大众新款途观 途观suv报价 途观七座 七座途观 途观进口报价 大众途观降价 大众途观越野车 全新大众途观 途观手自一体风尚版 大众途观车 途观四驱 新款途观报价及图片 观途 新 途观 新款大众途观价格 途观越野车价格 途观用什么机油 途观车 新途观价格 进口途观价格 途观新款价格 途观中配多少钱 途观v6多少钱 途观1.8t动力怎么样 大众途观1.8t风尚版 途观换胎 进口途观2015款报价 1.8t途观多少钱 现代途观报价 途观大众报价 途观车价格 大众全新途观多少钱 新途观怎么样 大众小途观 途观手动挡 指南者和途观哪个好 大众途观现在多少钱 大众途观2014款报价 途观舒适版多少钱 国产途观 途观性价比怎么样

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里