浏览 4301 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (12) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-03-15
最后修改：2009-03-19
这里贴出修改后的JS代码,其它的代码见 第一节内容.
新增了 动态创建HTML元素的功能,动态对其赋CSS属性的功能. 新增一个helloworld的例子: 尚未完成.
现在有事 暂贴这些代码.
对第一节中html文件的修改处为 <body id='body'>,新增了一个id属性
Object.extend = function(distObject, souceObject) {
for (var property in souceObject) {
distObject[property] = souceObject[property];
}
return distObject;
}
//定义全局对象
if(typeof BJExtreme == 'undefined')
BJExtreme = function(){} ;
BJExtreme.log = nitobi.Debug.log ;
/*自定义的Dom*/
BJExtreme.Dom = {} ;
BJExtreme.Dom.$ = function(id){
return document.getElementById(id);
}
BJExtreme.Dom.$name = function(name){
return document.getElementsByTagName(name);
}
/**
* 创建HTML元素,并连接到父元素中
* @param {} elehtml
* @param {} id
* @param {} parentid
*/
BJExtreme.Dom.$c = function(elehtml,id,parentid){
var ele = document.createElement(elehtml);
ele.setAttribute('id',id);
BJExtreme.Dom.$(parentid).appendChild(ele);
ele = null ;
}
/**
* 元素效果渲染功能区域
* @type {}
*/
BJExtreme.EleHtml = {} ;
/**
* 对指定id元素,冲入CSS元素,要注意的是在css属性出现连字符时
* 将后面的首字母改为大写,并且去掉连字符. 例如:
* margin-top 写成 marginTop
*
* @param {} id
* @param {} cssobj
*/
BJExtreme.EleHtml.css = function(id,cssobj){
//HTML元素的style属性是个数组
for (var property in cssobj) {
BJExtreme.Dom.$(id).style[property] = cssobj[property];
}
}
/**
* 隐藏和显示HTML元素
* @param {} id
*/
BJExtreme.EleHtml.hide = function(id){
BJExtreme.EleHtml.css(id,{display:'none'});
}
BJExtreme.EleHtml.show = function(id){
BJExtreme.EleHtml.css(id,{display:''});
}
BJExtreme.EleHtml.text = function(id,text){
if ( text == undefined||text == '')
return BJExtreme.Dom.$(id).innerText;
BJExtreme.Dom.$(id).innerText = text;
}
BJExtreme.EleHtml.html = function(id,html){
if ( html == undefined||html == '')
return BJExtreme.Dom.$(id).innerHTML;
BJExtreme.Dom.$(id).innerHTML = html;
}
/**
* 设置HTML元素的宽高
* @param {} id
* @param {} width
* @param {} height
*/
BJExtreme.EleHtml.setW$H = function(id,w,h){
BJExtreme.EleHtml.css(id,{width:w,height:h});
}
/**
* 仅对 position: absolute;的元素有效
*
* 对于使用JS操作CSS时,如果使用的属性有连字符,后面那个大写
* margin-top 写出 marginTop
* @param {} id
*/
BJExtreme.EleHtml.setAbsoluteCenter = function(id){
var sfid = BJExtreme.Dom.$(id);
BJExtreme.EleHtml.css(id,{
position:'absolute',
top:'50%',
left: '50%',
marginTop: (-(sfid.clientHeight / 2)) + 'px' ,
marginLeft: (-(sfid.clientWidth / 2)) + 'px'
});
sfid = null ;
}
//UI控件区域
BJExtreme.WebUI = {} ;
BJExtreme.WebUI.popHelloWorld = function(){
BJExtreme.Dom.$c('div','helloworld','body');
BJExtreme.EleHtml.css('helloworld',{
width:"400px",height:"200px",backgroundColor: 'pink'
});
BJExtreme.EleHtml.setAbsoluteCenter('helloworld');
BJExtreme.EleHtml.text('helloworld','你好,世界');
}
BJExtreme.WebUI.popHelloWorld();
//Test -- 区域
BJExtreme.Test = {} ;
BJExtreme.Test.$c = function(){
BJExtreme.Dom.$c('p','exap','container');
BJExtreme.EleHtml.html('exap','大家好啊');
}
BJExtreme.Test.show = function(){
BJExtreme.EleHtml.show('container');
}
BJExtreme.Test.hide = function(){
BJExtreme.EleHtml.hide('container');
}
BJExtreme.Test.setAbsoluteCenter = function(){
BJExtreme.EleHtml.setW$H('container1',"200px","600px")
BJExtreme.EleHtml.setAbsoluteCenter('container1');
}
BJExtreme.Test.$c();
BJExtreme.Test.hide();
BJExtreme.Test.show();
BJExtreme.Test.setAbsoluteCenter();
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-03-18
http://www.tiddlywiki.com/ 很牛B的一个 程序
|
| 返回顶楼 | |
|
发表时间：2009-03-19
提供一个新的IP地址校验 Widget .. 尚未实现拖拽功能
[url]http://iamsese.cn/view/widget/iamsese/ipvalidator.html [/url] 刚刚吧自己的那个文本论坛挣到里面了 大家看看 提点建议啊 |
| 返回顶楼 | |
|
发表时间：2009-03-19
|
| 返回顶楼 | |
|
发表时间：2009-03-20
http://www.iamsese.cn/view/cssbook/cssonlineguide/
在线CSS手册 |
| 返回顶楼 | |
|
发表时间：2009-03-20
增加一段代码
$(document).ready(function(){
$.ajaxSetup({async:false});//同步加载
//定义全局对象
if(typeof WebWidget == 'undefined')
var WebWidget = function(){} ;
//设置根目录
$('script').each(function(){
var match = $(this).attr('src').match(/.*boot.js($|\?.*)/);
if (match){
WebWidget.appPath = $(this).attr('src').replace(/core\/boot\.js.*/, '');
}
});
}
|
| 返回顶楼 | |
|
发表时间：2009-03-20
js按照这样的java风格写代码会很长，javascript开发最重要的原则是保持代码可读性的前提下尽量缩减代码量。
BJExtreme = function(){} ; 可以写成 BJExtreme = {}; BJExtreme.Dom.$ = function(id){ return document.getElementById(id); } 感觉完全没必要，省不了多少字节。 |
| 返回顶楼 | |
|
发表时间：2009-03-23
lz的代码没有注释,没法看.
|
| 返回顶楼 | |
|
发表时间：2009-03-24
DIV 左右图片边框的实现: 因为DIV不像表格那样简单的实现左右图片边框的效果
/*设置布局元素*/
div#layout{
height: 100%;width: 800px;
margin: 0px auto ;
position: relative;
}
/*左边框*/
div#layout #leftline {
background-image: url(../img/bg_border_left1.jpg) ;
background-repeat: repeat-y;display: inline;
width: 8px; height: 100%;float: left;
}
/*右边框*/
div#layout #rightline {
background-image: url(../img/bg_border_right1.jpg) ;
background-repeat: repeat-y;
width: 8px; height: 100%;float: right;
}
div#layout #interline {
height: 100%;display: inline;
width: 784px;float: left;
background-color: #ffffff ;/*设置颜色,为了与logo的画布颜色相同*/
}
|
| 返回顶楼 | |
