Top Words:  不识庐山真面目,只缘身在此山中。(苏轼)

子雨轩网络

PHP互联网技术,互联网文摘,PHP技术,WEB开发,SEO,WAP技术,linux系统

Home » index.php » archives » WEB前端设计

Jquery ajax同步调用

1.先看一下我的代码
function checkUsername(){
var c_username = $(”input[@name='c_username']“).val();
if(c_username == ”){
//$(”input[@name='c_username']“).focus();
$(”#tip_c_username”).html(’<!–{$lang.account_error_username}–>’);
$(”#tip_c_username”).addClass(’redtip’);
return 0;
}
var unlen = $.trim(c_username).length;
if(unlen < 4 || unlen > 12){
//$(”input[@name='c_username']“).focus();
$(”#tip_c_username”).html(’<!–{$lang.account_error_username_len}–>’);
$(”#tip_c_username”).addClass(’redtip’);
return 0;
}
var ajax_ret = 0;
$.ajax({
type: “POST”,
url: ‘account_opt.php’,
data: “act=checkUsername&c_username=”+c_username,
success: function(msg){
if(msg == 0){
$(”#tip_c_username”).html(’<img src=”images/yes.jpg” width=”18″ height=”16″ />’);
ajax_ret = 1;
}else{
$(”#tip_c_username”).html(’ Desculpe , esse nome de usuário já foi  usado !’);
$(”#tip_c_username”).addClass(’redtip’);
ajax_ret = 0;
}
}
});
return ajax_ret;
}
调用checkUsername方法的返回值是0,尽管在success function 里边对ajax_ret 已经修改为1了。
原因默认的Jquery ajax是按异部调用的,因此方法添加一条参数“async:false”问题便解决。
function checkUsername(){
var c_username = $(”input[@name='c_username']“).val();
if(c_username == [...]

  • Hotmail
  • LinkedIn
  • Yahoo Mail
  • Yahoo Messenger
  • Google Bookmarks
  • Share/Bookmark

设为首页/加入收藏代码

HTML设为首页:
1.文字型:
<a onclick=”this.style.behavior=’url(#default#homepage)’;this.setHomePage(’http://www.apple-wallpaper.com’);” href=”http://www.apple-wallpaper.com”>设为首页</a>
2.按钮型:
<input TYPE=”button” VALUE=” 设为首页 ” onclick=”this.style.behavior=’url(#default#homepage)’;this.setHomePage(’http://www.apple-wallpaper.com’);” href=”http://www.apple-wallpaper.comt”>
3.图片链接
<a style=”cursor:hand” onclick=”this.style.behavior=’url(#default#homepage)’;this.setHomePage(’http://www.apple-wallpaper.com’);”>
<img width=16 height=16 border=0 src=”images/Logo.gif”>
<u> 设为首页</u></a>

4.离开时自动提示设为首页:
<body onunload=”BASEBody.style.behavior=’url(#default#homepage)’;
if(!(BASEBody.isHomePage(’http://www.1.com’)))BASEBody.setHomePage(’http://www.apple-wallpaper.comt’);”>
5.打开网页就提示是否设为主页:
<script language=”javascript”>
function myhomepage(){
this.homepage.style.behavior=’url(#default#homepage)’;this.homepage.sethomepage(’http://www.dafacai.net’);
}
</script>
<p align=”center”><a href=”http://www.apple-wallpaper.comt” name=”homepage”
onclick=”myhomepage();”></a>
6.鼠标指向时提示设为首页
<A href=”http://www.apple-wallpaper.com/” onmouseover=”this.style.behavior=’url(#default#homepage)’;
this.setHomePage(’http://www.apple-wallpaper.com’);” target=”_blank”>设为首页</A>
——————————————————————————-
HTML加入收藏:
1.<a href=”#” onclick=”javascript:window.external.AddFavorite(’http://www.apple- wallpaper.com’,’苹果壁纸资源’)” title=”收藏本站到你的收藏夹”><font size=”-1″ color=”#FFE09E”>收藏本站</font></a>
2.<a href=”javascript:void(0);” onClick=”window.external.AddFavorite(document.location.href,document.title)”>加入收藏</a>
其他链接代码:
加入频道
<a href=”typhoon.cdf”)>加入频道</a>
邮件链接
<a href=mailto:fz2069@163.com>与我联系</a>
再将下面代码加入<body>内:
onload=”myhomepage();”
即:<body onload=”myhomepage();”>

  • Hotmail
  • LinkedIn
  • Yahoo Mail
  • Yahoo Messenger
  • Google Bookmarks
  • Share/Bookmark

getElementsByClassName IE不支持

Firefox3 已经支持 getElementsByClassName ,IE不支持,不过可以用函数模拟 getElementsByClassName 功能。
document.getElementsByClassName = function(){
var tTagName =”*”;
if(arguments.length > 1){
tTagName = arguments[1];
}
if(arguments.length > 2){
var pObj = arguments[2]
}
else{
var pObj = document;
}
var objArr = pObj.getElementsByTagName(tTagName);
var tRObj = new Array();
for(var i=0; i<objArr.length; i++){
if(objArr[i].className == arguments[0]){
tRObj.push(objArr[i]);
}
}
return tRObj;
}
测试涵数
function test(){
var obj=document.getElementsByClassName(”qq”);
for (var i=0;i<obj.length;i++){
obj[i].style.color=”#ff0000″;
}
}
function test2(){
var obj=document.getElementsByClassName(”qq”,”DIV”);
for (var i=0;i<obj.length;i++){
obj[i].style.color=”#ff0000″;
}
}
function test3(){
var myid=document.getElementById(’ok’);
var obj=document.getElementsByClassName(”qq”,”DIV”,myid);
for (var i=0;i<obj.length;i++){
obj[i].style.color=”#ff0000″;
}
}

  • Hotmail
  • LinkedIn
  • Yahoo Mail
  • Yahoo Messenger
  • Google Bookmarks
  • Share/Bookmark

IE报“缺少标识符 字符串或数字”错误的原因及解决办法

通常我是在Firefox下开发调试,在Firefox运行正常,但是在IE下就报有“缺少标识符 字符串或数字”的错误。
在网上找了找还有不少朋友有过这样的经历。
原因如下:JSON最后的一项末尾多了一个逗号。在IE中,JSON最后一项的末尾是不允许有逗号的,在FF等浏览器下则可有可无。
记录一下,下次好找,遇到同样问题的朋友希望可以帮到你。

  • Hotmail
  • LinkedIn
  • Yahoo Mail
  • Yahoo Messenger
  • Google Bookmarks
  • Share/Bookmark

ExtJS下grid的一些属性说明

ExtJS下grid的一些属性说明 1.界面修改(css style):
Extjs中界面风格与我们产品本身的风格有很大不同,从边框、选中行的颜色到鼠标移动到的行的颜色、菜单等,几乎都不同。Extjs对这些样式的设置都是由css完成的。如:
选中行的颜色就可用如下设置完成:
.x-grid3-row-selected{background:#c6e2ff!important;}
其他的都类似,只要找到对应的class, 然后设置要修改的部分即可。
2. 属性的作用(About Ext.grid. GroupingView, EditorGridPanel):
Extjs的grid功能强大,如排序、隐藏列或移动列等,这些都有一些属性与其对应,可以选择要还是不要。其中一些的属性和其作用如下:
*. EditorGridPanel:
border: false, //grid的边界
autoHeight: true, //grid的高度是否要用指定的高度
enableColumnMove: false, //grid的列是否可以移动
enableHdMenu: false, //在列的header是否要有下拉菜单
trackMouseOver: true, //当鼠标移过行时,行是否要highlight
stripeRows: [...]

  • Hotmail
  • LinkedIn
  • Yahoo Mail
  • Yahoo Messenger
  • Google Bookmarks
  • Share/Bookmark

extjs gridpanel 分页完整实例 PHP版

       这两天一直苦于没有一个完整的EXTJS,Gridpanel的PHP完整实例,加上官方英文资源和不完整的实例,相信一个新手一定会遇到一些麻烦。这不,弄了我一两天。现在贴上我的完整代码。
第一步:存储数据
记得要用store.load();方法
store.load({params:{start: 0, limit: 8}});
第二步gridpanel 部分

 
第三部分,PHP服务器端,为了简化我没有用数据库,用PHP模拟了一些数据,代码在下面。

 
一些总结我在开发中遇到的问题,第一在gridpanel里边store:store不能去掉的。
第二({params:{start: 0, limit: 8}});里边参数是每次会自动发送的,所以服务器端要用这两个名字来取。
不多说还是看代码方便吧。下载

  • Hotmail
  • LinkedIn
  • Yahoo Mail
  • Yahoo Messenger
  • Google Bookmarks
  • Share/Bookmark

用prototype.js ajax.request的例子

我的项目中要求上传文件的唯一性,相同年份和月份情况下只能有一条记录,我要实现的是当用户选完上传的文件后,事件启动调用一ajax方法去服务器端请求看有没有年重复的记录,如果有重复的记录的话则返回一个提醒问用户是否要继续覆盖上传。
其中ajax的代码为:
function CheckFilename(){
var url = ‘Page_User_Pvcount.php?action_type=ajaxCheckFilenane’;
var filename = $(’File’).value;
new Ajax.Request(url, {
method: ‘get’,
parameters: “filename=”+filename+”&year=”+$F(’year’)+”&month=”+$F(’month’),
onSuccess: function(transport) {
//alert(transport.responseText);
if(transport.responseText == ‘repeat’){
showPopup(230,110);
canUpload = 0;
goonUpload = 1;
}else{
canUpload = 1;
goonUpload = 0;
}
/*if (eval(transport.responseText) == 1){
}else{
notice.update(’Damn! You are beyond #10…’).setStyle({ background: ‘#fdd’ });
}*/
}
});
}
其中服务器端代码便省去了,就是根椐传来的年份月份和文件名去查数据库并返回结果的过程了。

  • Hotmail
  • LinkedIn
  • Yahoo Mail
  • Yahoo Messenger
  • Google Bookmarks
  • Share/Bookmark

常用js函数

一,JS删除确认框
function p_del() {
var msg = “您真的确定要删除吗?\n\n请确认!”;
if (confirm(msg)==true){
return true;
}else{
return false;
}
}
调用实除<a href=”www.yangzi520.com” onclick=”return p_del();”>删除</a>
注意红色的return 一定要加哦!
二,弹出一个对话框的层
function showPopup(w,h){
var popUp = $(”popupcontent”);
popUp.style.top = “100px”;
popUp.style.left = “510px”;
popUp.style.width = w + “px”;
popUp.style.height = h + “px”;
if (baseText == null) {
baseText = popUp.innerHTML;
}
popUp.innerHTML = baseText +       “<div id=\”statusbar\”><input type=\”button\” value=\”关闭窗口\” onClick=\”hidePopup();\”></div>”;
var sbar = document.getElementById(”statusbar”);
sbar.style.marginbottom = 15 + “px”;
popUp.style.visibility = “visible”;
}
CSS设置:
<style>
#popupcontent{
position: absolute;
visibility:hidden;
overflow: hidden;
border:1px solid [...]

  • Hotmail
  • LinkedIn
  • Yahoo Mail
  • Yahoo Messenger
  • Google Bookmarks
  • Share/Bookmark

onTriggerClick去展开第二个日历

出于用户体验的考虑,我的项目中要做到在第一个选完之后第二个不用点击日历图标而自动display(展开)Datapicker(就是那个日历),因为要做到这一步思路是先在每一个DateField触发一个事件然后用一个方法display第二个DateField。这个方法是什么呢?由于对extjs还算初学者再加上英文的资料有一些吃力所以弄了半天也没有搞定。
我的开始的代码是:
items:[
[
new Ext.form.DateField({
fieldLabel: '请选择开始时间',
id:'btn_history_more_startdate',
name: 'btn_history_more_startdate',
format: 'Y-m-d',
width: 100,
allowBlank: false,
readOnly:true,
listeners:{'select':function(){
}}
})
],[
new Ext.form.DateField({
fieldLabel: '请选择结束时间',
id:'btn_history_more_enddate',
name: 'btn_history_more_enddate',
format: 'Y-m-d',
width: 100,
allowBlank: false,
readOnly:true,
listeners:{'change':function(){
}}
})
]
]
Ext.getCmp(”第二个日历的ID’).onTriggerClick;
原因是我在查表时对于onTriggerClick方法有这样的描述
/**
     * @method onTriggerClick
     * @hide
     */
    // private
    // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker

最后一试问题解决,大喜。。。。

 

  • Hotmail
  • LinkedIn
  • Yahoo Mail
  • Yahoo Messenger
  • Google Bookmarks
  • Share/Bookmark

用JS实现搜索结果加亮

<script language=”JavaScript”>
function XP_Highlight()
{
this.KeyWords = null;
// 格式化关键词
this.formatKeyword = function(content, keyword)
{
keyword = keyword.replace(/(^\s*)|(\s*$)/g, “”);
if(keyword == ”)
return content;
var reg = new RegExp(’(’+keyword+’)’, ‘gi’);
return content.replace(reg, ‘<em>$1</em>’);
}
// 重绘内容区域
this.refreshContent = function(contentID)
{
var content = $(contentID).html();
for(var i = 0; i < keywords.length; i ++)
{
var strKey = keywords[i].toString();
var arrKey = strKey.split(’,’);
for(var j = 0; j < arrKey.length; j ++)
{
var key = arrKey[j];
content = this.formatKeyword(content, [...]

  • Hotmail
  • LinkedIn
  • Yahoo Mail
  • Yahoo Messenger
  • Google Bookmarks
  • Share/Bookmark
.... ... ...