'WebPrograming/Jquery'에 해당되는 글 8건

2015.05.18 db에서 받은 배열을 json으로 전환하기
2015.05.18 ajax와 json을 이용한 회원정보 리스트 뽑아서 테이블에 뿌리기 1
2013.05.11 jQuery 플러그인 xml 을 json 객체로 변환
2013.03.20 Jquery, location.href, 페이지 이동 1
2012.11.22 [Java Script] Java Script 암호화(Packer)
2012.10.26 jQuery Ajax - getJSON예제[실습]
2012.09.24 [정보] jquery.validator 정리
2012.09.07 Web 개발자를 위한 jQuery 총 모음

2015. 5. 18. 17:37

ajax와 json을 이용한 회원정보 리스트 뽑아서 테이블에 뿌리기 (1)	2015.05.18
jQuery 플러그인 xml 을 json 객체로 변환 (0)	2013.05.11
Jquery, location.href, 페이지 이동 (1)	2013.03.20
[Java Script] Java Script 암호화(Packer) (0)	2012.11.22
jQuery Ajax - getJSON예제[실습] (0)	2012.10.26

ajax와 json을 이용한 회원정보 리스트 뽑아서 테이블에 뿌리기

WebPrograming/Jquery

=============================b.jsp===============================

<%@ page language="java" contentType="text/html; charset=EUC-KR"

pageEncoding="EUC-KR"%>

<html>

<head>

table{

border-collapse: collapse;

}

td{

border: #ABF200 solid;

}

</style>

</head>

