Ultimate PHP inline code for SQL Query?

Posted by admin in Programming on 2008년 10월 29일

I dont’t know what it is Ultimate code.

"
WHERE
    ...
    ".(($t=getProductmeta('service_out_users',$_GET['id']))?" AND users.user_id NOT IN ({$t}) ":"")."
"

는 다음과 같은 의미이다.

if ( $t = getProductmeta('service_out_users',$_GET['id']) )
    echo " AND users.user_id NOT IN ({$t}) ";
else
    echo "";

그런데 이를 inline 으로 구현을 할 때, $var = XXX 를 다음 단인 ? 다음의 영역에서 $var 를 인식하지 못한다. 이를 일부러 인식시키기 위해 ($var = XXX) 와 같이 if 문 처럼 비교하는 구문에 괄호를 넣어주었다.

, ,

댓글 없음

Very simple Javascript dialog like Lightbox

Posted by admin in Programming on 2008년 10월 27일

폼을 전송할때 다른 버튼이나 폼을 클릭 및 수정하지 못하도록 하기 위해, Lightbox 와 같이 메시지를 보내는게 어떨까 해서 이제까지는 jQuery 의 jQuery-UI 를 사용하다가 dialog 를 사용하기 위해 무거운 jQuery-UI 를 사용한다는게 항상 마음에 걸려, jQuery-UI 를 참고로 하여 가장 간단하다고 자부할만한 Javascript dialog 를 구현해 보았다.

이를 구현하기 위해서는 jQuery 가 필요하다.

jQuery 는 단지 Cross Browsing 을 하기 위해 사용하였으므로, 코딩에 조예가 깊으신 분께서 사용하실 때에는 더욱 맛깔스러운 코드로 재창조 하여 사용하실것을 믿어 의심치 않으며…

/*
    Simple modal dialog for jQuery
*/
function simpleDialog(data) {
 
    if ( !data.width || !data.height )
        return 0;
 
    var wnd  = $(window), doc = $(document);
    var left = wnd.width() / 2 - data.width / 2;
    var top  = wnd.height() / 2 - data.height / 2 + doc.scrollTop() - 50;
 
    dialog = ''
    + '<div class="dialog-all dialog-overlay" style="width:'+doc.width()+'px;height:'+doc.height()+'px;border-width:0pt;margin:0pt;padding:0pt;background:white none repeat scroll 0% 0%;position:absolute;top:0pt;left:0pt;opacity:0.5;-moz-background-clip:-moz-initial;-moz-background-origin:-moz-initial;-moz-background-inline-policy:-moz-initial;z-index:1001;"></div>'
    + '<div class="dialog-all dialog-wrap" style="top:'+top+'px;left:'+left+'px;width:'+data.width+'px;height:'+data.height+'px;overflow:hidden;display:block;position:absolute;z-index:1002;outline-color:-moz-use-text-color;outline-style:none;outline-width:0pt;border:7px solid #DDD;background:white;">'
    +    '<div style="color:#000; float:right; padding:2px 4px; font-size:16px;"><strong><a href="javascript:;" style="text-decoration:none;color:red;" onclick="$(\'.dialog-all\').remove();">&nbsp;x&nbsp;</a></strong></div>'
    +    '<div style="color:#000; padding:4px 6px; background-color:#FC6;font-size:16px"><strong>'+data.title+'</strong></div>'
    +    '<div style="color:#333; padding:10px;">'+data.message+'</div>'
    + '</div>';
 
    $(dialog).appendTo('body');
}

코드를 보면 쉽게 이해가 된다.

[ 사용법 ]

simpleDialog({
    width:300, height:100,
    title:"Alert",
    message:'<div style="font-size:16px;font-weight:bold;text-align:center;padding-top:15px;"><img src="../images/progress.gif" alt="Saving..." border="0" /> 保存しています…</div>'
});

- Reference

, , ,

댓글 없음

Javascript includes in Javascript

Posted by admin in Programming on 2008년 10월 27일

