0
点赞
收藏
分享

微信扫一扫

UI学习笔记---EasyUI panel插件使用---03

狗啃月亮_Rachel 2022-03-25 阅读 93
cssicojquery


UI学习笔记---EasyUI panel插件使用---03

UI学习笔记---EasyUI panel插件使用---03

1.panel简单小例子

-------------------

2.可以自己做一些小例子放到自己的icon.css中,加载进来用

3.用的时候先加载进来5个常用的js和css文件

4.一些panel的属性可以查看api

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>1.html</title>


    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <!-- 解决乱码问题,设置编码charset=UTF-8" -->

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type="text/javascript" src="jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset='utf-8'></script>

  <script type="text/javascript" src="jquery-easyui-1.2.6/jquery.easyui.min.js" charset='utf-8'></script>

  <!-- 这里导入css,只需要导入themes中的easyui.css这里包含了easyui的所有的css -->

  <link rel="stylesheet" href="jquery-easyui-1.2.6/themes/default/easyui.css" type="text/css"></link>

  <!-- 导入完上面的内容就可以利用easyui了 -->

  <!-- 下面再导入图片的css文件 icon.css-->

  <link rel="stylesheet" href="jquery-easyui-1.2.6/themes/icon.css" type="text/css"></link>

  <!-- 这个是时候easyui是英文的,这时候要用中文的需要引入locale中的 -->

  <script type="text/javascript" src="jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js" charset='utf-8'></script>

  <!-- 下面先介绍dialog实例 -->

    <!--1.先写一个script-->

   <script type="text/javascript" charset='utf-8'>

  $(function(){

 $('#dd').dialog({

 //也可以从这里定义组件的属性

 title:'testtitle'

 })

 });

  </script>

  </head>

  <!-- 这里onload是在全部页面加载完之后才执行的οnlοad='' -->

  <body οnlοad=''>

 <!--这里-->

 <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" 

        iconCls="icon-save"  closable="true" 

        collapsible="true" minimizable="true" maximizable=true> 

    <p>panel content.</p> 

    <p>panel content.</p> 

</div> 

  </body>

</html>

----------------------------------------

4.看一些常用的属性:

id          string The id attribute of this panel. null

title       string The title text to display in panel header. null

iconCls     string A CSS class to display a 16x16 icon in panel. null

width       number Set the panel width. auto

height      number Set the panel height. auto

left        number Set the panel left position. null

top         number Set the panel top position. null

cls         string Add a CSS class to the panel. null

headerCls   string Add a CSS class to the panel header. null

bodyCls     string Add a CSS class to the panel body. null

style       object Add a custom specification style to the panel. {}

fit         boolean When true to set the panel size fit it's parent container. false

border      boolean Defines if to show panel border. true

doSize      boolean If set to true,the panel will be resize and do layout when created. true

noheader    boolean If set to true, the panel header will not be created. false

content     string The panel body content. null

collapsible //这个属性是定义一个折叠按钮,默认是false.boolean Defines if to show collapsible button. false

minimizable //最小化boolean Defines if to show minimizable button. false

maximizable //最大化boolean Defines if to show maximizable button. false

closable    boolean Defines if to show closable button. false

tools       array,selector Custom tools, possible values:

            1) an array, each element contains iconCls and handler properties.

            2) a selector that indicating the tools

 []

collapsed   boolean Defines if the panel is collapsed at initialization. false

minimized   boolean Defines if the panel is minimized at initialization. false

maximized   boolean Defines if the panel is maximized at initialization. false

closed      boolean Defines if the panel is closed at initialization. false

href        string A URL to load remote data and then display in the panel. null

cache       boolean True to cache the panel content that loaded from href. true

loadingMessage string When loading remote data show a message in the panel. Loading��

extractor function Defines how to extract the content from ajax response, return extracted data. extractor: function(data){


 var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;

 var matches = pattern.exec(data);

 if (matches){

  return matches[1]; // only extract body content

 } else {

  return data;

 }

}

-----------------------------------------------------

5. <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" 

        iconCls="icon-save"  closable="true" 

        collapsible="true"//显示折叠按钮

 minimizable="true" //最小化按钮

 maximizable=true>  //最大化

        closed="true"//让panel刚刚开始的时候display是true

    <p>panel content.</p> 

    <p>panel content.</p> 

</div> 

-------------------------------

6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>1.html</title>


    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <!-- 解决乱码问题,设置编码charset=UTF-8" -->

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type="text/javascript" src="jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset='utf-8'></script>

  <script type="text/javascript" src="jquery-easyui-1.2.6/jquery.easyui.min.js" charset='utf-8'></script>

  <!-- 这里导入css,只需要导入themes中的easyui.css这里包含了easyui的所有的css -->

  <link rel="stylesheet" href="jquery-easyui-1.2.6/themes/default/easyui.css" type="text/css"></link>

  <!-- 导入完上面的内容就可以利用easyui了 -->

  <!-- 下面再导入图片的css文件 icon.css-->

  <link rel="stylesheet" href="jquery-easyui-1.2.6/themes/icon.css" type="text/css"></link>

  <!-- 这个是时候easyui是英文的,这时候要用中文的需要引入locale中的 -->

  <script type="text/javascript" src="jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js" charset='utf-8'></script>

  <!-- 下面先介绍dialog实例 -->

    <!--1.先写一个script-->

   <script type="text/javascript" charset='utf-8'>

  $(function(){

 $('#dd').dialog({

 //也可以从这里定义组件的属性

 title:'testtitle'

 })

 });

  </script>

  </head>

  <!-- 这里onload是在全部页面加载完之后才执行的οnlοad='' -->

  <body οnlοad=''>


 <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" 

        iconCls="icon-save" 

        closable="true" 

        collapsible="true"

        minimizable="true"

        maximizable=true

        closed="true"

        > 

    <p>panel content.</p> 

    <p>panel content.</p> 

</div> 

 //第一个按钮打开这个panel

 <input type="button" value="open" οnclick="$(p).panel('open')"/>

  //第二个按钮关闭这个panel

  <input type="button" value="close" οnclick="$(p).panel('close')"/>

 //第三个按钮在内存中销毁这个panel

 <input type="button" value="close" οnclick="$(p).panel('destroy')"/>

  </body>

</html>




举报

相关推荐

0 条评论