$(document).ready(function() {

$("#con").hide()

$("#b").click(function() {

$.ajax({

url : "a.jsp", // a.jsp 의 제이슨오브젝트값을 가져옴

dataType : "json", // 데이터 타입을 제이슨 꼭해야함, 다른방법도 2가지있음

cache : false, // 이걸 안쓰거나 true하면 수정해도 값반영이 잘안댐

success : function(data) {

$("#con").html(""); // div를 일단 공백으로 초기화해줌 , 왜냐면 버튼 여러번 눌리면 중첩되니깐

$("<table/>").css({

backgroundColor : "#E4F7BA",

border : "solid 3px #E4F7BA",

}).appendTo("#con"); // 테이블을 생성하고 그 테이블을 div에 추가함

var key = Object.keys(data["memberlist"][0]); // id , pw , addr , tel 의 키값을 가져옴

$("<tr>" , {

html : "<td>" + key[1] + "</td>"+ // 컬럼명들

"<td>" + key[2] + "</td>"+

"<td>" + key[0] + "</td>"+

"<td>" + key[3] + "</td>"

}).appendTo("table") // 이것을 테이블에붙임

$.each(data.memberlist, function(index, memberlist) { // 이치를 써서 모든 데이터들을 배열에 넣음

var items = [];

items.push("<td>" + memberlist.id + "</td>"); // 여기에 id pw addr tel의 값을 배열에 넣은뒤

items.push("<td>" + memberlist.pw + "</td>");

items.push("<td>" + memberlist.addr + "</td>");

items.push("<td>" + memberlist.tel + "</td>");

$("<tr/>", {

html : items // 티알에 붙임,

}).appendTo("table"); // 그리고 그 tr을 테이블에 붙임

});//each끝

}

});

$("#con").fadeToggle("slow")

});

</script>

<body>

</body>

</html>

===================================a.jsp====================================

<%@ page language="java" contentType="text/html; charset=EUC-KR"

pageEncoding="EUC-KR"%>

<%@ page import="java.util.*" %>

<%@ page import="kr.co.seoulit.member.dao.*" %>

<%@ page import="kr.co.seoulit.member.to.*" %>

<%@ page import="net.sf.json.*"%>

MemberDAO dao=MemberDAOImpl.getInstance();

List<MemberBean> memberlist=dao.selectMemberList();

HashMap<String,Object> map=new HashMap<String,Object>();

map.put("memberlist",memberlist);

JSONObject jsonObject= new JSONObject();

jsonObject.putAll(map);

out.println(jsonObject);

http://javakorea.tistory.com/253

저작자표시 비영리 변경금지

'WebPrograming > Jquery' 카테고리의 다른 글

db에서 받은 배열을 json으로 전환하기 (0)	2015.05.18
jQuery 플러그인 xml 을 json 객체로 변환 (0)	2013.05.11
Jquery, location.href, 페이지 이동 (1)	2013.03.20
[Java Script] Java Script 암호화(Packer) (0)	2012.11.22
jQuery Ajax - getJSON예제[실습] (0)	2012.10.26

Posted by 물색없는세상

2013. 5. 11. 06:57

ajax와 json을 이용한 회원정보 리스트 뽑아서 테이블에 뿌리기 (1)	2015.05.18
jQuery 플러그인 xml 을 json 객체로 변환 (0)	2013.05.11
[Java Script] Java Script 암호화(Packer) (0)	2012.11.22
jQuery Ajax - getJSON예제[실습] (0)	2012.10.26
[정보] jquery.validator 정리 (0)	2012.09.24

[Java Script] Java Script 암호화(Packer)

WebPrograming/Jquery

자바스크립트 프로그래밍을 하다보면 종종 그런 생각이 들 때가 있다.

마우스 우클릭 한번으로 내가 쌔빠지게 짜놓은 소스를 다른 사람들이 그대로 가져가서 쓴다면..

배가 아플텐데.. 나만그런가?-_ -; 여튼.. 나같은 엉덩이에 뿔난 사람들을 위한 암호화 툴을 소개

해보고자 한다.

우선 내가 알고 있는 툴은 현재 3가지가 있다.

1. Microsoft Script Encoder

2. Packer JavaScript

3. scriptasylum.com Javascript Encoder

각각 장단이 있지만(참고 : http://www.lovelgw.com/Blog/79) ms는 인코더와 함께 디코더도

뿌리는 바람에 의미가 없고 스크립트어사일럼은.. 덩치가 너무 커진다. 나모에서 사용하는 패커

도 어사일럼같은데 정확히는 모르겠다. 비슷한 방식이다.

그래서 추천하는게 Joliclic code에서 제공하는 스크립트 인코더이다.

http://joliclic.free.fr/php/javascript-packer/en/index.php

유니코드와 브라우저 호환성이 좋다.

라이브러리를 받아다가 서버에 올려놓고 사용해도 되고,

일회성 사용자들을 위하여 사이트에서 즉시 변환해서 사용할 수도 있다.

위와 같이 소스를 넣고 [Pack]를 누르면 바로 암호화된 코드가 튀어나온다.

이걸 그대로 갖다가 붙여넣으면 된다

단, 주의할점이 두 가지 있는데,

첫 번째는 자바스크립트의 고질적인 문제인 한글 문제이다. 에러라기 보다는 깨지는 문제가 발생한다.

미리 JavaScript escapes 등을 사용해서 변환해서 사용해야 한다.

두 번째는 디코딩이 생각보다 쉽다. 디코더가 따로 있는 것은 아니지만 alert문 같은 것은 눈으로도 가능

하고 코드를 유심히 들여다보면 그리 어렵지 않게 디코딩이 가능하다. 뭐.. 디코딩이 쉬우면 무슨 인코딩

의 의미가 있겠냐마는.. 누가 하릴없이 암호화소스를 보고앉아있을까..하는생각이든다-_-a..

http://lunaticlobelia.tistory.com/49

저작자표시 비영리 변경금지

'WebPrograming > Jquery' 카테고리의 다른 글

jQuery 플러그인 xml 을 json 객체로 변환 (0)	2013.05.11
Jquery, location.href, 페이지 이동 (1)	2013.03.20
jQuery Ajax - getJSON예제[실습] (0)	2012.10.26
[정보] jquery.validator 정리 (0)	2012.09.24
Web 개발자를 위한 jQuery 총 모음 (0)	2012.09.07

Posted by 물색없는세상

2012. 10. 26. 01:16

jQuery Ajax - getJSON예제[실습]

WebPrograming/Jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btn').click(function() {
  //$.getJSON() 이용 - GetServlet : command - getJSON
  /*
  $.getJSON("../GetServlet","command=getJSON",function(data) {
   // 서블릿에서 넘겨줬을때 데이터가 JSON형태일때 사용하면 좋다.
   // data : JSON Object
   // alert(data.name);
   var str = data.id+"<br>"+data.name+"<br>"+data.age;
   $("div#first").html(str);
  });
  */
  $.getJSON("../GetServlet",{"command":"getJSON"},callback);//.getJSON은 함수 호출이 성공했을 경우만 호출이 되지만 onload는 성공하던 실패하던 실행이 된다.
});
});