JavaScript 를 JavaScript 에서 include 를 하는 방법을 생각해 보다가, 구글링을 해 보았다. document.write 를 이용하는 간단한 방법에서 부터 DOM Element 를 이용하는 방법까지 아주 다양~ 하게 나와 있는게 아닌가? 그 중에서 DOM Element 를 사용하는 방법을 이용해 보기로 했다.

function include_dom(script_filename) {
    var html_doc = document.getElementsByTagName('head').item(0);
    var js = document.createElement('script');
    js.setAttribute('language', 'javascript');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', script_filename);
    html_doc.appendChild(js);
    return false;
}

말이 필요없다고 본다.

<header></header>사이에 JavaScript 코드를 삽입한다.

주의할점은, include 를 처리하는 스크립트를 include 할 때, include 되는 스크립트의 include 코드는 절대경로여야 한다. Javascript 는 모두 부모 html 의 head element 의 직접적인 child 이기 때문이다. - 언어적으로 문제가 있는 말 같지만 가장 이해하기 쉽게 쓰지 않았나 싶다. :P -

Adds:

이 스크립트는 Safari 2.0 이나 IE 7.0 에서 동작하지 않는다. DOM 관련 처리를 뒤로 미루기 때문으로 생각되는데, 아래와같이 해결.

..
document.write('<script type="text/javascript" src="'+path+'"><\/script>');
..

Simple is beautiful. :)

- Reference

,

댓글 없음

fgetcsv function for Japanese in PHP

Posted by admin in Programming on 2008년 10월 21일

CSV 파일을 PHP에서 바로 파싱하여 읽어들이는 함수 fgetcsv 라는 함수가 있다. 하지만 이 함수가 일본어에서는(아마도, 2Byte) 제대로 동작하지 않아서 구현을 해 볼까 하다가 구글링을 하니 웬걸~ 이미 다른 분이 만들어 놓으신 것이 아닌가?

상당히 좋은 코드여서 소개를 한다.

/*
    http://saboten009.blogspot.com/2007/05/fgetcsv.html
    
    http://www.phppro.jp/qa/371
    
    from yossy
    文字化け対処方法について
    解決されたようですが、私も以前まったく同じ現象で悩んだ経験があります。。。
    最終的な回避策は上記同様の方法（自分で文字列をパース）となりました。
    ただ、explodeでの文字列分割だとダブルクオートで囲われた文字列にカンマが含まれた場合や
    改行を含む文字列の場合に正しくパースできなくなってしまう可能性があります。
    なのでRFC4180（CSV形式のRFC）に準拠したCSVファイルをパースする関数を作りました。
    ご参考程度にどうぞ。使い方は既存のfgetcsv関数と同様です。
*/
function fgetcsv_reg (&$handle, $length = null, $d = ',', $e = '"') {
 
    $d = preg_quote($d);
    $e = preg_quote($e);
    $_line = "";
    $eof = false; // Added for PHP Warning.
 
    while ( $eof != true ) {
 
        $_line .= (empty($length) ? fgets($handle) : fgets($handle, $length));
        $itemcnt = preg_match_all('/'.$e.'/', $_line, $dummy);
        if ($itemcnt % 2 == 0) $eof = true;
    }
 
    $_csv_line = preg_replace('/(?:\\r\\n|[\\r\\n])?$/', $d, trim($_line));
    $_csv_pattern = '/('.$e.'[^'.$e.']*(?:'.$e.$e.'[^'.$e.']*)*'.$e.'|[^'.$d.']*)'.$d.'/';
 
    preg_match_all($_csv_pattern, $_csv_line, $_csv_matches);
 
    $_csv_data = $_csv_matches[1];
 
    for ( $_csv_i=0; $_csv_i<count($_csv_data); $_csv_i++ ) {
    
        $_csv_data[$_csv_i] = preg_replace('/^'.$e.'(.*)'.$e.'$/s', '$1', $_csv_data[$_csv_i]);
        $_csv_data[$_csv_i] = str_replace($e.$e, $e, $_csv_data[$_csv_i]);
    }
    
    return empty($_line) ? false : $_csv_data;
}

