web纪录一

1、手机、pc端网页自适应:在css里根据屏幕大小来分别加载对应端的css样式。这也可以通过检查设备的操作系统做到。

<style type="text/css"> 
@media(max-width:760px)   /*当屏幕像素值小于760加载下列css，当然短期内应该不会出现分别率过千的手机 */
{
     /* 网页全屏显示 */
    body {width:100%;} 
    /* 正文图片宽度最多是屏幕宽度的90% */
    #divMain img{max-width:90%} 

    /* 隐藏头部、导航、侧栏、页脚 */
    #divHead{display:none}
}
</style>

2.code sample

动态插入内容：
<script type="text/template" class="navItemList1" >
</script>
{% end %}

{% block scripts %}
<script>
$('.addItem').click(function(){
    var hiddenContent=$('.navItemList1');
    $(".navBar").append($(hiddenContent.html()).clone());
})
</script>
{% end %}




<a href="{{ reverse_url('pay.book_edit', goods.id) }}" class="edit_game" title="编辑">
<a href="{ url_concat(reverse_url('sp_goods.booking.edit'), {'sp_goods_id': booking.sp_goods_id,
'sp_shop_id': booking.shop_id }) }}"
   class="edit_game" title="编辑">
    <span class="fa fa-pencil crud-action"></span>
</a>




//编辑后保存
    $('.control').on('click','.fa-save',function(){
        // 前一列。
        var $group_price=$(this).parent().parent().prev();
        var $pre_price=$group_price.prev();
        var $project_name=$group_price.prev().prev();
        var book_id=$(this).parent().find('input[name=book_id]').val();

        if ( !groupPrice || !prePrice  || ! projectName ){
            alert('数据不可以为空');
            return false;
        }
        $.post(
            '{{ reverse_url("pay.book_item_edit") }}' ,
            {
                'name': projectName
            },
            function(data){
                if (! data.ok){
                    alert(data.error);
                }
                else{
                    var cate_html = '<input type="hidden" name="cate-id" value="' + data.cate_id + '">'
                    $group_price.children().remove();
                    $group_price.text(groupPrice);
                    $this.removeClass('fa-save').addClass('fa-pencil');
                    $this.parent().append(cate_html);
                }
            }
        )
    })

待续

参考：

 [1]:http://www.webkaka.com/blog/archives/how-to-modify-a-web-page-to-be-responsive.html