package jquery.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import jquery.dto.MemberDTO;
import jquery.service.MemberService;

import org.json.JSONObject;

public class GetServlet extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String cmd = request.getParameter("command");

System.out.println(cmd);
if(cmd.equals("getJSON")){
getJSON(request,response);
}else if(cmd.equals("getData")){
getData(request, response);
}else if(cmd.equals("run")){
run(request, response);
}else if(cmd.equals("getMemberById")){
getMemberById(request, response);
}else if(cmd.equals("getMemberByIdJson")){
getMemberByIdJson(request, response);
}
}
protected void getMemberById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 요처파라미터 조회
String id = request.getParameter("id");
//2. B.L. 호출
MemberService ms = new MemberService();
MemberDTO mdto = ms.getMemberById(id);
//3. 응답
String str = "id : "+mdto.getId()+"<br>이름 : "+mdto.getName()+"<br>나이 : "+mdto.getAge();

response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
out.println(str);
out.close();
}
protected void getMemberByIdJson(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 요처파라미터 조회
String id = request.getParameter("id");
//2. B.L. 호출
MemberService ms = new MemberService();
MemberDTO mdto = ms.getMemberById(id);
//3. 응답
//JSONObject - JSON 객체 형태의 문자열(string)생성
JSONObject jObj = new JSONObject(mdto);
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
out.println(jObj.toString());
out.close();
}
protected void run(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
String name=request.getParameter("name");
String isSend = request.getParameter("isSend");
String number = request.getParameter("number");
String str = id+", "+name+", "+isSend+", "+number;
System.out.println(str);
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
out.println(str);
out.close();
}
protected void getData(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
out.println("<b>이것이 답입니다.</b><br>요청방식 : "+request.getMethod());
out.close();
}
protected void getJSON(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
HashMap map = new HashMap();
map.put("id", "abcde");
map.put("name", "홍길동");
map.put("age", 30);
JSONObject jObj = new JSONObject(map);

response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
out.println(jObj.toString());
out.close();
}

}

접기

* 결과

http://whakscjs.tistory.com/205

저작자표시 비영리 변경금지

'WebPrograming > Jquery' 카테고리의 다른 글

jQuery 플러그인 xml 을 json 객체로 변환 (0)	2013.05.11
Jquery, location.href, 페이지 이동 (1)	2013.03.20
[Java Script] Java Script 암호화(Packer) (0)	2012.11.22
[정보] jquery.validator 정리 (0)	2012.09.24
Web 개발자를 위한 jQuery 총 모음 (0)	2012.09.07

Posted by 물색없는세상

2012. 9. 24. 18:12

[정보] jquery.validator 정리

WebPrograming/Jquery

jquery 플러그인 중 하나인 jquery.validator 의 옵션을 분석(해석?)해 본 겁니다.
뭐 별 쓸데도 없는 문서지만 기왕 정리한거 저 같이 영어레벨이 쎄멘바닥인 분들한테는 조금이나마 도움이 될까 하여 올려봅니다.
스프링노트에 적어두었던걸 그대로 옮긴거라 경어가 아닌점 양해바랍니다.
중간 중간 몰라서 분석 못한것도 있구요 잘못된 부분이 있을지도 모릅니다. ㅠㅠ 말씀해 주시면 수정하겠습니다.