이런식으로 응용해 보았다.

파일을 읽어들여 UTF-8 로 변환 후 배열로 반환한다.

function getArrayfromCSV($_filename) {
 
    $PAGE_DATA = array();
 
    $handle = fopen($_filename, "r");
    while (($data = fgetcsv_reg($handle, 8192, ",")) !== FALSE) {
 
        $UTF8data = array();
 
        foreach ( $data as $key => $value ) {
            $UTF8data[$key] = mb_convert_encoding($value, "UTF-8", "auto");
        }
 
        $PAGE_DATA[] = $UTF8data;
    }
    fclose($handle);
    
    return $PAGE_DATA;
}

- References

  • 위 코드의 코멘트 아웃을 참조.

, ,

댓글 없음

Simple calendar code in PHP

Posted by admin in Programming on 2008년 10월 21일

프로그래밍을 하다보면 종종 달력을 만들어야 하는 경우가 있다. 그렇게 어렵진 않지만, 만들려고 하다보면 30분 이상 잡아먹기 일쑤다.

그래서 스스로 간단하고 이해하기 쉬운 코드를 작성해 보았다.

<table width="200" border="1">
    <tr>
        <td>日</td>
        <td>月</td>
        <td>火</td>
        <td>水</td>
        <td>木</td>
        <td>金</td>
        <td>土</td>
    </tr>
    <tr>
    <?php
        // Generate carendar data
        $dat = split(',',date('n,Y')); 
        $first = mktime(0,0,0,$dat[0],1,$dat[1]); 
        $last = mktime(23,59,59,$dat[0]+1,0,$dat[1]); 
        $firstDayWeeksign = date("w", $first);
        $thisMonthTotal = date("t", $first);
        $lastDayWeeksign = date("w", $last);
        $thisMonth = array();
    
        // Header space
        for ( $i=1; $i<=$firstDayWeeksign; $i++ )
            $thisMonth[] = '';
        // Days
        for ( $i=1; $i<=$thisMonthTotal; $i++ )
            $thisMonth[] = $i;
        // Footer space
        for ( $i=1; $i<=(6-$lastDayWeeksign); $i++ )
            $thisMonth[] = '';
            
        // Make the carlendar
        $divideCount = 0;
        foreach ( $thisMonth as $day ) :
            switch ( $divideCount%7 ) {
                case 0: $weeksign = "red"; break;
                case 6: $weeksign = "blue"; break;
                default: $weeksign = "black";
            }
    ?>
            <td style="color:<?php echo @$weeksign; ?>"><?php echo $day; ?></td>
    <?php
            if ( ++$divideCount % 7 == 0 ) print "</tr>\r\n<tr>";
        endforeach;
    ?>
    </tr>
</table>

이를 응용해서 스케쥴 관리 프로그램등을 작성할 수 있겠다.

,

댓글 없음

isset by Javascript

Posted by admin in Programming on 2008년 10월 7일

TinyMCE 에서 TinyMCE 가 설정되었나를 판별하기 위해서 구상을 하다가 PHP의 isset 과 같은 기능의 함수를 다음과 같은 코드로 구현해 보았다.

function isset(varname) {
    return(typeof(window[varname]) != 'undefined');
}

아직까지는 이렇다 할 버그는 발견하지 못했다.

, ,

댓글 없음

TinyMCE setting for Japanese (not English languages)

Posted by admin in Programming on 2008년 10월 7일

내가 프로그래머를 ‘못해먹겠다!’ 고 생각하는 이유 중 하나는, 엄청난 프로그램을 한푼도 받지 않고 공개하는 프로그래머들의 실력을 보고는 털썩 주저앉을 수 밖에 없기 때문이다. 그런 프로그램중 하나, TinyMCE.

