Archive for the Category 前端开发

 
 

8个JQuery拖放插件

Web2.0很重要的一个特征就是交互性的强化，而拖放的引入，可以起到很好的交互效果，JQuery UI包已经包含了拖放，但拖放的应用不只应用于层的拖拉，接下来明河推荐几个独到的应用拖放的JQuery插件。

明河是推荐直接使用jquery UI包中的拖放，当你的需求jquery 拖放UI无法满足时，不妨看下以下插件。

1、Superfun

示例中演示了对倾斜容器的拖放，当然这个demo不兼容IE。

2、CropZoom

拖放在图片剪切中的应用，这个朋友么应该不陌生，这个jquery插件的强大之处在于，你不只可以改变剪切区域，还可以控制图片大小，以及图片的旋 转。

3、Jquery Iviewer

这款jquery插件可当做web地图的基础模型，对web地图有兴趣的朋友很有参考意义。

4、Dragscrollable

当你在容器内进行拖拉时滚动条也会随之滚动，明河觉得有意思的地方在于标尺。

5、Table Drag and Drop JQuery plugin

表格行数据拖放。

6、 jquery mb.containerPlus

华丽的弹出窗体拖拉，你可以自由的控制弹出的窗体。

7、Creating a Draggable Sitemap with JQuery

可拖放的站点地图……貌似实际意义不大。

8、jQuery Reel Plugin

这个插件很有意思，产生类似全景的效果。

八月 5th, 2010 | 前端开发, 未分类 | Tags: | 0 Comments

30款漂亮的jQuery提示气泡插件

工具提示在网站上都是小东西，可以在网站设计发挥大的作用。如果您网站上的工具提示是很有见地的，看起来惊人那么它可以举起你的网站访客的印象。这就是为什么来这里jQuery来帮助作出了良好的工具提示。请记住，所有这些小东西让你的网站设计网站好看。
所以这一次我会告诉你我的jQuery插件工具提示前30名。

1. Dynamic tooltip

Very cool tooltip! It’s very well made because it consists of cool transition effects and it also has a transparency and a drop shadow effect.

flowplayer-dynamic-tooltip-jquery-tooltip-plugin-for-web-design

2. Popup Bubble

Brilliant tooltip! It looks so simple but it has awesome transition effects. This tooltip could be very useful for clean and simple websites.

dvq-popup-bubble-jquery-tooltip-plugin-for-web-design

3. jQuery Horizontal Tooltips Menu Tutorials

Beautifully made tooltip! This tooltip never disappears but follows when you hover over other links. Such a simple looking tooltip but its animation is brilliant.

queness-horizontal-tooltips-menu-tutorials-jquery-tooltip-plugin-for-web-design

4. Prototip

A lot of various very good looking tooltips which look awesome and have beautiful effects. Brilliant peace of work!

nickstakenburg-prototip-jquery-tooltip-plugin-for-web-design

5. Coda Popup Bubble

Very nice tooltip with cool transition effect and it also has a drop shadow.

jqueryfordesigners-coda-popup-bubble-jquery-tooltip-plugin-for-web-design

6. Awesomeness

Cool tooltip with nice transition effect and cool transparent border around it.

nettuts-s3-cdn-plus-awesomeness-jquery-tooltip-plugin-for-web-design

7. TipTip

Beautifully made tooltip with fade in / out transition effects, transparency and drop shadow effect.

code-drewwilson-tiptip-jquery-tooltip-plugin-for-web-design

8. (mb)Tooltip

Beautifully made tooltip with nice transition for input fields.

pupunzi-mb-tooltip-jquery-tooltip-plugin-for-web-design

9. vTip

Simple but well made tooltip with a fade in transition effect. It has a cool looking border around it and when this tooltip appears, it also follows your mouse.

vertigo-project-vtip-jquery-tooltip-plugin-for-web-design

10. jGrowl

Cool tooltip which appears when you click on the link and then it sticks on the right-top corner of your window, and disappears after some time or when you close it manually by clicking on the close button. It also has fade in / out transition effects.

stanlemon-jgrowl-jquery-tooltip-plugin-for-web-design

11. jQuery Ajax Tooltip

Interesting tooltip which can handle image and text together like a mini page. It has a drop shadow effect.

rndnext-blogspot-jquery-ajax-tooltip-jquery-tooltip-plugin-for-web-design

12. Digg-style post sharing tool with jQuery

Cool digg-style post sharing tool. This tooltip could be very useful for social networking website.