jquery.validator

Option 정리

debug

기본값: false

디버그 할 수 있도록 입력값이 유효해도 submit 하지 않는다

$(".selector").validate({
     debug: true
})

submitHandler

폼이 submit 될때 마지막으로 뭔가 할 수 있도록 핸들을 넘겨준다.

$(".selector").validate({
     submitHandler: function(form) {
       $(form).ajaxSubmit();
     }
})

invalidHandler

입력값이 잘못된 상태에서 submit 할때 자체처리하기전 사용자에게 핸들을 넘겨준다.

<arguments>

form

validator

ignore

유효성검사에서 제외할 Element를 지정한다.

$("#myform").validate({
     ignore: ".ignore"
})

rules

체크할 항목들의 룰을 설정한다.

$(".selector").validate({
     rules: {
       // simple rule, converted to {required:true}
       name: "required",
       // compound rule
       email: {
         required: true,
         email: true
       }
     }
})

$(".selector").validate({
     rules: {
       contact: {
         required: true,
         email: {
           depends: function(element) {
             return $("#contactform_email:checked")
           }
         }
       }
     }
})

message

무효한 필드일때 왜 무효한지 설명하는 메세지를 설정한다.

$(".selector").validate({
     rules: {
       name: "required",
       email: {
         required: true,
         email: true
       }
     },
     messages: {
       name: "Please specify your name",
       email: {
         required: "We need your email address to contact you",
         email: "Your email address must be in the format of name@domain.com"
       }
     }
})

$(".selector").validate({
     rules: {
       name: {
         required: true,
         minlength: 2
       }
     },
     messages: {
       name: {
         required: "We need your email address to contact you",
         minlength: jQuery.format("At least {0} characters required!")
       }
     }
})

groups

다수의 Element를 그룹을 지어서 한쪽에서 에러메세지를 보여준다.

임의의 위치를 설정하기 위해서는 errorPlacement 안에서 할 수 있고 따로 설정이 없을경우 지정한 마지막 엘리먼트끝에 출력된다.

$("#myform").validate({
    groups: {
      username: "fname lname"
    },
    errorPlacement: function(error, element) {
       if (element.attr("name") == "fname" 
                   || element.attr("name") == "lname" )
         error.insertAfter("#lastname");
       else
         error.insertAfter(element);
     },
     debug:true
})

onsubmit

유효성체크 없이 무조건 submit 한다

$(".selector").validate({
     onsubmit: false
})

onfocusout

기본값 : true

포커스가 떠날때 유효성 검사를 한다. onkeyup도 false가 되어 있어야 눈으로 체감할 수 있다.

$(".selector").validate({
     onfocusout: false
})

onkeyup

기본값 : true

키를 뗄때 유효성검사를 한다.

$(".selector").validate({
     onkeyup: false
})

onclick

기본값 : true

checkbox 와 radio 버튼이 클릭될때 유효성 검사를 한다.

$(".selector").validate({
     onclick: false
})

focusInvalid

기본값 : true

유효성 검사 후 포커스를 해당 무효필드에 둘 것인가 여부

$(".selector").validate({
     focusInvalid: false
})

focusCleanup

기본값 : false

true 로 설정되어 있을 경우 잘못된 필드에 포커스가 가면 에러메세지를 지운다

$(".selector").validate({
     focusCleanup: true
})

meta

엘리먼트에 class="..." 형식으로 지정하려고 하는데 다른 플러그인과 겹칠경우 이를 {[이름]{옵션1, 옵션2}} 와 같이 싸서 이용할 수 있도록 한다 (이건 정확한건지는 모르겠음)