Javascript WYSIWYG Editor 이다. 이 프로그램을 현재 개발중인 일본어 시스템에 적용하는 과정을 기록해 둔다.

1. Full examples from TinyMCE hompage

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
 
    // Theme options
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
 
    // Example content CSS (should be your site CSS)
    content_css : "css/example.css",
 
    // Drop lists for link/image/media/template dialogs
    template_external_list_url : "js/template_list.js",
    external_link_list_url : "js/link_list.js",
    external_image_list_url : "js/image_list.js",
    media_external_list_url : "js/media_list.js",
 
    // Replace values for the template plugin
    template_replace_values : {
        username : "Some User",
        staffid : "991234"
    }
});
</script>
 
<form method="post" action="somepage">
    <textarea name="content" style="width:100%">
    </textarea>
</form>

이렇게 하면 성공적으로 동작을 하게 된다. 이 예제를 고쳐가며 설정을 한다.

2. Change target from ‘name=content’ to ‘class=mceEditor’

기본적으로 textarea 태그 중 name 이 content 인 값을 찾아 그 value 를 Active Content 로 만들어 주는데, name 속성을 content 이외의 값으로 해야 할 경우가 있다.

mode : "textareas",
to
mode : "specific_textareas",
editor_selector : "mceEditor",
 
<textarea name="description" class="mceEditor" style="width:98%"><?php echo ...; ?></textarea>

이처럼 class 속성을 인식하게 할 수 있다.

3. Change language to Japanese

이제 언어를 일본어로 바꿔보자.

Language packs for TinyMCE 에서 필요한 언어를 체크한 후 밑의 다운로드 버튼을 이용해서 다운로드를 하고 압축을 풀면, 몇개의 디렉토리가 생기는데 이를 그대로 덮어쓰기 하여 업로드 하면 된다.

/tinymce/jscripts/tiny_mce/langs/
/tinymce/jscripts/tiny_mce/themes/advanced/langs/
/tinymce/jscripts/tiny_mce/plugins/<pluginname>/langs/

Using a Language Pack 의 설명에 의하면

  • The themes and langs folder, simply upload the folders into /tinymce-advanced
  • The third one is a bit more complicated. Enter the plugins folder. It contains several folders. This contents of the plugins folder: upload it into the folder /tinymce-advanced/mce .

이와같이 설명되어 있으나, 새로운 버젼이 되면서 plugins 디렉토리도 그냥 통째로 업로드 할 수 있도록 바뀐 모양이다. 그냥 전체를 TinyMCE 를 설치한 디렉토리에 업로드하면 되겠다. 그 후, Option: language 를 참고하여

tinyMCE.init({
    mode : "textareas",
    language : "ja"
...
});

설정을 한다. 코드의 중간에 설정을 할 경우에는  language : "ja", 처럼 맨 뒤의 , 콤마를 잊지 말 것.

4. Pannel setting

// 'styleselect' remove
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
// Comment out theme_advanced_buttons4
//theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
 
// Set font list
/*
    Windows base font. XP, Vista
    font-family: "MS UI Gothic"
    font-family: "ＭＳ Ｐゴシック","MS PGothic"
    font-family: "ＭＳ ゴシック","MS Gothic"
    font-family: "ＭＳ Ｐ明朝","MS PMincho"
    font-family: "ＭＳ 明朝","MS Mincho"
*/
theme_advanced_fonts : "ＭＳ Ｐゴシック='MS PGothic';ＭＳ ゴシック='MS Gothic';ＭＳ Ｐ明朝='MS PMincho';ＭＳ 明朝='MS Mincho';Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace",

별로 필요없는 4번째 버튼들은 없애고, 설정을 하지 않으면 소용이 없는 styleselect 를 뺐다.

5. Change Active Content Style

…/tiny_mce/themes/advanced/skins/default/content.css

를 수정하면 된다.

body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}
to
body, td, pre {font-family: "MS PGothic",Verdana, Arial, Helvetica, sans-serif;    font-size: 13px;}
p { margin:2px 0;}