queness-digg-style-post-sharing-tool-jquery-tooltip-plugin-for-web-design

13. Input Floating Hint Box

Interesting tooltip with rounded corners for input fields. Tooltip fades in when you click on the input field and fades out when you click somewhere else.

nicolae-namolovan-googlepages-input-hint-box-jquery-tooltip-plugin-for-web-design

14. Simpletip

Beautifully made tooltip with fade transitions. When you hover over a link, a tooltip fades in just above or below the link.

simpletip-craigsworks-jquery-tooltip-plugin-for-web-design

15. qTip

Very simple but good looking tooltip. This tooltip is available with rounded corners and also as a speech bubble tip.

craigsworks-qtip-jquery-tooltip-plugin-for-web-design

16. Orbital Tooltip

Interesting tooltip plugin where you can set manually where your tooltip will show up.

userfirst-orbital-jquery-tooltip-plugin-for-web-design

17. Inline HTML Tooltip

Cool tooltip with nice transition effects.

javascriptkit-inline-html-tooltip-jquery-tooltip-plugin-for-web-design

18. tipsy

Interesting good looking tooltip which appears above, below, on the right or left side of the link.

onehackoranother-tipsy-jquery-tooltip-plugin-for-web-design

19. Easiest jQuery Tooltip Ever

Simple tooltip but it could be useful to display an image when you hover over a link.

cssglobe-easiest-jquery-tooltip-ever-jquery-tooltip-plugin-for-web-design

20. BsTip

Various simple tooltips with fade in and fade out transition effects and border around them.

benchsketch-bstip-jquery-tooltip-plugin-for-web-design

21. EZPZ Tooltip

Very simple tooltip with border around it, which follows your mouse.

theezpzway-ezpz-jquery-tooltip-plugin-for-web-design

22. BeautyTips

Nice balloon style tooltip with transparency effect. There are available various tooltip styles, even interesting tooltips with cool animation, so you can choose one that fits best for your needs.

lullabot-beautytips-jquery-tooltip-plugin-for-web-design

23. Tooltip

Various tooltip plugins for your website. Here you can find a simple tooltip with a nice fade transition and also you can find a good looking bubble style tooltip.

bassistance-tooltip-jquery-tooltip-plugin-for-web-design

24. clueTip

Simple tooltip which shows up when you hover over a link and stays until you close it.

plugins-learning-jquery-cluetip-jquery-tooltip-plugin-for-web-design

25. Creating A Simple Tooltip Using jQuery and CSS

Few simple but different tooltips.

demos-blufusion-jquery-tooltips-jquery-tooltip-plugin-for-web-design

26. BetterTip

Tooltip which appears on the right side of the link.

edgarverle-bettertip-jquery-tooltip-plugin-for-web-design

27. jTip

This is simple but useful tooltip for login form.

codylindley-jtip-jquery-tooltip-plugin-for-web-design

28. jqTooltip

Simple tooltip with ajax loaded content. It has fade in and fade out transition effects.

hernan-amiune-jqtooltip-jquery-tooltip-plugin-for-web-design

29. Pop!

Simple tooltip which shows up when you click on the arrow button and disappears when you click somewhere else.

pop-seaofclouds-pop-jquery-tooltip-plugin-for-web-design

30. Create a Simple CSS + Javascript Tooltip with jQuery

Simple tooltip with rounded corners. It follows your mouse movements.

queness-simple-css-javascript-tooltip-jquery-tooltip-plugin-for-web-design

七月 28th, 2010 | 前端开发 | Tags: , , | 0 Comments

DW jQuery代码提示(不需要Adobe Extensionan安装)

这篇文章要面对一下同学

1.使用绿色版Dreamweaver无法安装jquery_api_for_dw4.mxp
2.DreamweaverCS5无法与Adobe Extensionan连接安装mxp扩展
3.总知道就是无法安装jQuery代码提示
下面是最新的绿色解决方法，跳过Adobe Extensionan手动安装jquery提示mxp扩展

Step1.下载jquery_api_for_dw5.rar(点击下载)

Step2.把shared、Extensions、codehints三个文件夹复制到
WinXP:C:\Documents and Settings\Administrator\Application Data\Adobe\Dreamweaver CS5\zh_CN\Configuration
win7:C:\Users\Administrator\AppData\Roaming\Adobe\Dreamweaver CS5\zh_CN\Configuration

Step3.启动Dreamweaver CS5

Step4.Enjoy it

七月 27th, 2010 | 前端开发 | Tags: , | 0 Comments

jQuery对下拉框、单选框、多选框的处理

