2010年1月15日金曜日

チェックボックスの選択数を制限する

<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript">
<!--
    function count_check(event) {
        var item = Event.element(event);
        var limit = 2;
        var cnt = $('counter').innerHTML;
        if (item.checked) {
            cnt++;
        }
        else {
            cnt--;
        }
        if (cnt > limit) {
            alert("チェックは"+limit+"つまでです")
            item.checked = false;
        }
        else {
            $('counter').innerHTML = cnt;
        }
    }
//-->
</script>
<p>
    チェックは 2つまで<BR>
    <input type="checkbox" name="data[]" id="c31" />
    <input type="checkbox" name="data[]" id="c32" />
    <input type="checkbox" name="data[]" id="c33" />
    <div id="counter" style="display: none;">0</div>
</p>
<script type="text/javascript">
    Event.observe('c31', 'click', count_check);
    Event.observe('c32', 'click', count_check);
    Event.observe('c33', 'click', count_check);
</script>
投稿者 時刻: 0 件のコメント:

2010年1月12日火曜日

Ajax　フラッシュメッセージ的なもの

<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="./scriptaculous.js"></script>
<script type="text/javascript">
<!--
    Event.observe(window, 'load', execute, false);
   
    function execute() {
        new Effect.Fade("flash_message", {
            from:1.0, // 開始時透明度
            to:0.0, // 終了時透明度
            delay:1, // 開始までの秒数
            // fps:60, // フレームレート
            duration: 1, // アニメーションする時間(秒)
            beforeStartInternal: function(effect) {
            },
            afterFinishInternal: function(effect) {
                Element.hide('flash_message');
            }
        });
    }
//-->
</script>
投稿者 時刻: 0 件のコメント:

Ajax　チェックボックスの状態をhiddenにコピー

<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript">
<!--
    function chkbox_handler(event) {
        var item = Event.element(event);
        hidid = 'hid_' + item.id;
        if (item.checked) {
            $(hidid).value = 'on';
        }
        else {
            $(hidid).value = 'off';
        }
    }
//-->
</script>

<?php $checked = ($chk_1 == 'on') ? 'checked' : '' ?>
<input id="chk_1" type="checkbox" <?php echo $checked ?> />チェック１
<input id="hid_chk_1" type="hidden" name="chk_1" value="<?php echo $chk_1 ?>" />
<script type="text/javascript">
    Event.observe('chk_1', 'click', chkbox_handler);
</script>
投稿者 時刻: 0 件のコメント:

Ajax タブ切替え

<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="./livepipe.js"></script>
<script type="text/javascript" src="./tabs.js"></script>
<style type="text/css">
            /* Subsection Tabs
            --------------------*/
            ul.subsection_tabs {border-bottom:1px solid #CCCCCC;clear:both;height:20px;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0 0 5px;padding:0;}
            ul.subsection_tabs a {font-size:12px;font-weight:bold;text-decoration:none;line-height:20px;}
            ul.subsection_tabs li.tab {float:left;margin-right:7px;text-align:center;}
            ul.subsection_tabs li.tab a {background-color:#FFFFFF;color:#666666;display:block;height:20px;padding:0 6px;width:80px;}
            ul.subsection_tabs li.tab a:hover {color:#666666;}
            ul.subsection_tabs li.tab a.active {background-color:#DDDDDD;}
            ul.subsection_tabs li.source_code {float:right;}
</style>

<body>
<!-- example 1 --> 
<ul id="tabs_example_one" class="subsection_tabs"> 
    <li class="tab"><a href="#one">One</a></li> 
    <li class="tab"><a href="#two">Two</a></li> 
</ul> 
<div id="one">
    <!-- tab page one --> 
</div> 
<div id="two">
    <!-- tab page two --> 
</div> 

<script type="text/javascript">
    new Control.Tabs('tabs_example_one'); 
</script>
</body>

http://livepipe.net/control/tabs
http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=prototype_plugin_tabs
投稿者 時刻: 0 件のコメント:
登録: 投稿 (Atom)