flowthink的博客

导航

bgjs初学者入门（六）按钮控件CButton

　　CButton控件是我们即将认识的第二个控件。它使用起来真的非常简单！

　　如前所述，既然它也是bgjs提供的一个控件，使用上就应该是这样：

var btn=new CButton({...});
btn.dosomething();...

　　下面，我们先来了解一些常用的属性选项。

  • showTo:　　　　要显示到的容器
  • autoRender:　　是否自动渲染
  • title:　　　　　　按钮上显示的名称
  • icon:　　　　　　按钮上显示的图案
  • qtip:　　  　　　 qtip提示
  • disabled:　　　　是否禁用
  • cs:　　　　   　　样式（class的缩写）
  • onclick:　　　　　点击时的回调函数

嗯，很多属性看起来很眼熟。没错，showTo等属性是继承自CBase基类，因此bgjs所有的控件都有这些属性。

同样，CButton也有setXY()和show()方法。

  • setXY()　　　　  相对容器的坐标
  • show()　　　　   显示出来
那么，我们可以很快就写出一个应用了~
还是在test目录下建立一个新的html文件，命名为CButton.html. 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CButton</title>
  <script type="text/javascript" src="../bglib-all.js"></script>
  <link rel="stylesheet" href="../default/global.css" type="text/css"/>
  <link rel="stylesheet" href="../default/ru_share.css" type="text/css"/>
  <style>
      .mybutton {position:absolute ; margin:2px 3px;}
  </style>
</head>
<body lang="zh">
</body>
</html>
<script type="text/javascript">
    function myalert(){
        CUtil.alert('你点击了CButton!');
    }
    Event.ready(function(){
        var w = new CButton({showTo:document.body,qtip:'CButton内部的qtip',autoRender:true,cs:'mybutton', title:'你好,CButton',onclick:myalert});
        w.setXY(200,200);
    });
</script>

 

效果如下：
需要注意的几点：
　　1.cs、showTo、autoRender、qtip等属性是CBase类提供的。而CBase类是bgjs一切控件的基类，因此我们需要熟悉它们的功能。
　　2.控件内置的qtip属性，可以很方便地给控件增加一个tip提示（等效于手动调用CUtil.qtip，但是更方便！）
　　3.在示例代码中没有手动调用show()，而CButton也出现了，那是因为初始化的时候我们设置autoRender属性为true了。
　　4.注意css中mybutton的定义："position:absolute"。因为默认bgjs的控件定位和普通页面元素一样，都是static的。要想setXY()方法生效，必须做这个定义。

上面这个例子没有演示给CButton控件加图片，我们现在就来加一个。

最后的效果是这样：

　　

操作步骤如下：

1.首先你需要有一个图像文件，可以把它放在和网页同级的文件夹下。这个图像的大小需要注意：默认要求必须是16*16像素的！（如果你想要其他大小的图片，需要学习CTemplate的使用，这里不涉及，以后可能会有介绍）

2.加一个css类，设置背景图片为刚才的图片；

3.设置CButton的icon属性为刚才设置的css类

以下是一个完整的示例代码：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CButton</title>
  <script type="text/javascript" src="../bglib-all.js"></script>
  <link rel="stylesheet" href="../default/global.css" type="text/css"/>
  <link rel="stylesheet" href="../default/ru_share.css" type="text/css"/>
  <style>
      .mybutton {position:absolute ; margin:2px 3px;}
      .iconUser {background-image:url(user_green.gif) !important;}
  </style>
</head>
<body lang="zh">
</body>
</html>
<script type="text/javascript">
    function myalert(){
        CUtil.alert('你点击了CButton!');
    }
    Event.ready(function(){
        var w = new CButton({showTo:document.body, icon:'iconUser',qtip:'CButton内部的tip',cs:'mybutton', title:'你好,CButton',onclick:myalert});
        w.setXY(200,200).render();
        
    });
</script>

 

posted on 2010-01-17 17:00  flowthink  阅读(988)  评论(0)    收藏  举报