从本blog的日志可以看出，2007年初开始关注jQuery，已经有两年的时间了，在这两年时间里，更多的还是将jQuery当做一个很好用的工具直接运用到实际的项目和产品中。

在这期间遇到过很多jQuery的问题，没有及时的记录下来，再次遇到的时候，依旧还是得重新来过。所以决定记录下来，方便我自己查阅，也方便他人。

下拉框：

//得到下拉菜单的选中项的文本(注意中间有空格)
var cc1 = $(".formc select[@name='country'] option[@selected]").text();

//得到下拉菜单的选中项的值
var cc2 = $('.formc select[@name="country"]').val();

//得到下拉菜单的选中项的ID属性值
var cc3 = $('.formc select[@name="country"]').attr("id");

//清空下拉框//
$("#select").empty();$("#select").html('');

//添加下拉框的option
$("<option value='1'>1111</option>").appendTo("#select");

稍微解释一下:

select[@name='country'] option[@selected]

表示具有name 属性，并且该属性值为’country’ 的select元素里面的具有selected 属性的option 元素。可以看出有@开头的就表示后面跟的是属性。

单选框：

//得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@checked]").val();

//设置单选框value=2的为选中状态.(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked');

复选框：

//得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").val();

//由于复选框一般选中的是多个,所以可以循环输出
$("input[@type=checkbox][@checked]").each(function(){
alert($(this).val());
});

//不打勾
$("#chk1").attr("checked",'');

//打勾
$("#chk2").attr("checked",true);

//判断是否已经打勾
if($("#chk1").attr('checked')==undefined){}

已经很久没有发过技术性的文章了，其实是积攒了很多在wordpress的后台，只是没有时间整理发布出来，逐渐整理发布出来吧。

Tag: ,

kimi at 2009-01-16 11:07:53 in JavaScript

四月 8th, 2010 | 前端开发 | Tags: , , , | 0 Comments

PHP 数组转化为字符串

$Array=array(
“text1″ => “textone”,
“text2″ => “texttwo”,
);
$string=serialize($Array);
$Array=unserialize($string);
print($Array);

四月 4th, 2010 | 前端开发 | Tags: , , , , | 0 Comments

[心得] 12个Flex常用功能代码

1。 复制内容到系统剪贴板

  1. System.setClipboard(strContent);

复制代码

2。 复制一个ArrayCollection

  1.    //dummy solution( well, it works )
  2.    var bar:ArrayCollection = new ArrayCollection();
  3.    for each ( var i:Object in ac ){
  4.        bar.addItem( i );
  5.    }
  6.    // fantastic ! //
  7.    var bar:ListCollectionView = new ListCollectionView( ListCollectionView( ac ).list );
  8.    

复制代码

