All geek questions in one place

Custom jQuery customization

I have jQuery as shown below. This is actually an ordered list. The ordered list is inside a div named myBorderDiv.

When I press the control button and click on the elements, they all get an undesirable effect (in IE8), as shown in the image below. How to overcome this?

enter image description here

<html xmlns="http://www.w3.org/1999/xhtml">


<title></title>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/sunny/jquery-ui.css"
    rel="stylesheet" type="text/css" />

<script type="text/javascript">

    $(document).ready(function () {

        //Make it as selectable
        $("#myOrderedListSelecatableAsHeaderPart").selectable();


        //selectablestop Event Handler
        $("#myOrderedListSelecatableAsHeaderPart").bind("selectablestop", function (event) {
            var test= "";
            $(".ui-selected", this).each(function () {
                test+= this.getAttribute("Categoryid") + ",";
            });


        });

        $("button, input:submit").button()

        $("button#selectall").click(function (event) {
            //When select all button clicked 

            //Add css class
            $("#myOrderedListSelecatableAsHeaderPart li").addClass("ui-selected");

            //Trigger the selectablestop event and preventDefault
            $("#myOrderedListSelecatableAsHeaderPart").trigger("selectablestop");
            event.preventDefault();

        });


    });


</script>
<style type="text/css">
    #myOrderedListSelecatableAsHeaderPart .ui-selected
    {
        background: #F39814;
        color: white;
    }

    #myOrderedListSelecatableAsHeaderPart
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    #myOrderedListSelecatableAsHeaderPart li
    {
        margin: 3px;
        height: 18px;
        padding: 3px; /*Display list items in blobk */
        display: inline-block;
    }
    </style>
</head>


<body>



<div>
    <h3>
        Hold control and click to select multiple items
    </h3>
    <div>

        <div id="myBorderDiv" style="border: 1px solid brown; width:375px;">

            <ol id="myOrderedListSelecatableAsHeaderPart"  >
                <li categoryid="2" class="ui-widget-content">Apple </li>
                <li categoryid="4" class="ui-widget-content">Bag </li>
                <li categoryid="10" class="ui-widget-content">Cup </li>
                <li categoryid="7" class="ui-widget-content">Doll </li>
                <li categoryid="8" class="ui-widget-content">Empty </li>
                <li categoryid="9" class="ui-widget-content">Football </li>
                <li categoryid="10" class="ui-widget-content">Gems </li>
                <li categoryid="50" class="ui-widget-content">Horse </li>
                <li categoryid="3" class="ui-widget-content">Inter </li>
                <li categoryid="4" class="ui-widget-content">JokerCap </li>
                <li categoryid="5" class="ui-widget-content">King </li>
                <li categoryid="6" class="ui-widget-content">Lemon </li>
                <li categoryid="7" class="ui-widget-content">Nail </li>
                <li categoryid="8" class="ui-widget-content">One </li>
                <li categoryid="9" class="ui-widget-content">Ping </li>
                <li categoryid="10" class="ui-widget-content">Quick </li>
                <li categoryid="7" class="ui-widget-content">Royal </li>
                <li categoryid="8" class="ui-widget-content">Standard </li>
                <li categoryid="9" class="ui-widget-content">Train </li>
                <li categoryid="10" class="ui-widget-content">Umbrella </li>
                <li categoryid="50" class="ui-widget-content">Van </li>
            </ol>
        </div>
        <br />
        <button id="selectall">
            Select All</button>
    </div>
</div>

+2
source share
2 answers

This code snippet, shortened from this, will solve the problem.

$(function(){
    $.extend($.fn.disableTextSelect = function() {
                $(this).bind('selectstart',function(){return false;});
    });
    $('#myOrderedListSelecatableAsHeaderPart').disableTextSelect();
});
+2
source

# 1 display:inline' or : inline-block` DIV. , DIV , "clearfix", DIV 0 . , ( ). , , DIV , .

№ 2, . , , ctrl? -? , js-, -?

0

Source: https://habr.com/ru/post/1714699/

More articles:


All Articles