이런식으로 일본어 폰트로 함과 동시에, 엔터를 눌렀을때의 행간 간격을 조금 벌였다.

Option: content_css 에 나와 있는 여러가지 편한 방법들을 테스트 해 보았지만, 직접 css 파일을 고치는 방법이 아니면 효과가 나타나질 않았다. 여러 브라우저에서 테스트할 필요가 있다.

6. for Ajax form data sending

Ajax 에서 폼을 송신하는 코드 부분에 다음 코드를 추가 한다.

if ( typeof(window['tinyMCE']) != 'undefined' ) {
    var MCEContent = tinyMCE.activeEditor.getContent();
    if ( MCEContent )
        $('[@name=description]:first').attr('value', MCEContent); // Using jQuery
}

tinyMCE 가 설정 되어 있으면 name=description 으로 지정된 form 의 value 를 tinyMCE active contnet 의 값으로 대체하는 코드이다.

- Reference

, , , , ,

댓글 없음

td nowrap

Posted by admin in Hacks on 2008년 10월 3일

간혹가다 통계자료를 테이블로 보여줘야 할 일이 생긴다.

이때 브라우저의 폭에 따라서 테이블이 이리저리 찌그러지게 되는데, 이를 방지하기 위한 방법을 알아보았다.

참 어렵게 생각했었는데, 항상 알고나면 쉽다.

<td nowrap="nowrap">

이렇게 th 나 td 에 nowrap 속성을 부여하면 된다. 이를 CSS로 구현하면,

td {
white-space: nowrap;
}

이렇게 하면 되겠다.

참고로, 테이블 크기를 고정하는 방법은 아래와같다.

<table border="1"cellspacing="0" cellpadding="0" width="310"  height="150"
style="table-layout: fixed">

홈페이지를 여러해 만져보지만, 이렇게 기본적인 것을 모를 때가 많다.

- Reference

, , ,

댓글 없음

jQuery Datepicker setting for Japanese

Posted by admin in Programming on 2008년 10월 3일

jQuery

   1: <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
   2: <script src="js/jquery-ui-personalized-1.5.1.packed.js" type="text/javascript"></script>
   3: <link rel="stylesheet" href="js/flora.datepicker.css" type="text/css" media="screen" title="Flora (Default)" />
   4: <script type="text/javascript">
   5: /* French initialisation for the jQuery UI date picker plugin. */
   6: /* Written by Keith Wood (kbwood@virginbroadband.com.au) and Stéphane Nahmani (sholby@sholby.net). */
   7: jQuery(function($){
   8:     $.datepicker.regional['ja'] = {clearText: 'クリア', clearStatus: '',
   9:         closeText: '閉じる', closeStatus: '閉じる（変更なし）',
  10:         prevText: '&laquo;先月', prevStatus: '先月に移動',
  11:         nextText: '来月&raquo;', nextStatus: '来月に移動',
  12:         currentText: '今月', currentStatus: '今月に移動',
  13:         monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  14:         monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  15:         monthStatus: '月変更', yearStatus: '年変更',
  16:         weekHeader: 'Wk', weekStatus: '',
  17:         dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
  18:         dayNamesShort: ['日','月','火','水','木','金','土'],
  19:         dayNamesMin: ['日','月','火','水','木','金','土'],
  20:         dayStatus: '', dateStatus: '',
  21:         dateFormat: 'yy-mm-dd', firstDay: 0, 
  22:         initStatus: '選択して下さい', isRTL: false,
  23:         yearRange: '-80:+0',
  24:         buttonImageOnly: true, buttonImage: '/images/calendar.jpg', buttonText: 'カレンダー',
  25:         firstDay: 0, changeFirstDay: false};
  26:     $.datepicker.setDefaults($.datepicker.regional['ja']);
  27: });
  28:  
  29: $(document).ready(function() {
  30:     $('#birthday').datepicker();
  31: });
  32: </script>