3。 打开一个新浏览器窗口

  1. navigateToURL(new URLRequest(‘http://ntt.cc’), ‘_blank’);

复制代码

4。 刷新浏览器

  1. navigateToURL(new URLRequest(“javascript:location.reload();”),”_self”)

复制代码

5。 关闭浏览器

  1. navigateToURL(new URLRequest(“javascript:window.close()”),”_self”);

复制代码

6。 设置Alert 窗口的背景为透明

  1. Alert
  2.     {
  3.     modalTransparency:0.0;  
  4.     modalTransparencyBlur:0;
  5.     }

复制代码

7。 取随机颜色

  1. lbl.setStyle(‘color’, 0xffffff*Math.random());

复制代码

8。 清除子串左侧空格

  1. public function LTrim(s : String):String
  2.     {
  3.       var i : Number = 0;
  4.       while(s.charCodeAt(i) == 32 || s.charCodeAt(i) == 13 || s.charCodeAt(i) == 10 || s.charCodeAt(i) == 9)
  5.       {
  6.         i++;
  7.       }
  8.       return s.substring(i,s.length);
  9.     }

复制代码

9。 清除字串右侧空格

  1. public function RTrim(s : String):String
  2.     {
  3.       var i : Number = s.length – 1;
  4.       while(s.charCodeAt(i) == 32 || s.charCodeAt(i) == 13 || s.charCodeAt(i) == 10 ||s.charCodeAt(i) == 9)
  5.       {
  6.         i–;
  7.       }
  8.       return s.substring(0,i+1);
  9.     }

复制代码

10。 清除字串左右的空格

  1. public function Trim(s : String):String
  2.     {
  3.       return LTrim(RTrim(s));
  4.     }

复制代码

11。 获取数据类型

  1. getQualifiedClassName(data)

复制代码

12。 生成随机字符串。

  1. private function GenerateCheckCode():String
  2.    {
  3.        //init
  4.        var ran:Number;
  5.        var number:Number;
  6.        var  code:String;
  7.        var checkCode:String =”";
  8.        //get 4 radom
  9.       for(var i:int=0; i<4; i++)
  10.       {
  11.           ran=Math.random();
  12.           number =Math.round(ran*10000);            //get result like 0.1234
  13.           if(number % 2 == 0)
  14.             code = String.fromCharCode(48+(number % 10));        //0’s ASCII code is 48
  15.           else
  16.             code = String.fromCharCode(65+(number % 26)) ;        // A’s ASCII code is 65
  17.           checkCode += code;
  18.       }
  19.       return checkCode;
  20.   }

复制代码

三月 25th, 2010 | 前端开发 | Tags: | 0 Comments

使用BindingUtils绑定数据源的例子

//绑定数据
   var binding:BindingUtils=new BindingUtils();
   BindingUtils.bindProperty(view.helpTree,”dataProvider”,treeData,["node"]);
   view.helpTree.addEventListener(ListEvent.ITEM_CLICK,itemClick);
   view.showImage.addEventListener(ProgressEvent.PROGRESS,loadingProgressHandle);
   view.showImage.addEventListener(Event.COMPLETE,loadingCompleteHandle);

十二月 29th, 2009 | 前端开发 | Tags: , | 0 Comments

smarty模版

smarty模版截取字符串时,想让它自动先排除HTML标签

{$articlechoose[0].content | strip_tags}> 可以过滤掉所有html标签

{$articlechoose[0].content | truncate:100}截取字符

十二月 27th, 2009 | 前端开发 | Tags: | 0 Comments

关于flex快捷键的说明

Ctrl-F11: 执行（Run）
F11: 除错（Debug）
Ctrl-Alt-Down: 重复目前所在编辑列（Repeat current line ）
Alt-Up: 移动本列，或选择列往上移动（Move line (or selection) up ）
Alt-Down: 移动本列，或选择列下往移动（Move line (or selection) down ）
Ctrl-Click: 移至定义区（Go to definition (also F3) ）
Ctrl-D: 删除本列（Delete line ）
Alt-/: 文字自动完成（Word completion (cycles through possible matches)）
Ctrl-Up: 捲轴向上（Scroll up ）
Ctrl-Down: 捲轴向下（Scroll Down ）
Shift+F2    弹出帮助窗体，显示选中标签的上下文帮助
F1          在IDE内显示上下文帮助
F3          显示当前选中标签的类定义
CTRL+0       在代码视窗显示大纲
CTRL+SHIFT+C  加注释

【xpage补充】
加几个常用的：
Ctrl+Shift+T：打开Class搜索框
Ctrl+Shift+R：打开资源搜索框
Ctrl+Shift+O：组织导入
Ctrl+M：最大化/恢复当前编辑框

【dzq补充】
Ctrl+Shift+L： 所有快捷键提示

【morningyi补充】
Ctrl+/：行注释

十二月 17th, 2009 | 前端开发 | Tags: | 0 Comments

数组处理中的array_unique()与array_merge()

array_unique()定义和用法

array_unique() 函数移除数组中的重复的值，并返回结果数组。 当几个数组元素的值相等时，只保留第一个元素，其他的元素被删除。 返回的数组中键名不变。

提示和注释

注释：被返回的数组将保持第一个数组元素的键类型。

例子

<?php
$a=array("a"=>"Cat","b"=>"Dog","c"=>"Cat");
print_r(array_unique($a));
?>

输出：

Array ( [a] => Cat [b] => Dog )

array_merge()定义和用法

array_merge()数组的作用是将一个或多个数组合并为一个数组。

Example 1 案例1

<?php
$a1=array("a"=>"Horse","b"=>"Dog");
$a2=array("c"=>"Cow","b"=>"Cat");
print_r(array_merge($a1,$a2));
?>

The output of the code above will be: 上述代码将输出下面的结果：

Array ( [a] => Horse [b] => Cat [c] => Cow )

Example 2 案例2

Using only one array parameter. 仅使用一个数组参数：

<?php
$a=array(3=>"Horse",4=>"Dog");
print_r(array_merge($a));
?>

The output of the code above will be: 上述代码将输出下面的结果：

Array ( [0] => Horse [1] => Dog )

 

十一月 26th, 2009 | 前端开发 | Tags: , , | 0 Comments