Archives for the ‘css’ Category

动态嵌入 javascript 和 css

Tuesday, February 26th, 2008

动态嵌入 css 代码

var headID = document.getElementsByTagName(“head”)[0];
var cssNode = document.createElement(‘link’);
cssNode.type = ‘text/css’;
cssNode.rel = ’stylesheet’;
cssNode.href = ‘FireFox.css’;
cssNode.media = ’screen’;
headID.appendChild(cssNode);

动态嵌入 javascript 代码

var headID = document.getElementsByTagName(“head”)[0];
var newScript = document.createElement(’script’);
newScript.type = ‘text/javascript’;
newScript.src = ‘http://www.somedomain.com/somescript.js’;
headID.appendChild(newScript);

Ajax 就加入 javascript

function ajaxObject(url, callbackFunction) {

var that=this;

this.updating = false;

this.update = function(passData,postMethod) {

if (that.updating==true) { return false; }

that.updating=true;

var AJAX = null;

if (window.XMLHttpRequest) {

AJAX=new XMLHttpRequest();

} else {

AJAX=new ActiveXObject(“Microsoft.XMLHTTP”);

}

if (AJAX==null) {

return false;

} else {

AJAX.onreadystatechange = function() {

if (AJAX.readyState==4) {

that.updating=false;

that.callback(AJAX.responseText,AJAX.status,AJAX.responseXML);

delete AJAX;

}

}

var timestamp = new Date();

if (postMethod==’POST’) {

var uri=urlCall+’?'+timestamp.getTime();

AJAX.open(“POST”, uri, true);

AJAX.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

AJAX.send(passData);

} else {

var uri=urlCall+’?'+passData+’&timestamp=’+(timestamp*1);

AJAX.open(“GET”, uri, true);

AJAX.send(null);

}

return true;

}

}

var urlCall = url;

this.callback = callbackFunction || function () { };

}

function attachScript(responseText, responseStatus) {

// This function is called by the ajaxObject when the server has finished

// sending us the requested script.

if (responseStatus==200) {

eval(responseText);

}

}

// ajaxObject is an object constructor, pass it the server url you want it to call

// and the function name you want it to call when it gets the data back from the server.

// Use the .update() method to actually start the communication with the server.

// The first optional argument for update is the data you want to send to the server.

// ajaxvar.update(‘id=1234&greed=good&finish=true’);

// The second optional argument for update is ‘POST’ if you want to send the data

// as a POST instead of the default GET (post can handle larger amounts of data and

// the data doesn’t show up in your server logs).

// ajaxvar.update(‘id=1234&greed=good&finish=true’,'POST’);