Html

<li><strong>誕生日</strong><br />
    <input name="birthday" id="birthday" type="text" value="" readonly="readonly" />
</li>

CSS

/* Main Flora Style Sheet for jQuery UI ui-datepicker */
#ui-datepicker-div, .ui-datepicker-inline {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    padding: 0;
    margin: 0;
    background: #E0F4D7;
    width: 185px;
}
#ui-datepicker-div {
    display: none;
    border: 1px solid #FF9900;
    z-index: 10;
}
.ui-datepicker-inline {
    float: left;
    display: block;
    border: 0;
}
.ui-datepicker-rtl {
    direction: rtl;
}
.ui-datepicker-dialog {
    padding: 5px !important;
    border: 4px ridge #83C948 !important;
}
button.ui-datepicker-trigger {
    width: 25px;
}
img.ui-datepicker-trigger {
    margin: 2px;
    vertical-align: middle;
}
.ui-datepicker-prompt {
    float: left;
    padding: 2px;
    background: #E0F4D7;
    color: #000;
}
*html .ui-datepicker-prompt {
    width: 185px;
}
.ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker {
    clear: both;
    float: left;
    width: 100%;
    color: #FFF;
}
.ui-datepicker-control {
    background: #FF9900;
    padding: 2px 0px;
}
.ui-datepicker-links {
    background: #E0F4D7;
    padding: 2px 0px;
}
.ui-datepicker-control, .ui-datepicker-links {
    font-weight: bold;
    font-size: 80%;
    letter-spacing: 1px;
}
.ui-datepicker-links label {
    padding: 2px 5px;
    color: #888;
}
.ui-datepicker-clear, .ui-datepicker-prev {
    float: left;
    width: 34%;
}
.ui-datepicker-rtl .ui-datepicker-clear, .ui-datepicker-rtl .ui-datepicker-prev {
    float: right;
    text-align: right;
}
.ui-datepicker-current {
    float: left;
    width: 30%;
    text-align: center;
}
.ui-datepicker-close, .ui-datepicker-next {
    float: right;
    width: 34%;
    text-align: right;
}
.ui-datepicker-rtl .ui-datepicker-close, .ui-datepicker-rtl .ui-datepicker-next {
    float: left;
    text-align: left;
}
.ui-datepicker-header {
    padding: 1px 0 3px;
    background: #83C948;
    text-align: center;
    font-weight: bold;
    height: 1.3em;
}
.ui-datepicker-header select {
    background: #83C948;
    color: #000;
    border: 0px;
    font-weight: bold;
}
.ui-datepicker {
    background: #CCC;
    text-align: center;
    font-size: 100%;
}
.ui-datepicker a {
    display: block;
    width: 100%;
}
.ui-datepicker-title-row {
    background: #B1DB87;
    color: #000;
}
.ui-datepicker-title-row .ui-datepicker-week-end-cell {
    background: #B1DB87;
}
.ui-datepicker-days-row {
    background: #FFF;
    color: #666;
}
.ui-datepicker-week-col {
    background: #B1DB87;
    color: #000;
}
.ui-datepicker-days-cell {
    color: #000;
    border: 1px solid #DDD;
}
.ui-datepicker-days-cell a {
    display: block;
}
.ui-datepicker-week-end-cell {
    background: #E0F4D7;
}
.ui-datepicker-unselectable {
    color: #888;
}
.ui-datepicker-week-over, .ui-datepicker-week-over .ui-datepicker-week-end-cell {
    background: #B1DB87 !important;
}
.ui-datepicker-days-cell-over, .ui-datepicker-days-cell-over.ui-datepicker-week-end-cell {
    background: #FFF !important;
    border: 1px solid #777;
}
* html .ui-datepicker-title-row .ui-datepicker-week-end-cell {
    background: #B1DB87 !important;
}
* html .ui-datepicker-week-end-cell {
    background: #E0F4D7 !important;
    border: 1px solid #DDD !important;
}
* html .ui-datepicker-days-cell-over {
    background: #FFF !important;
    border: 1px solid #777 !important;
}
* html .ui-datepicker-current-day {
    background: #83C948 !important;
}
.ui-datepicker-today {
    background: #B1DB87 !important;
}
.ui-datepicker-current-day {
    background: #83C948 !important;
}
.ui-datepicker-status {
    background: #E0F4D7;
    width: 100%;
    font-size: 80%;
    text-align: center;
}
#ui-datepicker-div a, .ui-datepicker-inline a {
    cursor: pointer;
    margin: 0;
    padding: 0;
    background: none;
    color: #000;
}
.ui-datepicker-inline .ui-datepicker-links a {
    padding: 0 5px !important;
}
.ui-datepicker-control a, .ui-datepicker-links a {
    padding: 2px 5px !important;
    color: #000 !important;
}
.ui-datepicker-title-row a {
    color: #000 !important;
}
.ui-datepicker-control a:hover {
    background: #FDD !important;
    color: #333 !important;
}
.ui-datepicker-links a:hover, .ui-datepicker-title-row a:hover {
    background: #FFF !important;
    color: #333 !important;
}
.ui-datepicker-multi .ui-datepicker {
    border: 1px solid #83C948;
}
.ui-datepicker-one-month {
    float: left;
    width: 185px;
}
.ui-datepicker-header {
    margin-left:30px;
    width:130px;
}
.ui-datepicker-new-month {
    float: right;
}
.ui-datepicker-new-year {
    float: left;
}
 
