jQuery + Webservice 를 사용해서 위와 같은 단계형 select box 를 만들어 보겠다.
'Js & Css'에 해당되는 글 30건
- 2009.11.17 jQuery + WebService 로 만드는 CasCadeSelectBox - part 1
- 2009.11.16 Open Source Wed Design - 공개 웹 디자인 소스 2
- 2009.10.21 jQuery Plugin - uploadify 1
- 2009.09.07 [jQuery] Selector
- 2009.05.21 csc 넘치는 text
- 2009.05.18 CodeHighLight - SyntaxHighlighter 2.0 사용하기 1
- 2009.05.08 페이지에서 지정된 위치로 이동
- 2009.04.22 [js] Date 개체
- 2009.04.22 [Css] TextArear 의 내용이 많아지면 Height 늘어나는 Css 2
- 2009.04.06 창닫기 타이머
jQuery + Webservice 를 사용해서 위와 같은 단계형 select box 를 만들어 보겠다.
100% 외국 사이트..
역시..
http://www.oswd.org/
http://www.freelayouts.com/websites
http://opensourcetemplates.org/
http://www.openwebdesign.org/browse.php
http://www.templateworld.com/free_templates.html
http://www.templatesbox.com/
http://templates.arcsin.se/
http://www.ex-designz.net/template/tempcat.asp?cat_id=13
http://www.code-sucks.com/free-css-templates/
http://www.oswt.co.uk/browse_designs.html
http://www.solucija.com/home/css-templates/
http://www.cssfill.com/
http://www.sixshootermedia.com/free-templates/
사용방법은 간단하다.
<input type='file, <div> 등등 이 가능하다..
'uploader': '업로드를 수행할 녀석, uploadify.swf 로 사용하며 위 경로에서 제공해준다
'cancelImg': 업로드한 파일을 보여주는 "큐"에서 파일을 지울 버튼 이미지
'multi': true : 다중 업로드 여부 true / false
'buttonText': 업로드 버튼의 문구
'displayData': 업로드시 보여줄 상태
'uploadifyClearQueue': 업로드 후 큐를 비우는 이벤트 핸들러
uploadifySettings : 제반의 설정을 한다.
"script " 업로드를 수행할 핸들러
스타일로 길이 자르기
그냥 | 가나다라마바사아자차카타파하 |
Css |
Css2 |
긴글 자동 줄바꿈
긴텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트 |
http://code.google.com/p/syntaxhighlighter/
첨부파일을 다운받는다..
13개의 .js 파일과
1개의 .css 와
1개의 .swf 파일이 있다.
각각 인클루드를 하고..
사용법은 쉽다..
<pre name="code" class="c-sharp">
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class CodeHighLight_Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
</pre>
<hr />
<pre name="code" class="c-sharp:collapse">
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class CodeHighLight_Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
</pre>
<hr />
<textarea name="code" class="c#" cols="60" rows="10">
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class CodeHighLight_Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
</textarea>
width 는 태이블로 감사서 주어야 한다 ..
웹에디터나 이런걸로 얼마든지 사용이 가능할것 같다.
2<a name="2"></a><br /><br /><br />
3<a name="3"></a><br /><br /><br />
4<a name="4"></a><br /><br /><br />
5<a name="5"></a><br /><br /><br />
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#4">4</a>
<a href="#5">5</a>
HTML 이 가장 어려웠어요..
var today = new Date();//Data객체 참조
today.getYear() //년
today.getMonth()//월0~11월, +1해줘야 함.
today.getdate() //일
today.getDay()//요일0에서 6요일
today.getHours()//시
today.getMinutes()//분
today.getSeconds() //초
예제)
var dYoil = new Array('일', '월', '화', '수', '목', '금', '토');
var dToday = new Date();
//요일
var yoil = dToday.getDay();
//시간
var hour = dToday.getHours();
alert('오늘은 ' + dYoil[yoil] + ';;' + yoil + '요일입니다\n시간은' + hour + '시입니다');
예제2) -- 주말에만 팝업을 띄우자..
<script type="text/javascript" language="javascript">
function GetCookie(NameCookie) {
var i = document.cookie.indexOf(NameCookie + '=');
if (i != -1) {
i += NameCookie.length + 1;
NameEnd = document.cookie.indexOf(';', i);
if (NameEnd == -1) {
NameEnd = document.cookie.length;
}
return unescape(document.cookie.substring(i, NameEnd));
}
else {
return "";
}
}
function window.onload() {
var jumalYn = false;
var dToday = new Date();
var yoil = dToday.getDay();
var hour = dToday.getHours();
switch (yoil) {
case 0: jumalYn = true; break;
case 1: jumalYn = false; break;
case 2: jumalYn = false; break;
case 3: jumalYn = false; break;
case 4: jumalYn = false; break;
case 5: if (hour > 16) jumalYn = true; break;
case 6: jumalYn = true; break;
default: jumalYn = false; break;
}
if (jumalYn) {
var Cookievalue = GetCookie('Tourplanner');
if (Cookievalue == "") {
var tour = window.open('http://www.naver.com', 'weekend', 'width=400,height=325');
tour.focus();
}
}
}
</script>
TextArear 의 내용이많아지면..
Height 의 속성이 저절로 늘어난다..
힏들게 자바스크립트로 제어 할려고 하다가..
이런 쉬운 방법이..
Style 속성 지정만으로 해결이 되었네..
<textarea cols="20" rows="2" name="textarea1" style="overflow: visible"></textarea>
ASP.NET 의 서버컨트롤도 동일하게 적용이 가능하다.
<asp:TextBox runat="server" ID="TextBox1" Style="overflow: visible;" TextMode="MultiLine"></asp:TextBox>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoClose.aspx.cs" Inherits="Javascript_Etc_AutoClose" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>제목 없음</title>
<script language="javascript">
// set time
var time = 5;
function checkTime()
{
if(time >= 0)
{
setTimeout(checkTime, 1000, 1);
div.innerText = time + ' second after window close';
time--;
}
else
{
clearTimeout(1);
self.close();
}
}
time = 5;
setTimeout(checkTime, 1000, 1);
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="div">
</div>
</form>
</body>
</html>