var getScriptViaAjax=new ajaxObject(‘http://mydomain.com/somescript.js’,attachScript);

getScriptViaAjax.update();

var anotherScript = new ajaxObject(‘http://mydomain.com/anotherScript.php’,attachScript);

anotherScript.update(‘userId=4323′,’POST’);

flickr tag ajax 搜索

<script type=”text/javascript”>

function jsonFlickrFeed(feed){

z=”;

for (x=0; x<feed.items.length; x++) {

tmp=feed.items[x].media.m;

tmp=tmp.replace(/_m\.jpg/g,’_s.jpg’);

z+=’<img src=”‘+tmp+’” mce_src=”‘+tmp+’” alt=”some img” width=”75px” height=”75px” style=”margin: 2px;”>’;

}

document.getElementById(‘pics’).style.display=’block’;

document.getElementById(‘pics’).innerHTML=z;

}

function searchFlickr() {

var headID = document.getElementsByTagName(“head”)[0];

var newScript = document.createElement(’script’);

tagID = escape(document.getElementById(‘tags’).value);

document.getElementById(‘tags’).value=”;

newScript.type = ‘text/javascript’;

newScript.src = ‘http://flickr.com/services/feeds/photos_public.gne?tags=’ + tagID + ‘&format=json’;

headID.appendChild(newScript);

document.getElementById(‘pics’).style.display=’block’;

document.getElementById(‘pics’).innerHTML=”Loading…”;

return false;

}

</script>

<form action = “#” onsubmit=”return searchFlickr();”>

<input type=’text’ size=’40′ id=’tags’>   <input type=’submit’>

</form>

<div style=’border: 1px solid black; width: 100%; display: none;’ id=’pics’></div>

via http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

关于 css,js 文件后面的数字串

Saturday, January 26th, 2008

因为我极少做项目,所以并没有体会。类似

xxxx/123.css?234235345

xxxx/123.js?234235345

这样的写法大约有两个可能:

1.为了不让浏览器缓存。

2.可能是 url-rewrite 的处理,比如 xxx/123.php?id=234235345

markupnow 代码分析

Thursday, January 24th, 2008

ie6,7 css 打补丁;js;re 类似自定义的简单 $();body 给 id区分栏目。ie6 css 里用 htc 模拟 hover 等 css 效果。

显示更多

jquery UI 效果介绍

Wednesday, January 23rd, 2008
以下为引用内容:

所有效果说明:

基本的鼠标互动:

拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)

各种互动效果:

手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条

(sliders)、表格排序(table sorters)、页签(tabs)

放大镜效果(magnifier)、阴影效果(shadow)

第一部分:鼠标交互

1.1 Draggables:拖拽

所需文件:

ui.mouse.js

ui.draggable.js

ui.draggable.ext.js

用法:文件载入后,可以拖拽class = “block”的层

$(document).ready(function(){

$(“.block”).draggable();

});

draggable(options)可以跟很多选项

选项说明:http://docs.jquery.com/UI/Draggables/draggable#options

选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html

1.2 Droppables

所需要文件,drag drop

ui.mouse.js

ui.draggable.js

ui.draggable.ext.js

ui.droppable.js

ui.droppable.ext.js

用法:

$(document).ready(function(){

$(“.block”).draggable({helper: ‘clone’});

$(“.drop”).droppable({

accept: “.block”,

activeClass: ‘droppable-active’,

hoverClass: ‘droppable-hover’,

drop: function(ev, ui) {

$(this).append(“
Dropped!”);

}

});

});

选项说明:http://docs.jquery.com/UI/Droppables/droppable#options

选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html

1.3 Sortables 排序

所需要的文件

jquery.dimensions.js

ui.mouse.js

ui.draggable.js

ui.droppable.js

ui.sortable.js

用法:

$(document).ready(function(){

$(“#myList”).sortable({});

});

dimensions文档http://jquery.com/plugins/project/dimensions

选项说明:http://docs.jquery.com/UI/Sortables/sortable#options

选项实例:http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html

1.4 Selectables 选择

所需要的文件

jquery.dimensions.js

ui.mouse.js

ui.draggable.js

ui.droppable.js

ui.selectable.js

用法:

$(document).ready(function(){

$(“#myList”).selectable();

});

选项说明:http://docs.jquery.com/UI/Selectables/selectable#options

选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html

1.5 Resizables改变大小

所需要的文件 ,此例子需要几个css文件

jquery.dimensions.js

ui.mouse.js

ui.resizable.js

用法:

$(document).ready(function(){

$(“#example”).resizable();

});

CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明:http://docs.jquery.com/UI/Resizables/resizable#options

选项实例:http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.resizable.html

第二部分:互动效果

2.1 Accordion 折叠菜单

所需要的文件:

ui.accordion.js

jquery.dimensions.js

用法:

$(document).ready(function(){

$(“#example”).accordion();

});

CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明:http://docs.jquery.com/UI/Accordion/accordion#options

选项实例:http://dev.jquery.com/view/trunk/plugins/accordion/?p=1.1.1

2.2 dialogs 对话框

所需要的文件:

jquery.dimensions.js

ui.dialog.js

ui.resizable.js

ui.mouse.js

ui.draggable.js

用法:

$(document).ready(function(){

$(“#example”).dialog();

});

CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明:http://docs.jquery.com/UI/Dialog/dialog#options

选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html

2.3 sliders 滑动条

所需要的文件

jquery.dimensions.js

ui.mouse.js

ui.slider.js

用法:

$(document).ready(function(){

$(“#example”).slider();

});

CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明:http://docs.jquery.com/UI/Slider/slider#options

选项实例:http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html

2.4 Tablesorter表格排序

所需要的文件

ui.tablesorter.js

用法:

$(document).ready(function(){

$(“#example”).tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});

});

CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明:http://docs.jquery.com/Plugins/Tablesorter/tablesorter#options

选项实例:http://tablesorter.com/docs/#Demo

2.5 tabs页签(对IE支持不是很好)

所需要的文件

ui.tabs.js

用法:

$(document).ready(function(){

$(“#example > ul”).tabs();

});

CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明:http://docs.jquery.com/UI/Tabs/tabs#initialoptions

选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.html

tabs ext http://stilbuero.de/jquery/tabs_3/rotate.html

第三部分:效果

3.1 Shadow 阴影

实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html

3.2 Magnifier 放大

实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html


via http://www.javaeye.com/topic/157382

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://docs.jquery.com/Plugins/Validation

jquery ajax jsp 代码例子

Wednesday, January 23rd, 2008

有错误,供参考之用。

显示更多

via http://www.javaeye.com/topic/158428

jquery end() 函数

Wednesday, January 23rd, 2008

类似于 undo 函数,用于返回到调用 find() 或 parents() 函数(或者其它遍历函数)之前的 jQuery 对象。

显示更多

所有空 td 加入 -

$(‘td:empty’).html(‘-’);

非 class=”required” 隐藏

$(‘input:not(.required)’).hide();

jquery show() hide() 函数

$(‘ul, ol, dl’).hide();

table class=”stried” 下所有 odd(偶数)tr 背景色

$(‘table.striped > tr:odd’).css(‘background’, ‘#999999′);

jquery 插件例子

$.fn.background = function(bg){

return this.css(‘background’, bg);

};

$(“body”).background(“#c00″)

可以使用 jQuery 处理基本的动画和显示效果。animate() 函数是动画代码的核心,它用于更改任何随时间变化的数值型的 CSS 样式值。比方说,您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度,定为毫秒或者预定义的速度:慢速,中速或快速。

下面是一个同时变化某个元素高度和宽度的示例。请注意,这些参数没有开始值,只有最终值。开始值取自元素的当前尺寸。同时我也附加了一个回调函数。

$(‘#grow’).animate({ height: 500, width: 500 }, “slow”, function(){

alert(‘The element is done growing!’);

});

jQuery 的内置函数使更多常见的动画更容易完成。可以使用 show() 和 hide() 元素,立即显示或者以特定的速度显示。还可以通过使用 fadeIn() 和 fadeOut(),或者 slideDown() 和 slideUp() 显示和隐藏元素,这取决于您所需要的显示效果。下面的示例定义了一个下滑的导航菜单。