.ui-datepicker-new-row {
    clear: left;
}
.ui-datepicker-cover {
    display: none;
    display/**/: block;
    position: absolute;
    z-index: -1;
    filter: mask();
    top: -4px;
    left: -4px;
    width: 193px;
    height: 200px;
}

응용하면 얼마든지 Korean 도 가능하겠다.

, , ,

댓글 없음

Form error check by jQuery ajax

Posted by admin in Programming on 2008년 10월 3일

First, let’s see source code.

PHP

if ( !@$_POST['login_name'] || !preg_match("/^[a-z0-9]*$/", @$_POST['login_name']) ) { $err++; $errMsg['login_name']     = "会員IDは半角英数でお願いします。"; }
if ( empty($_POST['lastname']) || empty($_POST['firstname']) )             { $err++; $errMsg['lastname']         = "お名前は「姓」と「名」を共に入力お願いします。"; }
if ( !@$_POST['email'] || !@$_POST['email_confirm'] )                    { $err++; $errMsg['passwd']         = "ご入力お願いします。"; }
if ( !@$_POST['passwd'] || !@$_POST['passwd_confirm'] )                 { $err++; $errMsg['passwd']         = "ご入力お願いします。"; }
if ( @$_POST['passwd'] != @$_POST['passwd_confirm'] )                     { $err++; $errMsg['passwd']         = "一致しません。ご確認お願いします。"; }
if ( empty($_POST['birthday']) )                                         { $err++; $errMsg['birthday']         = "ご入力お願いします。"; }
if ( !@$_POST['email'] || !@$_POST['email_confirm'] )                    { $err++; $errMsg['email']             = "ご入力お願いします。"; }
if ( @$_POST['email'] != @$_POST['email_confirm'] )                     { $err++; $errMsg['email']             = "一致しません。ご確認お願いします。"; }
if ( !preg_match("/^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)*\.([a-zA-Z]{2,6})$/", @$_POST['email']) ) { $err++; $errMsg['email'] = "正しいメールアドレスを入力して下さい。"; }
if ( @$_POST['mobilemail'] != @$_POST['mobilemail_confirm'] )             { $err++; $errMsg['mobilemail']     = "一致しません。ご確認お願いします。"; }
if ( @$_POST['mobilemail'] && !preg_match("/^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)*\.([a-zA-Z]{2,6})$/", @$_POST['mobilemail']) ) { $err++; $errMsg['mobilemail'] = "正しいメールアドレスを入力して下さい。"; }
if ( !@$_POST['zipcode'] || !preg_match("/^[0-9-]*$/", @$_POST['zipcode']) ) { $err++; $errMsg['zipcode']         = "半角数字でご入力お願いします。"; }
if ( empty($_POST['pref']) )                                             { $err++; $errMsg['pref']             = "お選びお願いします。"; }
if ( empty($_POST['address']) )                                         { $err++; $errMsg['address']         = "ご入力お願いします。"; }
if ( !@$_POST['tel'] || !preg_match("/^[0-9-]*$/", @$_POST['tel']) )     { $err++; $errMsg['tel']             = "半角数字でご入力お願いします。"; }
 