$("#myform").validate({
     meta: "validate",
     submitHandler: function() { alert("Submitted!") }
})

HTML : <input type="text" name="email" class="{validate:{ required: true, email:true }}" />

errorClass

기본값 : error

에러메세지의 CSS 클래스이름을 설정한다.

기본값은 .error 로 출력되는데 이 class 명을 바꿀 수 있다.

예를 들어 기본값일 경우에는 CSS 정의에서

.error{color:#00f}

이런식으로 사용할 수 있는데 만약 class 명을 invalid 라고 바꿨다면

.invalid{color:#00f}

라고 사용할 수 있다.

$(".selector").validate({
     errorClass: "invalid"
})

validClass

유효성체크에서 성공한 값들의 클래스이름을 설정한다.

errorClass 와 같은 개념이다.

$(".selector").validate({
     validClass: "success"
})

errorElement

에러메시지를 출력하는 엘리먼트의 태그요소를 결정한다.

errorClass의 개념과 같으나 HTML 태그를 바꾼다.

$(".selector").validate({
     errorElement: "em"
})

wrapper

에러 메세지들을 임의의 태그로 묶는다.

만약 에러메세지들이 아래와 같이 생성되었다면

<label class='error'>This field is required</label>

<label class='error'>Your lastname, please!</label>

wraper:'li' 라고 했을때

<li>

<label class='error'>This field is required</label>

<label class='error'>Your lastname, please!</label>

</li>

로 묶어버린다. 이 기능은 주로 errorLabelContainer 와 같이 사용된다.

$(".selector").validate({
     wrapper: "li"
})

errorLabelContainer

에러메세지들의 해당 무효필드 옆에 보여주는게 아니라 한곳에 묶어 보여줄때 이용된다.

출력을 원하는 위치의 엘리먼트 아이디를 써주면 된다.

$("#myform").validate({
     errorLabelContainer: "#messageBox",
     wrapper: "li",
     submitHandler: function() { alert("Submitted!") }
})

errorContainer

기존 상세 에러메세지 외에 대표적 에러메세지를 보여줄때 사용한다.

예를 들어 아래와 같다.

아이디 : 아이디가 입력되지 않았습니다. <== 기존 상세에러메세지

비밀번호 : 비밀번호가 입력되지 않았습니다 <== 기존 상세에러메세지

***************************************************************

입력폼에 에러가 있습니다. 입력폼을 다시 확인하세요 <== 이 부분에 해당

***************************************************************

지정한 상세에러메세지가 모두 사라질 때까지 이 메세지는 사라지지 않는다.

errorContainer 로 선언한 것 중 errorLabelContainer 로 선언되지 않은 것이 이에 해당한다.

해당되는 메세지는 자동으로 입력되는 메세지가 아니다. 이건 원본의 데모페이지를 봐야 이해가 가능할거 같다.

http://docs.jquery.com/Plugins/Validation/validate 여기서 Options 탭을 눌러 검색

showErrors

에러처리를 하기전에 사용자에게 핸들을 넘겨준다. 그러므로 에러처리를 override 하거나 선행처리할 때 사용할 수 있다. 맨아래 팁이 이걸 응용한거다.

$(".selector").validate({
    showErrors: function(errorMap, errorList) {
        $("#summary").html("Your form contains "
            + this.numberOfInvalids() 
            + " errors, see details below.");
        this.defaultShowErrors();
    }
})

errorPlacement

기본값 : 무효한 필드 바로 뒤

에러 메세지의 위치를 지정할 수 있다. 이건 실험을 안해봤음. 뭐 되겠지 ^ ^;

$("#myform").validate({
    errorPlacement: function(error, element) {
       error.appendTo( element.parent("td").next("td") );
    },
     debug:true
})

success

이건 validClass 하고 똑같은 효과던데 차이가 뭔지 잘 모르겠다. 나중에 알아봐야겠다.. ㅜㅜ

$("#myform").validate({
     success: "valid",
     submitHandler: function() { alert("Submitted!") }
})

highlight

기본값 : errorClass 를 추가시킨다

필드가 Invalid 됐을때 어떻게 하이라이트 시킬까를 결정할 수 있다.

예를 들어 아래와 같이 페이드 인, 아웃 효과를 주는것도 가능하다 ^^

$(".selector").validate({
    highlight: function(element, errorClass) {
       $(element).fadeOut(function() {
         $(element).fadeIn();
       });
    }
})

unhighlight

기본값 : errorClass 를 제거한다.

highlight 된걸 다시 되돌릴때 무엇을 할까를 지정할 수 있다.

아규먼트는 highlight하고 동일하다.

ignoreTitle

별 필요없는 거 같다. 뭐 제거될거란 이야기인가? ㅋ 사실 잘 모르겠다 ㅜㅜ

$(".selector").validate({
     ignoreTitle: true
})

※ 팁 : invalidate 할때 페이지에 메세지를 뿌리는게 아니라 기존방식대로 경고창(alert)으로 띄우고 싶다면 아래처럼 옵션을 주면 된다.

클라이언트들이 구식방식을 선호할때가 있음 -_-;;;

jQuery.validator.setDefaults({
onkeyup:false,
onclick:false,
onfocusout:false,
showErrors:function(errorMap, errorList){
var caption = $(errorList[0].element).attr('caption') || $(errorList[0].element).attr('name');
alert('[' + caption + ']' + errorList[0].message);
}
});
< input type="text" name="mb_name" caption="이름" class="required" /> caption 은 임의로 정한 attribute 명입니다. caption="이름" 이런식으로 주면 됨

http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=72358

http://phpschool.com/link/tipntech/72358

저작자표시 비영리 변경금지

'WebPrograming > Jquery' 카테고리의 다른 글

jQuery 플러그인 xml 을 json 객체로 변환 (0)	2013.05.11
Jquery, location.href, 페이지 이동 (1)	2013.03.20
[Java Script] Java Script 암호화(Packer) (0)	2012.11.22
jQuery Ajax - getJSON예제[실습] (0)	2012.10.26
Web 개발자를 위한 jQuery 총 모음 (0)	2012.09.07

Posted by 물색없는세상

2012. 9. 7. 23:03

Web 개발자를 위한 jQuery 총 모음

WebPrograming/Jquery

원작자에 의하면 웹 개발자들이 필요로 하는 jQuery는 모두 모았다고 하네요. 신기한 것들이 많군요 ㅎ

웹 디자인하시는 분들은 아래 포스팅도 참고하시면 좋을 것 같습니다. ^^

[Design] - 웹디자인용 40가지 무료 Social Media Icon들

[Design] - 디자인 영감을 불어넣는 엄선된 웹 디자인 모음

[Awesome things] - 웹 디자이너들에게 영감을 줄 수 있는 Single-page 웹사이트 9개

jQuery is a great and powerful tool, and every web developer should use it. One of the problems is that when you don’t know how to create something in jQuery, you start searching for solutions on the web and you’ll lose a lot of time doing it. The main advantage of a toolbox is that you have everything(uh, or almost) that you need in a single place, and with this thing in mind I have created this post. In this article you have almost every jQuery plugins that need when designing a web application. I hope you’ll like it.

Charts and Presentations

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

jqChart – HTML5 jQuery Chart Plugin

Draws charts and graphs with modern and minimal code. Cross-browser support – works with IE 6+, Firefox, Google Chrome, Opera, Safari.

Arbor

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.

Wijmo jQuery UI Widgets

Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts. If you know jQuery, you know Wijmo. Complete with documentation and professional support, every widget is hand-crafted and includes premium themes.

Sliders and Accordions

Slider Kit

The purpose of Slider Kit is to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus) into one lightweight and flexible plugin combined with ready-to-use CSS skins.

Awkward Showcase

Awkward Showcase is a plugin for the JavaScript Framework jQuery. We call it a Content Slider. But it can do more then just slide the content. For example you can add tooltips, enable thumbnails, activate dynamic height and lots more.

Horinaja

Horinaja is a ready-to-use slide-show implementation, utilizing either scriptaculous/prototype or jQuery. Horinaja is innovative because it allows you to use a mousewheel for navigation. When the mouse is outside of the slide-show area, it scrolls. When hovering over the slide-show, the scrolling pauses.

Feature List

Simple and easy creation of an interactive “Featured Items” widget.

slideIO – A Simple In/Out Slideshow

This is a simple jQuery slideshow plugin based on one effect: sliding in and out (well, it also does a fade if you want).

Smooth Div Scroll

Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no visible controls (unless you want to) since the scrolling is done using hotspots within the scrollable area or via autoscrolling.

Alert Windows and Prompts

Apprise

An alert alternative for jQuery that looks good. Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality. Apprise is, more or less, for the developer who wants an attractive alert or dialog box without having to download a massive UI framework.

jReject: jQuery Browser Rejection

Reject provides a simple, robjust, light-weight way to display rejections based on a the browser, specific browser version, specific platforms, or rendering engine. Provides full customization of the popup. Uses no CSS file (by default), and can easily be used on page load or during a specific page events. Also provides a flexible way to display custom browser alternatives in the popup.

jQuery MSG Plugin

Back in the old days we use‘alert(‘blah blah’);’ to show users a message or a warning.It is functionable but not pretty. So I used to use BlockUI instead.Later on I found out I don’t need all the features it has and I want it to beeasiler to customize. So I write my own simpler version called MSG.It can only block the whole window, it has theme suuport, afterBlock and beforeUnblockevent, … etc, and it’s only 4 kb uncompressed with code comments.

Subscriber Traffic Pop

Subscriber Traffic Pop is the hottest new way to gain newsletter, email list subscribers in high volume with no work. The revolutionary Traffic Pop idea has been extended into a whole new category with email subscriptions!

Color Pickers

Color Picker – jQuery Plugin

A simple component to select color in the same way you select color in Adobe Photoshop.

jQuery color plugin xcolor

The xcolor plugin is an easy-to-use jQuery extension to manipulate colors in all imaginable combinations. This plugin implements an extensiv color parser and a featureful set of color-manipulation methods. There is also an animate() extension to smooth CSS colors. Another useful method isReadable() completes the whole, by allowing you to check if a text is readable on a certain background. The color value can also be passed in different color models: RGB, HSV/HSB, HSL and their adequate alpha extensions.

HeatColor

HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a “heat” color based on its derived value’s position within the range.

Drag and Drop

DragSoft

A lightweight javascript file that provides the ability to sort lists using drag and drop. Built on the jQuery framework.

easyDrag jQuery Plugin

EasyDrag is a plugin aimed to provide a simple way of adding drag-and-drop functionality to DOM elements. It features the ability to set functions to be called on drag and on drop events.

Form Validation

Credit Card Validation

Here’s an improved credit card validation extension for the jQuery Validation plugin. This lets you pass the credit card type into the validation routine, which allows it to do card type specific checks for prefix of the card number and number of digits. This extension includes the mod-10 check (based on the Luhn Algorithm) that is used in the core creditcard validation routine. As an extra bonus, it will ignore spaces and dashes in the card number. This code was ported from this credit card validation routine by John Gardner, with some minor tweaks and additions.

jFormer

jFormer is a form framework written on top of jQuery that allows you to quickly generate beautiful, standards compliant forms. Leveraging the latest techniques in web design, jFormer helps you create various web forms.

Ajax Fancy Captcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.

jQuery slideLock Plugin

slideLock adds a jQuery UI slider along with labels and notes to any form you wish as an alternative to traditional CAPTCHA. The user simply slides the form to unlock the submit button and then both client side and server side validation techniques ensure secure submission of the form.

jQuery validVal

jQuery.validVal is a plugin designed to simplify form validation. It is highly customizable, very feature rich and can easily be dropped on any type of HTML-form (even AJAX- and HTML5-forms) with very little effort.

Inline Edit and Editors

CLEditor

CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.

jQuery CodeExplorer Plugin

CodeExplorer is an enitrely unique code formatting plugin that will not only format the code with colors and spacing, but will also display it in an entire folder structure.

RapidEdit

The RapidEdit plugin makes it possible to edit any content on your website without reloading the page even once. The plugin provides a simple edit-link on elements marked with the class ‘editable’ (this is the default class, can be changed) which replace the content of the element with a textarea, where the content can be edited, when clicked. To make the plugin as customizable as possible, loads of settings are provided so you can change it to fit your needs and it also supports the MetaData plugin and the WYSIWYG-editor TinyMCE.

Rating Plugins

jRating

Rating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every detail from” the number of the stars” to “if the stars can represent decimals or not”. There is also an option to display small or big stars and images can be changed with any other file easily.

jQuery Opineo Plugin

Opineo allows you to do all of this and much more without signing up for an account or hire an expert. This DIY tool enables you to listen to your customers’ voice easily and instantly. All you have to do is go online, design your widget and place it on your website.

Social Bookmarking

Twitter Friends Widget

There is a Facebook fans widget, Google friends widget, what about a Twitter friends widget?! Here is a jQuery plugin that you can embed anywhere to display pictures of your Twitter followers or friends (whom you follow) and their latest tweets if you like.

A jQuery Twitter Ticker

A pure jQuery & CSS twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases. As a result, the ticker will be easily included into any web page and easily modified to your likings.

jQuery LiveTwitter

LiveTwitter is a lightweight, realtime updating Twitter plugin for jQuery. You can use it to show a stream of tweets based on search queries, tweets from a specific user or a list. You can also filter the tweets by geographic location, language etc.

Sponsor Flip Wall With jQuery & CSS

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

출처 : Top design magazine

http://menguy.tistory.com/532

저작자표시 비영리 변경금지

'WebPrograming > Jquery' 카테고리의 다른 글

jQuery 플러그인 xml 을 json 객체로 변환 (0)	2013.05.11
Jquery, location.href, 페이지 이동 (1)	2013.03.20
[Java Script] Java Script 암호화(Packer) (0)	2012.11.22
jQuery Ajax - getJSON예제[실습] (0)	2012.10.26
[정보] jquery.validator 정리 (0)	2012.09.24

Posted by 물색없는세상

배워서 남주자!

'WebPrograming/Jquery'에 해당되는 글 8건

db에서 받은 배열을 json으로 전환하기

'WebPrograming > Jquery' 카테고리의 다른 글

ajax와 json을 이용한 회원정보 리스트 뽑아서 테이블에 뿌리기

'WebPrograming > Jquery' 카테고리의 다른 글

jQuery 플러그인 xml 을 json 객체로 변환

'WebPrograming > Jquery' 카테고리의 다른 글

Jquery, location.href, 페이지 이동

'WebPrograming > Jquery' 카테고리의 다른 글

[Java Script] Java Script 암호화(Packer)

'WebPrograming > Jquery' 카테고리의 다른 글

jQuery Ajax - getJSON예제[실습]

'WebPrograming > Jquery' 카테고리의 다른 글

[정보] jquery.validator 정리

jquery.validator

Option 정리

'WebPrograming > Jquery' 카테고리의 다른 글

Web 개발자를 위한 jQuery 총 모음

Charts and Presentations

Sliders and Accordions

Alert Windows and Prompts

Color Pickers

Drag and Drop

Form Validation

Inline Edit and Editors

Rating Plugins

Social Bookmarking

'WebPrograming > Jquery' 카테고리의 다른 글

카테고리

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크

달력

티스토리툴바

« 2024/4 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30