if ( empty($_POST['sex']) )                                             { $err++; $errMsg['sex']             = "お選びお願いします。"; }
if ( empty($_POST['job']) )                                             { $err++; $errMsg['job']             = "お選びお願いします。"; }
if ( empty($_POST['marriage']) )                                         { $err++; $errMsg['marriage']             = "お選びお願いします。"; }
if ( empty($_POST['children']) )                                         { $err++; $errMsg['children']             = "お選びお願いします。"; }
 
if ( $err ) {
    $message = json_encode($errMsg);
}

jQuery

$(document).ready(function() {
    $('#save-btn').click(function(){
        $.post('registerCheck.php', $('form').serializeArray(), function(data){
            if ( !data.code ) {
                $('.error').remove();
                var errmsgs = eval('('+data.message+')');
                $.each(errmsgs, function(key, value) {
                    if ( $('[@name='+key+']:first').parent()[0].tagName.toLowerCase() == "label" )
                    $('[@name='+key+']:first').parent().parent().append('<small><strong style="color:red;" class="error">'+value+'</strong></small>');
                    else
                    $('[@name='+key+']:first').parent().append('<small><strong style="color:red;" class="error">'+value+'</strong></small>');
                });
                //$('.error').show('highlight', {}, 1000, function(){});
                alert("!!! ご確認 !!!\n￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣\nいくつかの項目に入力の間違いがありました。\nご確認お願いします。");
            }
            else {
                $('.error').remove();
                //alert(data.message);
                $('form').submit();
            }
        }, "json"); // Serve script return value must be Json
    });
});

Html

<li>
    <strong>会員ID</strong><br />
    <input name="login_name" type="text" value="" />
</li>
<li>
    <strong>姓</strong>
    <input name="lastname" type="text" value="" />
    <br />
    <strong>名</strong>
    <input name="firstname" type="text" value="" />
</li>
<li>
    <strong>パスワード</strong><br />
    <input name="passwd" type="password" value="" />
    <br />
    <input name="passwd_confirm" type="password" value="" /> (確認)
</li>
<li><strong>誕生日</strong><br />
    <input name="birthday" id="birthday" type="text" value="" readonly="readonly" />
</li>
<li>
    <strong>PCメール</strong><br />
    <input name="email" type="text" value="" />
    <br />
    <input name="email_confirm" type="text" value="" /> (確認)
</li>
<li>
    <strong>携帯メール</strong><br />
    <input name="mobilemail" type="text" value="" />
    <br />
    <input name="mobilemail_confirm" type="text" value="" /> (確認)
</li>
<li>
    <strong>ホームページ</strong><br />
    <input name="url" type="text" value="" />
</li>
<li>
    <strong>郵便番号</strong><br />
    <input name="zipcode" type="text" value="" />
</li>
<li>
    <strong>都道府県</strong><br />
    <?php genSelect('pref'); ?>
</li>
<li>
    <strong>住所</strong><br />
    <input name="address" type="text" value="" />
</li>
<li>
    <strong>電話番号</strong><br />
    <input name="tel" type="text" value="" />
</li>

이런식으로 간단히 해결 할 수 있었다.

Point is…

$.each(DATA, function(KEY, VALUE){});

, , , , ,

댓글 없음